主题简介
书书瀑布流主题是一款专为图文内容打造的沉浸式瀑布流模板，采用全屏布局设计，左侧固定分类导航，右侧以多列瀑布流形式展示图文内容，滚动到底部自动加载下一页。
核心特性
- 全屏布局 — 顶部固定导航，左侧固定分类栏，右侧内容区自适应
- 顶部栏 — 左 LOGO / 站点名称，右搜索框
- 左侧分类 — 展示全部分类，当前分类高亮，底部显示备案信息
- 多列瀑布流 — CSS 多列布局，卡片高度错落有致，无留白
- 无限滚动 — 滚动到底部自动加载下一页，无需手动翻页
- 首屏填充 — 首屏内容不足时自动加载，填满首屏
- 响应式列数 — 根据屏幕宽度自动调整列数
- 懒加载 — 图片原生懒加载，提升首屏速度
提示： 本模板基于逗号CMS原生函数开发，所有内容均从后台实时读取，无需修改模板代码。
文件结构
/templates/shushu/
├── header.php — 页头（顶部导航 + 左侧分类开始）
├── footer.php — 页脚（仅闭合容器）
├── index.php — 首页瀑布流（含无限滚动 JS）
├── category.php — 分类/搜索页瀑布流
├── article.php — 文章详情页
├── style.css — 主题样式
└── shushu.html — 主题说明文件（当前文件）
安装步骤
-
下载安装主题
安装新版逗号CMS V6.3 版本，进入后台--主题列表，选择 蓝色资讯主题模板 点击免费下载安装。
-
配置前端路由（首次安装无需操作）
进入后台 用户管理 → 前端路由管理，点击恢复默认路由。
⚠️ 注意： 若之前安装过独立路由的主题模板，此步必须操作，否则将无法正常切换主题！
布局说明
页面结构
| 区域 |
内容 |
| 顶部栏 |
左侧 LOGO/站点名称 + 右侧搜索框，固定不滚动 |
| 左侧栏 |
全部分类导航 + 首页入口，底部固定显示备案号和版权，固定不滚动 |
| 右侧内容区 |
多列瀑布流卡片（上图 + 下标题），滚动自动加载下一页 |
瀑布流列数响应式
| 屏幕宽度 |
列数 |
适用设备 |
| > 1600px |
5 列 |
大屏桌面 |
| 1400 ~ 1600px |
5 列 |
桌面 |
| 1100 ~ 1400px |
4 列 |
笔记本 |
| 900 ~ 1100px |
4 列 |
小屏笔记本 |
| 600 ~ 900px |
3 列 |
平板 |
| ≤ 600px |
1 列 |
手机 |
功能说明
无限滚动加载
滚动到距离页面底部 400px 时，自动加载下一页内容并追加到瀑布流中。
首屏自动填充
如果首屏内容高度不足一屏，会自动加载下一页，直到填满首屏为止，避免用户看到空白区域。
分类高亮
- 首页 — 高亮「首页」菜单
- 分类页 — 高亮当前分类
- 文章页 — 高亮文章所属分类
图片懒加载
使用浏览器原生 loading="lazy" 属性，图片进入视口后才加载，提升首屏速度。
无图处理
如果文章没有封面图且正文中也没有图片，则显示灰色占位图，保持布局整齐。
自定义调整
修改主题色
打开 style.css，找到 :root 部分，修改以下变量：
--ss-primary: #ff6b35; 主色调（橘红）
--ss-primary-dark: #e55a2b; 深色（悬停色）
修改左侧栏宽度
--ss-sidebar-w: 200px; 左侧分类栏宽度
修改顶部栏高度
--ss-header-h: 64px; 顶部导航栏高度
调整列数
打开 style.css，修改 .ss-waterfall 的 column-count 值：
.ss-waterfall { column-count: 5; } 默认 5 列
注意事项
- 伪静态规则：请确保服务器已配置伪静态规则，否则分类页和文章详情页可能无法正常访问。
- 封面图建议：为了让瀑布流更美观，建议为文章上传不同尺寸的封面图，形成错落有致的视觉效果。
- 缓存管理：修改模板样式后，若开启缓存请先清空缓存再刷新查看效果。
- 前端路由：切换主题后如遇 404，请到后台「用户管理 → 前端路由管理」点击「恢复默认路由」。
- 阅读全文：需在后台「网站设置 → 网站设置」中开启「阅读全文」功能。
- 浏览器兼容：CSS 多列布局不支持 IE 浏览器，推荐使用 Chrome、Edge、Firefox、Safari 等现代浏览器。
更新日志
V1.0
- 初始版本发布
- 全屏布局 + 顶部导航 + 左侧分类
- CSS 多列瀑布流布局
- 无限滚动自动加载
- 首屏自动填充
- 响应式列数适配
技术支持
如在使用过程中遇到任何问题，欢迎通过以下方式联系我们：
感谢您使用逗号CMS书书瀑布流主题，祝您使用愉快！