--
:
--
:
--
日历卡片配置说明
最后更新于:
📅 日历卡片概述
日历卡片以热力图形式展示文章发布记录,直观显示博主的更新频率和活跃程度。类似 GitHub Contributions 图表,颜色深浅代表当天发布文章的数量。
✨ 卡片特性
🎨 设计特性
- 热力图展示:颜色深浅表示发布数量
- 年度概览:显示最近一年的发布记录
- 悬停提示:鼠标悬停显示具体日期和数量
- 暗色适配:自动适配暗色/亮色主题
⚙️ 功能特性
- 自动统计:自动从文章数据生成
- 无需维护:数据自动更新,无需手动配置
- 独立开关:可随时启用/禁用
- 性能优化:数据缓存,快速渲染
📁 配置文件路径
日历卡片配置位于首页配置文件中:
1# hugo-teek-site/config/themes/hugo-teek/homepage.toml
2# 控制日历卡片的显示/隐藏📝 开关配置
启用/禁用日历卡片
1 enabled = true # ◀️ 显示日历卡片1 enabled = false # ◀️ 隐藏日历卡片🎨 热力图说明
颜色规则
日历热力图使用颜色深浅表示文章发布数量:
1🟩 深绿色:发布 4+ 篇文章
2🟨 中绿色:发布 3 篇文章
3🟧 浅绿色:发布 2 篇文章
4🟦 淡绿色:发布 1 篇文章
5⬜ 灰色:无发布记录1- 显示最近 365 天的发布记录
2- 按周排列,每周一列
3- 月份标签在顶部显示
4- 悬停显示具体日期和文章数数据自动统计
🤖 自动统计机制
日历卡片数据完全自动统计,无需手动配置:
1️⃣ 数据来源:自动读取所有文章的 date 字段
2️⃣ 统计范围:最近 365 天的发布记录
3️⃣ 更新时机:每次构建时重新统计
4️⃣ 缓存机制:构建时生成缓存,提升访问速度
📋 完整配置示例
基础配置
1# homepage.toml
2[params.homeSidebar.calendar]
3 enabled = true配置位置示例
1# ========================================
2# 首页配置 (Homepage Configuration)
3# ========================================
4[params.homeSidebar]
5
6 # ========================================
7 # 日历卡片 (Calendar Card)
8 # ========================================
9 # 显示文章发布日历热力图
10 [params.homeSidebar.calendar]
11 enabled = true # ◀️ 开关:启用/禁用日历卡片🔧 常见问题
日历不显示或数据异常
1原因1:开关未启用
2解决:检查 homepage.toml 中 enabled = true
3
4原因2:无文章数据
5解决:
61️⃣ 确保站点有已发布的文章
72️⃣ 检查文章 Front Matter 中 date 字段是否正确
83️⃣ 文章 date 格式应为:"2026-03-02T10:00:00+08:00"
9
10原因3:构建缓存问题
11解决:执行 make clean 后重新构建1原因:文章日期格式错误或时区问题
2解决:
31️⃣ 统一使用 ISO 8601 格式:YYYY-MM-DDTHH:MM:SS+08:00
42️⃣ 检查时区设置是否正确
53️⃣ 确保文章已发布(draft: false)文章日期格式示例
1date: "2026-03-02T10:30:00+08:00"
2date: "2026-03-02T10:30:00Z"
3date: "2026-03-02"1date: "2026/03/02" # ◀️ 使用了斜杠
2date: "03-02-2026" # ◀️ 格式顺序错误
3date: 2026-03-02 # ◀️ 缺少引号📝 配置模板速查
最小化配置
1 enabled = true1# ========================================
2# 日历卡片 (Calendar Card)
3# ========================================
4# 显示文章发布日历热力图
5[params.homeSidebar.calendar]
6 enabled = true # ◀️ 开关:启用/禁用日历卡片🎉 日历卡片配置完成!
日历卡片无需额外配置内容,启用后即可自动显示文章发布热力图。
📡
👤
作者:
余温Gueen
🌐
版权:
本站文章除特别声明外,均采用
CC BY-NC-SA 4.0
协议,转载请注明来自
余温Gueen Blog!
推荐使用微信支付

推荐使用支付宝

- 01修改目录样式 2026-03-02
- 02站点监控页面配置说明 2026-03-02
- 03网站统计页面配置说明 2026-03-02