小说书单页面使用示例

📚 小说书单功能简介

Demius 主题的小说书单功能为您提供了一个优雅的小说管理和展示方案。通过分组管理，您可以轻松组织和展示您读过、在读和想读的小说，支持随机颜色标签和文字，让书单更加丰富多彩。

主要特性

📖 分组管理：支持创建多个书单分组（精选、推荐、热门、新书、已读、在读、想读等）
🎨 随机颜色：标签和文字支持随机颜色，12种配色循环
🌈 背景模式：支持透明、随机彩色、自定义颜色三种背景模式
🏷️ 标签展示：每个小说支持多个标签（最多显示3个）
📊 评分显示：支持显示小说评分
📅 阅读日期：已读小说可记录阅读日期
📈 阅读进度：在读小说可显示阅读进度
🖼️ 封面展示：每个小说支持封面图片
🔗 链接跳转：点击卡片可跳转到外部链接
📱 响应式设计：完美适配各种设备
🌙 暗色模式：自动适配明暗主题
📋 数据管理：通过YAML文件管理数据

🚀 快速开始

1. 创建小说书单页面

在 content/ 目录下创建 booklist.md 文件：

---
title: "小说书单"
date: 2025-10-31T15:00:00+08:00
type: "booklist"
layout: "booklist"
comments: true
---

## 📚 我的书单

这里记录着我读过、在读和想读的小说，每一本都是一个小小的世界 ✨

2. 配置小说书单数据

在项目根目录的 data/ 文件夹下创建 booklist.yaml 文件：

groups:
  - name: "精选"
    books:
      - name: "精选小说1"
        author: "作者A"
        cover: "/img/books/book1.webp"
        description: "这是一本精选小说..."
        rating: 9.5
        tags: ["玄幻", "仙侠"]
        url: "https://example.com/book1"

3. 配置书单样式

在 hugo.toml 文件中添加配置：

[params.booklist]
  cardColorMode = "transparent"       # 背景色模式：transparent/random/custom
  cardCustomColor = "#f5f5f5"        # 自定义背景色（当cardColorMode="custom"时生效）

4. 访问小说书单

构建网站后，访问 /booklist 路径即可查看您的小说书单。

📝 配置详解

分组结构

每个分组包含以下字段：

字段	类型	必填	说明
`name`	string	✅	分组名称（如：精选、推荐、热门、新书、已读、在读、想读）
`books`	array	✅	小说列表

小说数据结构

每个小说包含以下字段：

字段	类型	必填	说明
`name`	string	✅	小说名称
`author`	string	❌	作者名称
`cover`	string	❌	封面图片 URL
`description`	string	❌	小说描述
`rating`	number	❌	评分（如 9.5、8.8）
`tags`	array	❌	标签数组（最多显示3个，如：[“玄幻”, “仙侠”]）
`url`	string	❌	外部链接 URL（点击卡片可跳转）
`readDate`	string	❌	阅读日期（仅已读小说，格式：YYYY-MM-DD）
`progress`	string	❌	阅读进度（仅在读小说，如：“50%"、“80%"）

背景色模式

支持三种背景色模式：

transparent：透明背景（默认）
random：随机彩色背景（8种渐变背景循环）
custom：自定义颜色背景（使用 cardCustomColor 配置的颜色）

随机颜色系统

标签颜色：12种渐变背景色循环（tag-color-1 到 tag-color-12）
文字颜色：12种纯色循环（text-color-1 到 text-color-12）
自动分配：根据小说索引自动分配颜色，确保每个小说都有独特的配色

💡 使用示例

示例 1：精选小说

groups:
  - name: "精选"
    books:
      - name: "斗破苍穹"
        author: "天蚕土豆"
        cover: "/img/books/doupo.webp"
        description: "经典玄幻小说，讲述了少年萧炎的成长之路..."
        rating: 9.5
        tags: ["玄幻", "仙侠", "热血"]
        url: "https://example.com/doupo"
        
      - name: "完美世界"
        author: "辰东"
        cover: "/img/books/wanmei.webp"
        description: "宏大世界观，精彩绝伦的情节..."
        rating: 9.0
        tags: ["玄幻", "仙侠", "冒险"]
        url: "https://example.com/wanmei"

示例 2：已读小说

