子比主题美化：首页添加科技风 Banner小工具 已适配手机端教程

这套代码专为Zibll 子比主题打造，实现 PC 端「轮播幻灯片 + 三色渐变分类按钮」双栏布局，移动端自动切换为全屏轮播，支持自动轮播、手动切换、指示器、悬停暂停等完整交互，还适配主题明暗模式，零基础也能一键部署。

效果预览

部署教程

后台 → 外观 → 小工具 → 添加「自定义 HTML」，拖拽到首页顶部位置，粘贴下面完整的 HTML 结构代码，保存。

自定义修改指南

1. 替换轮播图片

找到 HTML 中slide-cover标签，修改background:url()内的图片路径，建议使用绝对路径，图片比例推荐 16:9。

<div class="slide-cover" style="background: url('你的图片地址') no-repeat center / cover"></div>

2. 修改轮播跳转链接

修改slide-link标签的href属性，替换为你的文章 / 页面链接。

<a class="slide-link" href="你的跳转链接"></a>

3. 更改分类按钮文字与链接

• 文字：修改categoryButtonText包裹的文字
• 链接：修改对应<a>标签的href

<span class="categoryButtonText">必看精选</span>
<a href="分类链接" ...></a>

4. 调整轮播切换速度

JS 代码，修改SLIDE_INTERVAL数值，单位为毫秒，默认 5000=5 秒。

const SLIDE_INTERVAL = 5000;

5. 自定义按钮渐变色

在 CSS 中找到.wniui_one/.wniui_two/.wniui_three，修改linear-gradient的色值即可。

6. 调整移动端轮播高度

修改 CSS 中@media screen and (max-width: 1199px)内的height: 240px，适配手机显示。

教程总结

这套美化无插件、纯代码，不占用额外服务器资源，PC 端与移动端自适应完美，交互丝滑，能大幅提升子比主题首页的视觉质感与用户体验。全程复制粘贴即可完成，新手也能轻松上手。