时间进度卡片配置说明

最后更新于:

⏱️ 时间进度卡片概述

时间进度卡片以进度条形式展示年、月、周、日的时间流逝进度,提醒访客珍惜时间,也为站点增添动态元素。

✨ 卡片特性

🎨 设计特性

  • 四级进度:年、月、周、日进度一目了然
  • 动态更新:实时计算当前进度百分比
  • 进度条动画:平滑的进度条填充效果
  • 时间显示:显示剩余时间和已用时间

⚙️ 功能特性

  • 自动计算:基于系统时间自动计算
  • 无需维护:数据实时更新,无需配置
  • 独立开关:可随时启用/禁用
  • 农历支持:可选显示农历日期

📁 配置文件路径

时间进度卡片配置位于首页配置文件中:

1# hugo-teek-site/config/themes/hugo-teek/homepage.toml
2# 控制时间进度卡片的显示/隐藏

📝 开关配置

启用/禁用时间进度卡片

1    enabled = true   # ◀️ 显示时间进度卡片
1    enabled = false  # ◀️ 隐藏时间进度卡片

🎨 进度条说明

四级进度展示

时间进度卡片展示四个时间维度的进度:

1📅 年进度:显示当前年份已过去的时间百分比
2📆 月进度:显示当前月份已过去的时间百分比
3📋 周进度:显示当前周已过去的时间百分比
4⏰ 日进度:显示今天已过去的时间百分比
 1━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 2📅 2026年已过去 16%  ⏳ 剩余 304 天
 3━━━━━━━━━━░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 4
 5📆 3月已过去 6%  ⏳ 剩余 28 天
 6━━━━━━━━░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 7
 8📋 本周已过去 28%  ⏳ 剩余 5 天
 9━━━━━━░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
10
11⏰ 今日已过去 42%  ⏳ 剩余 14 小时
12████████████░░░░░░░░░░░░░░░░░░░░░░░░░░

进度计算规则

🧮 计算规则

  • 年进度:已过天数 / 当年总天数(考虑闰年)
  • 月进度:已过天数 / 当月总天数
  • 周进度:已过天数 / 7 天(周一开始计算)
  • 日进度:已过小时数 / 24 小时

📋 完整配置示例

基础配置

1# homepage.toml
2[params.homeSidebar.timeProgress]
3    enabled = true

配置位置示例

 1# ========================================
 2# 首页配置 (Homepage Configuration)
 3# ========================================
 4[params.homeSidebar]
 5
 6  # ========================================
 7  # 时间进度卡片 (Time Progress Card)
 8  # ========================================
 9  # 显示年/月/周/日进度条
10  [params.homeSidebar.timeProgress]
11    enabled = true  # ◀️ 开关:启用/禁用时间进度卡片

🔧 常见问题

时间进度不显示

1原因1:开关未启用
2解决:检查 homepage.toml 中 enabled = true
3
4原因2:JavaScript 被禁用
5解决:时间进度需要浏览器启用 JavaScript
6
7原因3:时区问题
8解决:检查系统时区设置是否正确

进度计算不准确

 1原因:浏览器缓存或时区差异
 2解决:
 31️⃣ 清除浏览器缓存
 42️⃣ 检查系统时区设置
 53️⃣ 刷新页面重新计算
 6
 7注意:
 8- 周进度从周一开始计算
 9- 年进度考虑闰年(366天)
10- 进度计算基于访客本地时间

📝 配置模板速查

最小化配置

1    enabled = true
1# ========================================
2# 时间进度卡片 (Time Progress Card)
3# ========================================
4# 显示年/月/周/日进度条
5[params.homeSidebar.timeProgress]
6    enabled = true  # ◀️ 开关:启用/禁用时间进度卡片

🎉 时间进度卡片配置完成!

时间进度卡片无需额外配置内容,启用后即可自动显示时间进度。

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