groups:
  - name: "已读"
    books:
      - name: "全职高手"
        author: "蝴蝶蓝"
        cover: "/img/books/quanzhi.webp"
        description: "已读完的优秀作品，强烈推荐大家阅读！"
        rating: 9.8
        tags: ["游戏", "竞技", "都市"]
        url: "https://example.com/quanzhi"
        readDate: "2025-01-01"
        
      - name: "诡秘之主"
        author: "爱潜水的乌贼"
        cover: "/img/books/guimi.webp"
        description: "克苏鲁风格的奇幻小说，已三刷"
        rating: 9.9
        tags: ["奇幻", "悬疑", "西方"]
        url: "https://example.com/guimi"
        readDate: "2024-12-15"

示例 3：在读小说

groups:
  - name: "在读"
    books:
      - name: "大王饶命"
        author: "会说话的肘子"
        cover: "/img/books/dawang.webp"
        description: "正在阅读中，非常有趣的小说..."
        rating: 8.5
        tags: ["都市", "异能", "轻松"]
        url: "https://example.com/dawang"
        progress: "50%"
        
      - name: "我师兄实在太稳健了"
        author: "言归正传"
        cover: "/img/books/shixiong.webp"
        description: "轻松愉快的修仙小说，正在追更"
        rating: 8.8
        tags: ["仙侠", "轻松", "搞笑"]
        url: "https://example.com/shixiong"
        progress: "80%"

示例 4：想读小说

groups:
  - name: "想读"
    books:
      - name: "三体"
        author: "刘慈欣"
        cover: "/img/books/santi.webp"
        description: "准备阅读的科幻经典"
        tags: ["科幻", "硬科幻", "未来"]
        url: "https://example.com/santi"
        
      - name: "流浪地球"
        author: "刘慈欣"
        cover: "/img/books/liulang.webp"
        description: "期待已久的科幻作品"
        tags: ["科幻", "未来", "冒险"]
        url: "https://example.com/liulang"

示例 5：推荐小说

groups:
  - name: "推荐"
    books:
      - name: "庆余年"
        author: "猫腻"
        cover: "/img/books/qingyuannian.webp"
        description: "值得推荐的历史架空小说，情节紧凑，人物塑造深刻"
        rating: 9.2
        tags: ["历史", "架空", "权谋"]
        url: "https://example.com/qingyuannian"
        
      - name: "将夜"
        author: "猫腻"
        cover: "/img/books/jiangye.webp"
        description: "强烈推荐，世界观宏大，文笔优美"
        rating: 9.0
        tags: ["玄幻", "仙侠", "武侠"]
        url: "https://example.com/jiangye"

示例 6：热门小说

groups:
  - name: "热门"
    books:
      - name: "万族之劫"
        author: "老鹰吃小鸡"
        cover: "/img/books/wanzu.webp"
        description: "当前热门小说，更新稳定"
        rating: 8.9
        tags: ["玄幻", "热血", "升级"]
        url: "https://example.com/wanzu"
        
      - name: "全球高武"
        author: "老鹰吃小鸡"
        cover: "/img/books/quanqiu.webp"
        description: "爆款推荐，节奏紧凑"
        rating: 8.7
        tags: ["都市", "异能", "热血"]
        url: "https://example.com/quanqiu"

示例 7：新书

groups:
  - name: "新书"
    books:
      - name: "新书1"
        author: "作者G"
        cover: "/img/books/newbook1.webp"
        description: "最新上架的小说，值得关注"
        rating: 8.0
        tags: ["悬疑", "推理", "现代"]
        url: "https://example.com/newbook1"
        
      - name: "新书2"
        author: "作者H"
        cover: "/img/books/newbook2.webp"
        description: "新鲜出炉的作品"
        rating: 7.8
        tags: ["奇幻", "魔法", "冒险"]
        url: "https://example.com/newbook2"

🎨 样式特性

卡片布局

网格布局，响应式适配
较小的卡片尺寸，适合展示大量小说
支持封面图片、标题、作者、描述等信息展示

背景色模式

透明模式（transparent）：卡片使用透明背景，融入页面
随机彩色模式（random）：卡片使用8种渐变背景色循环
自定义颜色模式（custom）：卡片使用配置的自定义颜色

随机颜色系统

