Hexo & Fluid主题增加卡片式链接

Fluid主题不支持卡片式链接展示，本人也是个前端白痴，经过Gemini3 Pro点拨，实现了一个比较简单的链接卡片。

具体的展示效果可参见About。这里把代码和配置分享出来，把以下代码包装成一个自定义js文件，并在fluid的配置中引入这个js文件，具体配置参照自定义 JS / CSS / HTML

document.addEventListener("DOMContentLoaded", function() {
  const btn = document.getElementById('toggleBtn');
  const container = document.getElementById('recomGrid');
  
  if (btn && container) {
    btn.addEventListener('click', function() {
      const isCollapsed = container.classList.contains('collapsed');
      
      if (isCollapsed) {
        // 展开
        const fullHeight = container.scrollHeight + "px";
        container.style.maxHeight = fullHeight;
        container.classList.remove('collapsed');
        btn.textContent = "收起内容";
        
        setTimeout(() => {
          if(!container.classList.contains('collapsed')) {
            container.style.maxHeight = "none";
          }
        }, 600);
      } else {
        // 收起（回到 380px）
        container.style.maxHeight = container.scrollHeight + "px";
        setTimeout(() => {
          container.style.maxHeight = "380px";
          container.classList.add('collapsed');
          btn.textContent = "展开全部";
        }, 10);
        
        container.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
      }
    });
  }
});

在想要展示的页面插入以下html，大功告成！

<div class="recom-wrapper">
  <div class="recom-container collapsed" id="recomGrid">
    <a href="https://kimetsu.com/" class="recom-card">
      <img src="/img/about_img/demon.jpg" class="recom-img" alt="鬼灭之刃">
      <div class="recom-info">
        <span class="recom-title">鬼灭之刃</span>
        <div class="recom-tags">热血 / 超自然 / 动作</div>
      </div>
    </a>
    <a href="https://movie.douban.com/subject/35235151" class="recom-card">
      <img src="/img/about_img/tanggui1.png" class="recom-img" alt="长安诡事录">
      <div class="recom-info">
        <span class="recom-title">唐朝诡事录</span>
        <div class="recom-tags">推理 / 古装 / 悬疑</div>
      </div>
    </a>
    <a href="https://movie.douban.com/subject/4812778" class="recom-card">
      <img src="/img/about_img/zhigaoliyi.jpg" class="recom-img" alt="至高利益">
      <div class="recom-info">
        <span class="recom-title">至高利益</span>
        <div class="recom-tags">权力 / 改革 / 博弈</div>
      </div>
    </a>
    <a href="https://movie.douban.com/subject/3291471" class="recom-card">
      <img src="/img/about_img/555.jpg" class="recom-img" alt="Faiz">
      <div class="recom-info">
        <span class="recom-title">假面骑士Faiz</span>
        <div class="recom-tags">科幻 / 动作 / 特摄</div>
      </div>
    </a>
    </div> <div class="recom-toggle-btn" id="toggleBtn">展开全部</div>
</div>