之前一直想给博客添加一个 GitHub/豆瓣风格的热力图。纯靠 GitHub commit history 的话因为有工作和 side project 的 commit,以及一篇文章可能会有多个 commit 改错字,并不能很好地体现博客实际的产量。但由于对用代码画图以及 hugo 语法不熟悉以及我太懒Hugo 文档写得太烂,外加搜了几分钟没找到现成好用的插件,就一直拖延掉了。这次终于着手改出来一个跟自己想要版本很接近的东西,希望对想加类似热力图的博主有帮助。(静态博客果然会不可避免地走上装修博主的道路吗……)
I want to add a random article picker to my blog as another way to discover past posts, aside from categories and tags on the right side and making it easier on mobile.
I couldn’t find a simple enough solution that suits my needs after brief Googling. The options I found were either to randomize at build time, which means the article doesn’t change with each click or refresh, or to generate a JSON index, which I had trouble with probably because my lack of understanding of Hugo.
I thought such a simple feature should be achievable with just JS + HTML, so I decided to write my own. Performance shouldn’t be an issue for a blog with a few tens to thousands of articles. Here’s a solution I came up with for reference.
我想给自己的博客加一个随机文章入口,作为页面右边的分类和 tag 之外的另一个发掘文章入口,移动端也更容易。在网上一搜,Google 第一页没有看到太显眼的简单适合我博客的答案:要么是最简单的 build time randomize,不能每次点击/刷新都出新文章;要么要生成 json 索引,对 hugo 语言和 config 不是很熟悉的我折腾了一下没搞出来,遂放弃。
想说这么简单个功能不至于不能纯拿 JS + html 写吧,博客少则几十多则几千的随机数性能应该也不成问题,随自己折腾出来个方案供大家参考。