分类卡片配置说明

最后更新于:

📂 分类卡片概述

分类卡片展示站点的文章分类统计信息,以列表形式显示各个分类及其文章数量,帮助访客快速了解站点内容结构。

✨ 卡片特性

🎨 设计特性

  • 分类列表:显示所有文章分类
  • 数量统计:显示每个分类的文章数
  • 快速跳转:点击分类进入分类页面
  • 图标装饰:每个分类可配置图标

⚙️ 功能特性

  • 自动统计:自动统计各分类文章数量
  • 数量排序:可按文章数排序
  • 独立开关:可随时启用/禁用
  • 响应式布局:自适应显示

📁 配置文件路径

分类卡片配置涉及两个文件:

1# hugo-teek-site/config/themes/hugo-teek/homepage.toml
2# 控制分类卡片的显示/隐藏
1# hugo-teek-site/config/themes/hugo-teek/params.toml
2# 分类显示参数配置

📝 开关配置

启用/禁用分类卡片

1    enabled = true   # ◀️ 显示分类卡片
1    enabled = false  # ◀️ 隐藏分类卡片

⚙️ 分类参数配置

分类显示参数

params.toml 中配置分类的显示参数:

1    autoPage = false      # ◀️ 是否自动分页
2    enabled = true        # ◀️ 是否启用分类功能
3    limit = 8.0           # ◀️ 显示分类数量限制
4    pageSpeed = 4000.0    # ◀️ 自动翻页速度(毫秒)
1    autoPage = false      # ◀️ 自动分页开关,true 时自动轮播
2    enabled = true        # ◀️ 分类功能总开关
3    limit = 8.0           # ◀️ 最多显示多少个分类
4    pageSpeed = 4000.0    # ◀️ 自动翻页间隔,4000ms = 4秒

参数配置建议

1    autoPage = false      # ◀️ 分类少,不需要自动分页
2    enabled = true
3    limit = 10.0          # ◀️ 显示全部分类
4    pageSpeed = 4000.0
1    autoPage = true       # ◀️ 分类多,启用自动轮播
2    enabled = true
3    limit = 8.0           # ◀️ 每页显示8个
4    pageSpeed = 4000.0    # ◀️ 4秒切换一次

📝 文章分类设置

在文章中设置分类

在文章 Front Matter 中使用 categories 字段:

1---
2title: "文章标题"
3categories:
4    - 技术
5---
1---
2title: "文章标题"
3categories:
4    - 技术
5    - 前端
6    - 教程
7---

分类层级

Hugo 支持分类层级结构:

 1---
 2title: "文章标题"
 3categories:
 4    - 技术/前端/React
 5---
 6
 7# 或
 8---
 9title: "文章标题"
10categories:
11    - 技术
12    - 技术/前端
13    - 技术/前端/React
14---

📋 完整配置示例

基础配置

1# homepage.toml
2[params.homeSidebar.categories]
3    enabled = true
1# params.toml
2[category]
3    autoPage = false
4    enabled = true
5    limit = 8.0
6    pageSpeed = 4000.0

配置位置示例

 1# ========================================
 2# 首页配置 (Homepage Configuration)
 3# ========================================
 4[params.homeSidebar]
 5
 6  # ========================================
 7  # 分类卡片 (Categories Card)
 8  # ========================================
 9  # 显示文章分类统计
10  [params.homeSidebar.categories]
11    enabled = true  # ◀️ 开关:启用/禁用分类卡片
1# ========================================
2# 分类配置 (Category)
3# ========================================
4[category]
5    autoPage = false      # ◀️ 自动分页
6    enabled = true        # ◀️ 启用分类
7    limit = 8.0           # ◀️ 显示数量限制
8    pageSpeed = 4000.0    # ◀️ 翻页速度

🔧 常见问题

分类不显示

 1原因1:开关未启用
 2解决:
 31️⃣ 检查 homepage.toml 中 enabled = true
 42️⃣ 检查 params.toml 中 category.enabled = true
 5
 6原因2:无分类数据
 7解决:
 81️⃣ 检查文章是否设置了 categories
 92️⃣ 确保文章已发布(draft: false)
103️⃣ 执行 make dev 重新构建
11
12原因3:limit 设置为 0
13解决:检查 params.toml 中 category.limit 是否大于 0

分类数量不准确

1原因:构建缓存问题
2解决:
31️⃣ 执行 make clean 清理缓存
42️⃣ 重新执行 make dev
53️⃣ 检查文章分类设置是否正确

📝 配置模板速查

最小化配置

1# homepage.toml
2[params.homeSidebar.categories]
3    enabled = true
4
5# params.toml
6[category]
7    enabled = true
8    limit = 8.0
 1# ========================================
 2# 分类卡片配置
 3# ========================================
 4
 5# homepage.toml
 6[params.homeSidebar.categories]
 7    enabled = true  # ◀️ 开关:启用/禁用分类卡片
 8
 9# params.toml
10[category]
11    autoPage = false      # ◀️ 自动分页
12    enabled = true        # ◀️ 启用分类
13    limit = 8.0           # ◀️ 显示数量限制
14    pageSpeed = 4000.0    # ◀️ 翻页速度

🎉 分类卡片配置完成!

推荐使用微信支付
微信支付二维码
推荐使用支付宝
支付宝二维码
最新文章