11 August 2026, 14:00 (CST)
11 August 2026, 12:00 (CST)
2026年08月11日 12:00（东八区 / 北京时间）
文章页热力图：今日标记 · 35 天窗口 · 同日多文章弹层
概述
临近 月中， 集中将 最近一个月的 更新内容 进行 推送
本轮针对文章页（templates/article.html 右上角固定挂件）热力图做三项调整：
- 今日单元格醒目标记（GitHub 贡献图主流的蓝色描边环）；
- 时间窗口由默认 2 个月改为最后一个格子 = 今日、向前 35 天；
- 同日多篇文章交互：点击格子一次性展示当天全部文章，可手动选择任意一篇跳转。
构建流程（zola build / zola serve / ./dev.sh / ./build-site.sh）与 CI 均未改动。
1. 今日单元格醒目标记
采用 GitHub 贡献图的主流标记方式：今日格子外圈加 2px 实色描边环 + 半透明外晕，浅色模式 #0969da、深色模式 #4493f8；同时补充 aria-current="date" 与「今日」前缀的读屏标签。
| 项 | 值 |
|---|---|
| 类名 | .heatmap-day.is-today |
| 样式文件 | static/css/heatmap.css |
| 逻辑 | static/js/heatmap-init.js renderHeatmap() |
| 无障碍 | aria-current="date" + 今日 yyyy-mm-dd：… |
该标记对归档页/看板页同样生效（今日格子在当年视图中也会显示描边环）。
2. 时间窗口：最后格子 = 今日，向前 35 天
原实现（文章模式）取「上个月 1 日 → 下个月末日」共 2 个自然月。现改为：
start = 今日 - 34 天
end = 今日
共 35 个格子，最后一个格子始终是今日实现要点：
| 点 | 说明 |
|---|---|
| 常量 | ARTICLE_DAYS = 35，改数值即可调整跨度 |
| 范围 | getRange("article") 返回 [今日-34, 今日] |
| 未来格子 | 今日所在周内、今日之后的格子不再渲染（最后一个单元格 = 今日） |
| 周对齐 | 仍按 GitHub 式“列=周“布局，首列可含窗口前空档，末列仅到今天 |
| 月份标签 | 以实际渲染的周列数重算 --heatmap-weeks，标签不错位 |
3. 同日多篇文章的交互
3.1 交互设计
| 状态 | 行为 |
|---|---|
| 单篇文章的日期 | 悬停显示标题 tooltip；点击直接跳转（原行为不变） |
| 多篇文章的日期 | 悬停 tooltip 汇总「N 篇：标题1、标题2…」；点击弹出当天全部文章列表 |
| 弹层内 | 每篇一行（序号 + 标题），点击任意一行跳转对应文章 |
| 关闭方式 | Esc、点击弹层外部、页面滚动、窗口缩放 |
| 无障碍 | 格子带 aria-haspopup="dialog" / aria-expanded；弹层带 role="dialog" 与日期+篇数标签 |
弹层默认显示在格子正上方，空间不足时自动翻转到下方（带箭头指示），水平方向自动防溢出。
3.2 实现
| 文件 | 改动 |
|---|---|
static/js/heatmap-init.js | bindDayCell() 分支处理；新增 openDayPopover() / positionPopover() / closePopover() |
static/css/heatmap.css | 新增 .heatmap-popover 系列样式与 .heatmap-day.is-today 标记 |
templates/partials/heatmap_component.html | 无改动（数据本就包含当天全部文章） |
4. 验证与部署
# 本地验证（改动 static/ 下的 JS/CSS 后 zola serve 会自动生效）
./dev.sh # 或 zola serve
# 打开任意文章页（如 /01Write_blog_CMake/cmake-project-fix/）检查点：
- 今日格子有蓝色描边环，深色/浅色主题各正确；
- 热力图最右侧一列 = 本周，本周内今日之后无格子；
- 找一个同日多篇文章的日期（如 2026-06-24），点击弹出列表并可跳转。
构建与部署流程不变：./build-site.sh 会把 static/ 原样拷贝进 public/。