不少子比站点都会放顶部 / 侧边公告，原生简单公告样式单调，普通滚动代码功能单一。这套优化版滚动公告美化框，样式适配子比 UI，支持纯文字公告、广告文案、点击跳转文章链接，直接嵌入即可使用。

美化特性

1. 无缝循环滚动，滚动速度后台可调节，无卡顿断层
2. 三种内容模式：纯文字公告、广告标语、文章链接公告
3. 样式贴合子比主题，深色 / 浅色模式自动适配
4. 可自由选择放置位置：网站顶部、侧边栏、文章内页顶部
5. 支持自定义背景色、文字颜色、圆角、左右图标
6. 鼠标悬停暂停滚动，交互体验更好

 

部署步骤

1、代码放置位置

子比后台 → 【外观】→【小工具】→【自定义HTML】粘贴样式代码
再前往对应位置插入 HTML 滚动代码：

• 全站顶部：自定义头部 HTML
• 侧边栏：外观→小工具，添加自定义 HTML 组件
• 文章内页：文章自定义钩子

2、基础配置说明

修改代码内参数即可自定义：

• `scroll_speed`：滚动速度，数值越大越慢
• 公告内容：支持多条信息换行填写，可添加`<a href=”链接”>文字</a>`实现点击跳转文章 / 广告页面
• 颜色参数：跟随主题色，也可手动自定义背景、文字、边框

代码部署

主页小工具

 

侧边栏小工具

 

使用小贴士

1. 多条公告不要过多，3～5 条最合适，避免页面高度过高
2. 添加文章链接时，填写完整站内 URL，方便用户直达资源
3. 移动端留意展示效果，文字不宜过长，防止排版拥挤
4. 开启缓存的站点，修改代码后务必清理全站缓存

FAQ

Q：滚动公告只显示一条，不会循环滚动？

A：检查 CSS 与 JS 是否完整复制，缺少关键代码会导致滚动失效，无痕模式刷新测试。

Q：深色模式下公告框颜色不协调？

A：代码内置深色模式适配样式，如效果不佳，手动调整深色模式下对应的颜色代码。

Q：可以放在文章内容顶部，只在指定分类显示吗？

A：单纯 HTML 代码全局生效；想要按分类控制显示，需要搭配子比条件短代码实现。

Q：鼠标悬停无法暂停滚动？

A：确认 JS 片段完整，没有被其他美化代码冲突覆盖。

结语

滚动公告是低成本的站内通知方式，既能发布站点规则、上新通知，也能放置广告引导。这套优化样式和子比视觉融为一体，不用安装插件，轻量无负担，想展示多条动态信息非常合适。