椒盐豆豉

如何给 Hugo 博客添加热力图

January 4, 2024
重启电脑
code | hugo | blog | project | tutorial

之前一直想给博客添加一个 GitHub/豆瓣风格的热力图。纯靠 GitHub commit history 的话因为有工作和 side project 的 commit,以及一篇文章可能会有多个 commit 改错字,并不能很好地体现博客实际的产量。但由于对用代码画图以及 hugo 语法不熟悉以及我太懒Hugo 文档写得太烂,外加搜了几分钟没找到现成好用的插件,就一直拖延掉了。这次终于着手改出来一个跟自己想要版本很接近的东西,希望对想加类似热力图的博主有帮助。(静态博客果然会不可避免地走上装修博主的道路吗……)

...


Add random post picker to Hugo without json index

September 20, 2023
重启电脑 | English
code | project | tutorial | hugo | blog

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.

...


给 Hugo 博客添加随机文章入口

September 20, 2023
重启电脑
code | project | tutorial | hugo | blog

我想给自己的博客加一个随机文章入口,作为页面右边的分类和 tag 之外的另一个发掘文章入口,移动端也更容易。在网上一搜,Google 第一页没有看到太显眼的简单适合我博客的答案:要么是最简单的 build time randomize,不能每次点击/刷新都出新文章;要么要生成 json 索引,对 hugo 语言和 config 不是很熟悉的我折腾了一下没搞出来,遂放弃。

想说这么简单个功能不至于不能纯拿 JS + html 写吧,博客少则几十多则几千的随机数性能应该也不成问题,随自己折腾出来个方案供大家参考。

...


什么是链接追踪,如何简单规避 UTM

September 17, 2023
重启电脑
code | project | tutorial

在大众对上网隐私问题逐渐关注和各种公司变本加厉收集用户隐私、隐私泄露事件层出不穷的今天,互联网甚至传统行业(如汽车)的隐私收集无处不在,普通用户很难躲避厂商花招频出的追踪手法。不过,作为最常用一种追踪方法,UTM(Urchin Tracking Module)链接追踪的规避还是相对容易的。本文就来介绍一下什么是 UTM、如何规避这种链接追踪,以及提供一款逻辑简单的 Chrome 小插件来方便地在网页端去除链接中的追踪参数。

写这篇文章的起因是,昨天和女朋友一起在手机上看 B 站视频,期间想到个段子,我想让女朋友发视频链接给我好做 reference,女朋友犹豫了一下说 app 分享会有追踪隐私问题不大想用。B 站账号几百年前注册的中国手机早已停用所以大概连月活都算不上的我突然来了兴趣想看看墙内 app 的追踪有多凶,就让她把链接发来然后从头到尾解释了一遍如何去掉里面的追踪参数。今早起来遂产生了这么简单的逻辑顺手写个插件吧的想法。那插件写都写了,只能在桌面端用够不到追踪更严重的手机端,干脆顺便写个全套科普好了。

...


如何制作一款简单的 chrome 插件

July 19, 2022
重启电脑
code | tutorial | patreon

短短几年时间,Chrome 作为一款在主流桌面操作系统(Windows,Mac)不内置的第三方浏览器,短短几年时间击败了所有竞争对手,以压倒性优势 67% 的市场份额稳居桌面端浏览器头把交椅。虽然近年来对其隐私方面顾虑层出不穷,一些 power user 也会试图寻找替代品(Brave,Duckduckgo 之类),但对于绝大多数网民来说还是浏览器的默认选择。

在前端技术越来强大的今天,普通 desktop 用户很多客户端操作都能被网页版替代。拥有庞大的潜在客户群,javascript 上手难度低,浏览器作为运行环境无需担心与系统交互与测试,有 chrome store 管理分发,安装过程也比客户端简单很多,chrome extension(插件)就成了一个对开发者和使用者都轻量、便捷的实用平台。

与此同时,chrome 插件的使用门槛也比让看到代码就头大的用户自己安装油猴 script 低很多,就像跟人安利 app 直接甩 play store 链接肯定比让人下载 apk 容易一样。还有同步的便利(我收到过好几次“为什么不写成油猴 script”的评论……代码就开源在那里,不想走 chrome store 且会用 script 的自然可以去用 script 嘛,反之 store 用户又不能从油猴 script 里轻易变出一个能同步的插件)。

这是拖后了半个月的作业六月 patreon 博客票选胜出的命题(说实话我完全没想到会有这么多人想看开发相关,论我的读者到底有多少码农)。欢迎金主们去七月的投票选出接下来的命题:

  • 我的信息摄取探索 2.0
  • 老年码农合理摸鱼经验总结
  • 非程序员掌握了也很有用的小 hack
  • 美国码农前半段职业发展道路(career ladder)

其实我不知道为什么大家会选这个主题,因为 Chrome 官方的 Developer Guide 写的还蛮清楚的,也给了现成的例子可以抄。不过既然金主们投了,我就来试图给平时不那么经常写程序,但是对自己开发插件有点兴趣的朋友们 TLDR 一下,用我写过的一个简单插件做为例子手把手走一遍开发简单 chrome 插件的过程。

...