21 June 2026, 16:30 (CST)
2026年06月21日
功能更新:文章发布热力图 (Contribution Heatmap)
概述
新增基于全站文章数据的 GitHub 风格热力图组件,支持在文章页与归档页以不同尺寸和配色展示写作活跃度。
核心能力
双模式展示
- 文章页 (
article):右侧sticky固定,仅显示上个月 + 本月;深紫背景、淡紫渐变格点,参考 GitHub 紧凑尺寸。 - 归档页 (
archive):插入于Total: N posts与分隔线之间,展示当年完整热力图;GitHub 标准绿色配色。
- 文章页 (
交互
- 悬浮:显示当天标签数最多的文章标题(同天多篇时按
tags数量降序取首篇)。 - 点击:跳转至对应文章。
- 悬浮:显示当天标签数最多的文章标题(同天多篇时按
模块化文件
templates/partials/heatmap_component.html— 聚合各板块文章数据并渲染容器static/css/heatmap.css— 布局与双主题样式static/js/heatmap-init.js— 轻量渲染逻辑(无 Heat.js 重型 UI)
集成方式
文章页(templates/article.html):
<aside class="article-heatmap-sidebar">
{% set heatmap_mode = "article" %}
{% include "partials/heatmap_component.html" %}
</aside>归档页(templates/archive.html):
{% set heatmap_mode = "archive" %}
{% include "partials/heatmap_component.html" %}设计说明
- 放弃 Heat.js 默认「Heat.js [ Map ]」大标题 UI,改用自研紧凑渲染,更接近 GitHub Contributions 视觉。
- 移动端(≤960px)热力图自动移至正文上方,避免遮挡阅读。