日历卡片配置说明

最后更新于:

📅 日历卡片概述

日历卡片以热力图形式展示文章发布记录,直观显示博主的更新频率和活跃程度。类似 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 = true
1# ========================================
2# 日历卡片 (Calendar Card)
3# ========================================
4# 显示文章发布日历热力图
5[params.homeSidebar.calendar]
6    enabled = true  # ◀️ 开关:启用/禁用日历卡片

🎉 日历卡片配置完成!

日历卡片无需额外配置内容,启用后即可自动显示文章发布热力图。

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