标签颜色：12种渐变背景色自动分配
- 渐变色彩丰富，视觉效果佳
- 每个标签自动匹配不同颜色
文字颜色：12种纯色自动分配
- 书名、作者、描述等文字使用随机颜色
- 确保文字清晰可读

评分显示

评分显示在卡片中
格式：数字（如 9.5、8.8）

阅读信息

已读小说：显示阅读日期
在读小说：显示阅读进度（如 “50%"、“80%"）

标签展示

每个小说最多显示3个标签
标签使用随机渐变背景色
标签文字使用白色，确保可读性

📱 响应式支持

小说书单页面完全支持响应式设计：

桌面端：多列网格布局（4-5列）
平板端：3列网格布局
手机端：2列网格布局，优化触摸体验

🌙 暗色模式

小说书单页面自动适配明暗主题：

亮色模式：清新的卡片样式
暗色模式：优雅的深色背景，文字颜色自动调整

🔧 自定义配置

背景色模式配置

在 hugo.toml 文件中配置：

[params.booklist]
  # 背景色模式
  cardColorMode = "transparent"       # transparent(透明) | random(随机彩色) | custom(自定义颜色)
  cardCustomColor = "#f5f5f5"        # 自定义背景色（当cardColorMode="custom"时生效）

模式说明

透明模式：cardColorMode = "transparent"
- 卡片使用透明背景
- 适合融入页面整体风格
随机彩色模式：cardColorMode = "random"
- 卡片使用8种渐变背景色循环
- 每个卡片自动分配不同的背景色
- 视觉效果更加丰富
自定义颜色模式：cardColorMode = "custom"
- 卡片使用 cardCustomColor 配置的颜色
- 所有卡片使用相同的背景色
- 适合统一的视觉风格

修改页面内容

编辑 content/booklist.md 文件，可以添加页面介绍文字：

---
title: "小说书单"
date: 2025-10-31T15:00:00+08:00
type: "booklist"
layout: "booklist"
comments: true
---

## 📚 我的书单

这里记录着我读过、在读和想读的小说，每一本都是一个小小的世界 ✨

### 阅读习惯

- 喜欢玄幻、仙侠类小说
- 偏好轻松愉快的风格
- 追求情节紧凑、人物塑造深刻的作品

可以在这里添加更多的介绍文字，支持 Markdown 格式。

💡 使用技巧

1. 分组组织

按阅读状态分类：已读、在读、想读
按推荐程度分类：精选、推荐、热门、新书
按类型分类：玄幻、仙侠、都市、科幻等
根据个人习惯灵活组织

2. 标签管理

每个小说可以添加多个标签
标签最多显示3个，建议选择最重要的标签
标签会自动分配随机颜色
使用标签可以快速分类和查找

3. 封面图片

使用合适的图片尺寸（建议 200x300 或更大）
图片格式建议使用 WebP 或 JPG
将图片保存到 static/img/books/ 目录
提供备用图片（错误时显示默认图片 /img/404.jpg）

4. 阅读管理

想读：计划要读的小说
在读：正在阅读的小说，定期更新 progress 字段
已读：已读完的小说，记录 readDate 日期

5. 评分记录

添加评分信息，方便回顾和推荐
评分格式：数字（如 9.5、8.8）
可以根据评分筛选和推荐

6. 外部链接

添加小说的在线阅读链接
添加购买链接
点击卡片可跳转到对应链接

📋 完整示例

# data/booklist.yaml

