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>

浙公网安备 33010602011771号