给博客增加一张热力图

特别鸣谢 ChatGPT 3.5

前一篇博客提到了想为博客增加一张类似 GitHub，也在评论区提出了解决方案。主要受Conge 的博客和他 Github 仓库启发。

我的方案

鉴于个人目前的水平，我选择的方案是绘制出一张热图再将它嵌在主页导航栏之间，而非选择直接修改模板去实现。我相当讨厌 Matplotlib 这个绘图库，所以我还是让 ChatGPT 帮忙。具体步骤大是

读取所有博客的日期，并累加统计。对于 hexo 来说，可以选择读取 source 文件下所有 .md 文件，或者去 public\archives 文件下直接搜寻日期。尽管 ChatGPT 写这样一段程序不是问题，我还是不想每次都遍历文件。我的归档页面渲染出来的结果就是按日期顺序排列的文章，我最后选择手动复制这个页面的信息，让 ChatGPT 写了一段程序读取里面的日期。
日期的转换和统计。把日期转换为与当年 1 月 1 日的距离，并且生成一个 365* 1 的数组统计，这一部分 ChatGPT 完成得非常好。接来下是要将这个向量补零， reshape 成 7* 52 的矩阵，恰好今年第一天是星期日，数据的头部不需要补零。GPT 在一个过程中总是打乱数据的顺序，花了一些时间解释。
绘图。基本上我提的需求 GPT 都能完成。包括：
- 调整 x, y 轴的方向。一开始 GPT 画错了
- 调整图片的比例，调整colorbar的大小，并将每一个格子都变成正方形
- 加 x 和 y 轴的坐标，这一步也完全没有阻碍
- 调整 colormap。我希望分 4 个颜色梯度由浅到深绘制。但是给的结果是由深到浅，甚至变成了红色。GPT 对 RGB 颜色的深和浅的理解似乎有一些奇怪。
- 给图片加上网格，GPT 再次将网格绘制成了 52* 7 的结果，下图显示的就是给出的结果，看到结果后我马上意识到错误在哪里。

Alt text
整个过程花费的时间确实不算少，我自己写大概也要花费相同的时间，并且要花更多的时间去查看绘图的文档调整效果（实在是记不住 API）。

最后在主题文件合适的里面插入图片就大功告成。

结果

我 vs Github 和 LeetCode

外观上和 Github 的图是非常接近的（因为本来就是按照它抄的，以及忽略我非常少的Contributtion，之所以把主题设置为 Light 是因为黑暗模式下对透明背景的图片不友好），Leecode 是跟随浏览器黑暗模式，并且是动态的，显示过去一年的所有信息，每一个月都有分隔，两者的鼠标悬停都可以显示当天相关的一些信息，而我只是一张图片.png

Alt text

有待完善但短时间不会折腾

只是一张图片，并不是由 hmtl/css 渲染生成的，不能实现我的预期
不支持黑暗模式，移动端不友好（整个博客本身就有这个问题）
更新博客多了一个流程，需要手动跑 python 脚本更新图片

1
2
3

hexo g
python heatmap2023.py
hexo d

只记录发布博客的数量，对于博客修改不会显示（如果改成读 git commit 的时间，似乎能更加完善，但细微的修改也会被记录下来）
对于新的一年的数据的支持还不完善，改成 2024 年还需要稍加修改才能够使用

除此之外，在PC端显示的，效果我非常满意。也不太打算折腾和改进。尽管 ChatGPT 帮忙，完成满足我需求的程序应该不是难事。

目前计划新的一年并不删去前一年的热力图，而是在首页展示整个博客的历史。

最后再次感谢 ChatGPT 的贡献。