groups:
  # 精选小说分组
  - name: "精选"
    books:
      - name: "斗破苍穹"
        author: "天蚕土豆"
        cover: "/img/books/doupo.webp"
        description: "经典玄幻小说，讲述了少年萧炎的成长之路。情节紧凑，人物塑造深刻，强烈推荐！"
        rating: 9.5
        tags: ["玄幻", "仙侠", "热血"]
        url: "https://example.com/doupo"
        
      - name: "完美世界"
        author: "辰东"
        cover: "/img/books/wanmei.webp"
        description: "宏大世界观，精彩绝伦的情节，值得一读"
        rating: 9.0
        tags: ["玄幻", "仙侠", "冒险"]
        url: "https://example.com/wanmei"

  # 推荐小说分组
  - name: "推荐"
    books:
      - name: "全职高手"
        author: "蝴蝶蓝"
        cover: "/img/books/quanzhi.webp"
        description: "值得推荐的游戏竞技小说，情节精彩，人物生动"
        rating: 9.2
        tags: ["游戏", "竞技", "都市"]
        url: "https://example.com/quanzhi"

  # 热门小说分组
  - name: "热门"
    books:
      - name: "万族之劫"
        author: "老鹰吃小鸡"
        cover: "/img/books/wanzu.webp"
        description: "当前热门小说，更新稳定，节奏紧凑"
        rating: 8.9
        tags: ["玄幻", "热血", "升级"]
        url: "https://example.com/wanzu"

  # 新书分组
  - name: "新书"
    books:
      - name: "新书1"
        author: "作者G"
        cover: "/img/books/newbook1.webp"
        description: "最新上架的小说，值得关注"
        rating: 8.0
        tags: ["悬疑", "推理", "现代"]
        url: "https://example.com/newbook1"

  # 已读小说分组
  - name: "已读"
    books:
      - name: "诡秘之主"
        author: "爱潜水的乌贼"
        cover: "/img/books/guimi.webp"
        description: "已读完的优秀作品，克苏鲁风格的奇幻小说，强烈推荐！"
        rating: 9.9
        tags: ["奇幻", "悬疑", "西方"]
        url: "https://example.com/guimi"
        readDate: "2024-12-15"

  # 在读小说分组
  - name: "在读"
    books:
      - name: "大王饶命"
        author: "会说话的肘子"
        cover: "/img/books/dawang.webp"
        description: "正在阅读中，非常有趣的小说，轻松愉快"
        rating: 8.5
        tags: ["都市", "异能", "轻松"]
        url: "https://example.com/dawang"
        progress: "50%"

  # 想读小说分组
  - name: "想读"
    books:
      - name: "三体"
        author: "刘慈欣"
        cover: "/img/books/santi.webp"
        description: "准备阅读的科幻经典，期待已久"
        tags: ["科幻", "硬科幻", "未来"]
        url: "https://example.com/santi"

❓ 常见问题

Q: 如何添加新的分组？

A: 在 data/booklist.yaml 文件中的 groups 数组下添加新的分组对象。

Q: 如何添加新的小说？

A: 在对应分组的 books 数组下添加新的小说对象。

Q: 如何更新阅读进度？

A: 修改 在读 分组中对应小说的 progress 字段（如 “50%"、“80%"）。

Q: 如何记录阅读日期？

A: 在 已读 分组中对应小说添加 readDate 字段（格式：YYYY-MM-DD）。

Q: 如何移动小说到其他分组？

A: 将小说数据从一个分组的 books 数组剪切并粘贴到另一个分组的 books 数组。

Q: 标签最多显示几个？

A: 每个小说最多显示3个标签，如果标签超过3个，只显示前3个。

Q: 图片无法显示怎么办？

A: 检查图片路径是否正确，确保图片文件存在于 static/img/books/ 目录中。主题会自动处理图片加载失败的情况，显示默认图片 /img/404.jpg。

Q: 如何自定义背景色？

A: 在 hugo.toml 中设置 cardColorMode = "custom"，并配置 cardCustomColor 为您想要的颜色（如 “#f5f5f5”）。

Q: 随机颜色是如何分配的？

A: 根据小说在分组中的索引自动分配颜色。标签使用12种渐变背景色循环，文字使用12种纯色循环。

Q: 如何添加外部链接？

A: 在小说对象中添加 url 字段，设置外部链接 URL，点击卡片即可跳转。

🔗 相关文档

📚 技术说明

数据来源

小说书单功能的数据来源于手动编辑的 YAML 文件（data/booklist.yaml），支持灵活的分组和书籍管理。

颜色系统

标签颜色：12种渐变背景色（tag-color-1 到 tag-color-12）
文字颜色：12种纯色（text-color-1 到 text-color-12）
卡片背景：8种渐变背景色（color-1 到 color-8，仅在 random 模式下使用）

功能特性

✅ 分组管理：支持多个分组，灵活组织
✅ 随机颜色：标签和文字自动分配随机颜色
✅ 背景模式：三种背景色模式可选
✅ 响应式设计：完美适配各种设备
✅ 暗色模式：自动适配明暗主题
✅ PJAX 兼容：支持无刷新切换

希望这个小说书单功能能够帮助您更好地管理和展示阅读清单！📚