前言 之前根据蜗牛哥的教程弄了一版使用Cal-heatmap库生成的热力图 博客更新热力图，不过这个方式需要加载四五个js文件还有一些css文件，比较拖慢整个网页的加载速度，所以蜗牛哥后来又出了一个CSS 和 JS 实现博客热力图 方案，不过当时我闲麻烦一直没跟着做。 不过我也一直在思考该怎么用纯CSS和JS更为简便的实现这个功能，今天灵光一闪，有了些思路，所以趁着这股热乎劲把这个功能实现了，撰文分享一下我的思路。 思路 我的思路其实很简单，因为博客上显示的热力图其实就是一个很多小方块组成的方阵，所以其实不用管什么年份、月份之类的，我们只需生成固定个数的小方块，再将匹配的数据填充进去不就好了吗？ 我的构思如下： * 生成一个 7 * 9 列的格子方阵，一共是是63个 * 每个格子要匹配往后63天中对应一天的文章 * 如果开始当天不是星期天，则需要找到这个星期的星期天作为开始时间 * 在生成格子的时候将文章数据附加进小格子内。 * 完成 实现 💡有了ChatGPT后折腾博客真的好方便呀，你只需要有一些基础编程知识和思维就能通过它构建出自己想要的代码。