Skip to Main Content
404Back to Top

21 June 2026, 16:30 (CST)

2026年06月21日

功能更新:文章发布热力图 (Contribution Heatmap)

概述

新增基于全站文章数据的 GitHub 风格热力图组件,支持在文章页与归档页以不同尺寸和配色展示写作活跃度。

核心能力

  1. 双模式展示

    • 文章页 (article):右侧 sticky 固定,仅显示上个月 + 本月;深紫背景、淡紫渐变格点,参考 GitHub 紧凑尺寸。
    • 归档页 (archive):插入于 Total: N posts 与分隔线之间,展示当年完整热力图;GitHub 标准绿色配色。
  2. 交互

    • 悬浮:显示当天标签数最多的文章标题(同天多篇时按 tags 数量降序取首篇)。
    • 点击:跳转至对应文章。
  3. 模块化文件

    • 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" %}

设计说明

21 June 2026, 15:49 (CST)