前言
继音乐、相册、电影之后，博客新增了「图书」独立展示页面，归入「娱乐」板块。这个页面以卡片网格形式展示个人书单，支持按状态筛选、hover 详情预览、评分展示和豆瓣跳转，是记录阅读历程的理想工具。
页面概览
图书页面位于 /books/，在导航栏「娱乐」菜单下可访问。
| 特性 | 说明 |
|---|---|
| 📚 卡片网格 | 响应式 2→3→4→5 列自适应布局，卡片展示封面、书名、作者等关键信息 |
| 📊 状态筛选 | 全部/在读/已读/想读/搁置，一键过滤 |
| 🖱️ Hover 预览 | 鼠标悬停显示完整详情：作者、译者、出版社、ISBN、页数、装帧、定价、简介 |
| ⭐ 评分展示 | 右上角角标显示评分 |
| 🔗 豆瓣链接 | 每本书支持豆瓣主页跳转，一键直达 |
| 🎨 暗色模式 | 完整适配深色主题，卡片、筛选按钮、渐变背景全部覆盖 |
| 💬 评论支持 | 页面底部集成评论系统 |
| 📡 数据驱动 | 基于 data/books.toml 数据文件，Hugo 原生渲染 |
技术实现
页面结构
图书页面通过 Hugo 的 type: books 自定义页面类型实现，使用专用模板 layouts/books/list.html 渲染。
1{{ define "main" }}
2{{ $books := hugo.Data.books.books | default slice }}
3{{ $total := len $books }}
4<!-- 状态筛选按钮 -->
5<div class="book-filter-container">
6 <button data-status="all">全部 ({{ $total }})</button>
7 <button data-status="watching">在读</button>
8 <button data-status="completed">已读</button>
9 <button data-status="planned">想读</button>
10 <button data-status="onhold">搁置</button>
11</div>
12<!-- 书籍卡片网格 -->
13<div class="book-grid">
14 {{ range $books }}
15 <div class="bc" data-status="{{ .status }}">
16 <!-- 封面 / 状态角标 / 评分 / hover 详情面板 -->
17 </div>
18 {{ end }}
19</div>
20{{ end }}
数据文件
图书数据存储在 data/books.toml，每条记录包含完整元数据：
1[[books]]
2 title = "一句顶一万句"
3 status = "watching"
4 author = "刘震云"
5 publisher = "人民文学出版社"
6 publishYear = 2025
7 isbn = "9787020197620"
8 pages = 475
9 binding = "精装"
10 rating = 9.1
11 desc = "刘震云代表作，一部关于说话与孤独的史诗。"
12 type = ["小说", "文学", "中国当代文学"]
13 doubanUrl = "https://book.douban.com/subject/37316563/"
响应式网格
卡片网格采用 CSS Grid 响应式布局，在不同屏幕宽度下自动调整列数：
| 屏幕宽度 | 列数 |
|---|---|
| < 600px | 2 列 |
| 600-900px | 3 列 |
| 900-1200px | 4 列 |
| > 1200px | 5 列 |
Hover 交互
鼠标悬停时卡片向上浮起，封面变暗，底部滑入详情面板，展示完整图书信息。详情面板包含带滚动条的最大高度限制，确保长内容不会溢出。
1.bc:hover {
2 transform: translateY(-8px);
3 box-shadow: 0 20px 50px rgba(0,0,0,.12);
4}
5.bpw-info {
6 transform: translateY(100%);
7 transition: transform .4s cubic-bezier(.4,0,.2,1);
8}
9.bc:hover .bpw-info {
10 transform: translateY(0);
11}
状态角标
四种阅读状态各有独立配色：
| 状态 | 标识 | 配色 |
|---|---|---|
| 在读 | 📖 | 绿色渐变 |
| 已读 | ✓ | 蓝色渐变 |
| 想读 | ♥ | 橙色渐变 |
| 搁置 | ⏸ | 紫色渐变 |
暗色模式
完整适配深色主题，包括卡片背景、文字颜色、筛选按钮、渐变背景、豆瓣链接等所有 UI 元素。
导航菜单
图书页面作为「娱乐」板块的子菜单项，与音乐、相册、电影并列：
1娱乐
2├── 音乐 (/music/)
3├── 相册 (/gallery/)
4├── 电影 (/movies/)
5└── 图书 (/books/)
数据管理
书籍数据通过 data/books.toml 文件管理，支持以下字段：
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| title | 字符串 | 是 | 书名 |
| status | 枚举 | 是 | watching / completed / planned / onhold |
| author | 字符串 | 否 | 作者 |
| translator | 字符串 | 否 | 译者 |
| publisher | 字符串 | 否 | 出版社 |
| imprint | 字符串 | 否 | 出品方 |
| publishYear | 数字 | 否 | 出版年份 |
| isbn | 字符串 | 否 | ISBN 编号 |
| pages | 数字 | 否 | 页数 |
| binding | 字符串 | 否 | 装帧类型 |
| price | 数字 | 否 | 定价 |
| poster | 字符串 | 否 | 封面图片 URL |
| rating | 数字 | 否 | 评分（1-10） |
| desc | 字符串 | 否 | 简介 |
| type | 数组 | 否 | 分类标签 |
| doubanUrl | 字符串 | 否 | 豆瓣链接 |
| links | 数组 | 否 | 自定义链接列表 |
总结
图书页面将博客的「娱乐」板块从音乐、相册、电影扩展到了读书领域，通过卡片网格 + 状态筛选 + hover 交互的设计，既美观又实用。配合 data/books.toml 数据文件管理，添加新书只需编辑 TOML 配置，无需手动编写页面。
留言评论
期待你的想法评论加载中