io53优化代码记录存放:优化1.下载页样式-2.额外隐藏内容显示:解压教程
(付费功能-额外隐藏内容,)解压教程跟随下载处,默认参数不需要每次发布
<p style="text-align: center;margin: 10px 0"> <a href="http://io53.com/jyjc" target="_blank" rel="noopener noreferrer" style="color: #dc2626;font-weight: bold;font-size: 15px;text-decoration: none"> 解压教程点此查看 </a> </p>
自定义代码(下载页样式:提取码,解压码优化显示以及点击复制),默认参数不需要每次发布
自定义CSS样式
.dl-code-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 10px 0 16px;
}
.dl-code-item {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 14px 10px;
text-align: center;
cursor: pointer;
transition: all .2s ease;
}
.dl-code-title {
display: block;
color: #6b7280;
font-size: 13px;
margin-bottom: 6px;
}
.dl-code-value {
display: block;
font-weight: bold;
font-size: 16px;
color: #111827;
word-break: break-all;
}
.dl-code-item:hover {
border-color: #f672a2;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.dl-code-item:hover .dl-code-value {
color: #f672a2;
}
.dl-code-icon {
display: block;
margin-top: 6px;
font-size: 12px;
opacity: .7;
}
@media (max-width: 768px) {
.dl-code-wrap {
grid-template-columns: 1fr;
}
}自定义JS代码
(function() {
function fallbackCopy(t) {
var a = document.createElement('textarea');
a.value = t;
a.style.cssText = 'position:fixed;top:-9999px;left:-9999px;opacity:0;';
document.body.appendChild(a);
a.select();
try { document.execCommand('copy'); } catch(e){}
document.body.removeChild(a);
}
function showTip(m) {
var box = document.createElement('div');
box.innerText = m;
box.style.cssText = 'position:fixed;z-index:999999;left:50%;bottom:100px;transform:translateX(-50%) translateY(20px);background:rgba(0,0,0,0.78);color:#fff;padding:12px 24px;border-radius:6px;font-size:14px;opacity:0;transition:all .3s ease;white-space:nowrap;pointer-events:none;';
document.body.appendChild(box);
requestAnimationFrame(function() {
box.style.opacity = '1';
box.style.transform = 'translateX(-50%) translateY(0)';
});
setTimeout(function() {
box.style.opacity = '0';
box.style.transform = 'translateX(-50%) translateY(20px)';
setTimeout(function() { document.body.removeChild(box); }, 300);
}, 2000);
}
function tip(m) {
if (typeof notyf !== 'undefined' && notyf.success) {
try { notyf.success(m); return; } catch(e) {}
}
if (typeof jQuery !== 'undefined' && jQuery.jGrowl) {
try { jQuery.jGrowl(m, { theme: 'success', life: 2000 }); return; } catch(e) {}
}
showTip(m);
}
document.addEventListener('click', function(e) {
var el = e.target;
while (el && el.classList && !el.classList.contains('dl-code-item')) {
el = el.parentNode;
}
if (!el || !el.classList || !el.classList.contains('dl-code-item')) return;
var v = el.querySelector('.dl-code-value').innerText;
var msg = el.getAttribute('data-msg') || '复制成功';
var copied = false;
function finish() {
if (!copied) { copied = true; tip(msg); }
}
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(v).then(function() {
finish();
}).catch(function() {
fallbackCopy(v);
finish();
});
} else {
fallbackCopy(v);
finish();
}
});
})();对于的再资源下载-更多内容处HTML代码
HTML:
<p style="color: #dc2626;font-weight: bold;margin: 0 0 12px 0">(建议点击复制,千万不要手输)</p> <div class="dl-code-wrap"> <div class="dl-code-item" data-msg="提取码复制成功"> <span class="dl-code-title">提取码</span> <span class="dl-code-value">1syg</span> <span class="dl-code-icon">📋</span> </div> <div class="dl-code-item" data-msg="解压码复制成功"> <span class="dl-code-title">解压码</span> <span class="dl-code-value">gteman.com</span> <span class="dl-code-icon">📋</span> </div> <div class="dl-code-item" data-msg="第二层解压码复制成功"> <span class="dl-code-title">第二层解压码(两个其中必是一个)</span> <span class="dl-code-value">gteman.cn或gteman.com</span> <span class="dl-code-icon">📋</span> </div> </div>
批量用的时候
每篇文章「更多内容」里只改这 3 个值:
<span class="dl-code-value">1syg提取码</span> <span class="dl-code-value">gteman.com解压码</span> <span class="dl-code-value">gteman.cn或gteman.com二次解压码</span>
以及对应的 3 个 onclick 文案(通常不用改)。