当前位置:首页 > 建站笔记 > 正文内容

io53优化代码记录存放:优化1.下载页样式-2.额外隐藏内容显示:解压教程

云中君2026年07月27日 10:29建站笔记

(付费功能-额外隐藏内容,)解压教程跟随下载处,默认参数不需要每次发布

<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 文案(通常不用改)。

标签: 随手记录
返回列表

上一篇:SEO核心是:八分内容!两分优化~

没有最新的文章了...

“io53优化代码记录存放:优化1.下载页样式-2.额外隐藏内容显示:解压教程” 的相关文章