阅读视图

发现新文章,点击刷新页面。

Hera 主题修改

用上大发的 hera 主题并搞定三件套后,一直就断断续续的折腾着。主要还是太忙了,下班后要么就是被小娃娃给限制了自由,要么就是刷小视频,要么就是看小说,都没时间折腾。

目前对 hera 主题主要做了下面的修改:

  1. 修复了评论提交后不保存 comment_author_url 的 bug。
  2. 修改 post_id 为自定义的 url,然后给三件套添加了获取前 12 条评论的功能,见 友链 页面的“最新评论”。
  3. 添加文章热力图,见 时光 页面。
  4. 把原来的友链朋友圈加回来了,见 友链 页面的“博友动态”。
  5. 添加了个简易的,通过 json 搜索的功能,好像还不大好用。
  6. 相对时间分钟显示为秒的 bug,好奇葩的就是 i18n "timeFormat.minutes" 多个 S 不起作用。
  7. 其他一些样式上的小修改。

本来还想着给三件套添加评论邮件通知功能,貌似有相关的 SMTP 的 js 模块,import 后加上对应的邮件服务就能实现了,类似 twikoo 那样。奈何 deepseek 总是“服务器繁忙,请稍后再试”,也就没继续了。

另外就是木木的那个 memos 还没加到主题里面来,要折腾还是有东西可折腾的。

好了,消灭 2 月 0 post。

大发 Hugo 主题 3 件套

从 Wordpress 换 Hugo 后用上了大发的 Hera 主题,这段时间一直在折腾他的三件套:使用 Cloudflare Worker 实现 Hugo 静态博客的浏览数、点赞、评论。

因为回家基本被 5 个月的娃绑定,再加上对 Cloudflare 的 Worker 完全不懂,虽然大发的 README 每个字都认得,但就是看不懂,所以效率非常低,一直没啥进展。

期间也请教过大发本人,只是专业人士和门外汉之间的鸿沟巨大,一直存在“他觉得很简单理所应当没什么可说的事情,而我完全不知道怎么开始”的情况。

大发还亲自操刀,看了我的 Github 代码以及 Cloudflare 设置,最后通过手动添加数据库表,更新了主题最新版本和评论有关的 JavaScript 文件才搞定。

没错,其实前期我自己瞎折腾基本蒙对,但不知道是不是因为 Cloudflare 令牌权限不对,Github action 自动部署时无法自动建立数据表,所以一次次的重复。

下面是我折腾大发三件套的步骤,完全门外汉语言表述,全部线上直接搞定,不需要本地:

  1. 登录自己的 Github,打开大发的 hugo-cf-worker 仓库,点击右上角的 Use this template,创建自己的仓库 hugo-cf-worker
  2. 登录自己的 Cloudflare,左侧 存储和数据库 分别点击 KVD1 SQL 数据库R2 对象存储 创建对应的项目。
  3. 打开第一步创建的仓库,修改 wrangler.toml.github/workflows/deploy.yml 文件,将第二步创建的项目 nameID 替换到文件对应位置。wrangler.toml 第一行的 name 既是自动部署成功后 cloudflare worker 的名称,可以自行修改。
  4. 在 Cloudflare 建立有 Worker 和 D1 数据库编辑权限的令牌 CLOUDFLARE_API_TOKEN.
  5. Github 仓库 Settings -> Secrets and variables -> Actions 新建 New repository secret,将上一步的 将 CLOUDFLARE_API_TOKEN 和令牌添加进去。
  6. Github 自动部署成功后,登录 Cloudflare Compute (Workers) 就能看到自动建立的 Worker 了,打开 Worker 在设置里绑定自己的域名。
  7. 修改 Hugo 配置文件 hugo.toml 将上一步的自定义域名复制到 actionDomain

如果使用大发的主题,这个时候就已经设置完成了。如果没有其他意外,大概率和我一样,不能使用,原因就是没有自动建立数据库表,需要手动建立。

打开 Cloudflare 存储和数据库 自己建立的数据库,然后根据大发 hugo-cf-worker 的配置文件 schema.sql,手动建立 articlescomments 两个表,并添加对应格式的字段,这样三件套就能正常使用了。

另外,默认的评论头像是 gravatar.com 的,大部分地方访问不了,可以通过替换 Github 仓库的 src/utils/index.ts 文件内的 gravatar.com 为其他头像 CDN,比如 cn.cravatar.com

目前还不知道这个评论会不会有过滤和邮件通知,有待测试。

Go Hugo

2024 年年底,正忙的时候,因为博客一篇 2012 年转载文章的网友评论,被叫去谈话。当时想着没啥意思,主要是太影响正常生活工作了,遂决定关闭博客。

后来发现,虽然瞎折腾了这么多年没啥成果,但似乎已经形成了一种习惯了,没了博客感觉少了点什么。于是决定把原来经常无法访问的 lms.im 用起来,像五木老师一样,用 Hugo 在 Cloudflare 上搭个博客。

以前用 Wordpress 时,也有折腾过 Hugo,想着就用前面折腾的那个模板吧,折腾了一阵子,发现大发发了个新的 Hugo 模板,遂决定用的他这个改改。

可能是年纪大了,学习能力跟不上,或者本来就学习能力差。折腾 Hugo 模板时,什么 section、type、layout 搞得我挺迷糊的。而且 Hugo 模板和博客内容有较强的绑定关系,模板与模板作者内容文件夹习惯有较强的相关性,折腾别人模板其实挺麻烦的。

在五木和大发的帮忙下,修修改改终于是可以用了。就是大发一直叫喊的 Hugo 三件套没搞明白怎么弄,他说的 三件套应该是“浏览量、评论、点赞”吧,没修改相关代码好像浏览量、点赞可用,评论不行,能有空了再请教大发后折腾吧。

后续再陆续将原来 Wordpress 博客内容一点点迁移过来吧,虽然有插件可用,但还是想有空慢慢手动转过来。

本来想着为了保持 url 一致,给 Hugo 文章设置了 .html 后缀的地址,但 Cloudflare 神奇的会自动过滤后缀,虽然链接显示有后缀,但打开后就被吃掉了。本地测试都没这问题,似乎 Cloudflare 把这种后缀的网址归类 ugryUrl,需要部署 Hugo 时怎么设置才行,搞不定就先这样吧。

那个折腾了半个的 Hugo 主题算是折腾完了

一个月前,折腾起了 Hugo 主题(太久没用主题功能,插入文章短代码都忘记了)。

因为当时刚好看到木木老师在“哔哔广场”发了一条内容为 『有研究表明,人在消极情绪状态下,做精细的且需要耐心的工作会更好。所以,我们在大学生身上常见到的一种表现是:人一失恋,就容易过英语六级。』 的哔哔,于是在发博客的时候给自己的折腾找了个失恋的理由,没想到大家注意力都转到了“失恋”上去,没人关心那折腾了一半的 Hugo 主题。

后来有一搭没一搭的陆续码着玩,上周末算是折腾完了吧。只是纯粹自娱自乐,没觉得有啥用就丢那里了。今天想着好久没更新博客,就找这么个理由唠一篇吧。

给这个暂时取名为 Quan 的仿微信朋友圈主题弄了个演示站: quan.lms.im

抓图就不抓了,直接 iframe 引用,有兴趣的可以自己点过去看看,为了保持人设,演示站主题还是失恋,手机访问效果更好。

在此要感谢一下各位热心的网友博友和各路神仙,以下排名分先后:vscode, cloudflare, github, 通义灵码, cursor, Anubis, fatesinger(大发), 林木木, koobai, CodeGeeX。哦,对了,还有那个让我失恋的女友(无中生友)。

演示站用 Github 来托管数据 Cloudflare 来建站,虽然有两个赛博菩萨的帮助,Hugo 用起来还是有许多不方便。想要发布内容就很麻烦,用 git push 又没法只对 content 内容单独 push,其他方法我也不懂,网上看说有人用 Obsidian + 插件 可以管理和发布内容,我是没搞清楚具体怎么操作。

另外就是评论了,如果要搞成朋友圈那样的评论模式,得有可以支持高灵活自定义的第三方评论,twikoo 感觉是不行了,不知道大发介绍的那个依托于 cloudflare 行不行,看着要什么回调地址什么的好复杂,就没去研究了。目前演示站的评论就是空壳,因为不能用导致我连评论表情那块都随便将就在那里。

没得评论当然点赞也没有了。

话说,想起老张那个被评论为“没有文学功底却总爱写东西”的事情,虽然我这博客没啥人看,但不免也有些压力,各位博友多包涵,多担当。

折腾了半个 Hugo 主题

最近失恋刚好有空,所以想找个东西折腾,于是就搞起了 Hugo 的主题,花了两天时间,参考了一些主题语法,顺便也请教木木老师,最终弄了个下面的半个“朋友圈”主题。

hugo-quan
hugo-quan

手机滚动截屏的,比较长,我把后面的给隐藏了,点击可以看大图,不过好像也没啥好看,图片压缩的太利害了。

整体是照着微信朋友圈作的,目前其实就一个首页的样子,分了几个功能:

  1. 正常文字发布,两三小段还可以,长篇大幅的不好看。
  2. 区分图片数量分别为1、2、3及以上的显示,超过 3 其实就是 9 宫格了。
  3. 搞了个外链的样式,可以自定义外链Logo,也只能自定义,没有 api 获取 favcion 或者缩略图的。
  4. 使用木木老师的 bilibili 短代码功能,直接插入 B 站的视频。
  5. 可以使用短代码插入外链的视频或者音频,html5 播放器播放的,支持自定义封面。
  6. 使用木木老师推荐的 Aplayer + Meting 实现短代码插入网易云,好像其他的也可以,不过没试过。
  7. 虚假的位置显示,需要手动填写,不是自动生成。
  8. 黑白模式,这个没啥好说的。

因为基本不了解 go 语言,模板里面 html 和 go 语言混合着看起来其实挺吃力的。再加上 Hugo 主题不像 Wordpress 那样可以无视 Wordpress 本身折腾主题,Hugo 主题需要配合 Hugo 设置、内容预设、主题关联 3 个方面才能真正搞定,所以挺麻烦的。

做完了首页,突然就感觉进入贤者模式,好像没啥意思,尤其一些功能我实现不了,好像就作了个空壳。

  1. 右下角预设的两个点点,是点赞和评论,Hugo 是静态博客,不知道怎么实现点赞,Hugo 也没有评论,得第三方评论,这个自定义就比较差,估计搞不了想要的结果,刚好 docker 现在又被强,也懒得去部署评论测试了。
  2. 上面说的位置的信息,纯手工输入,原汁原味,自欺欺人。
  3. 用 Hugo 发布内容,搞个图片也不方便,木木同学说有插件,无形当中又要多个东西折腾,而且意味着得花钱钱找地方另外存储图片。

总体感觉,静态博客还是适合有技术的搞,它把博客从原来简单的提交到显示,变成了内容和存储两件非常具体的技术性问题。

热力图

文章更新热力图

类似的热力图,我最早是在 GitHub 看到的,用来展示开发者的更新频率。现在看到不少博客也做了这种小组件:就是从当前日期向前追溯一年,每一天显示成一个灰色的小方块,如果当天有文章发布,就显示成浅绿色,如果当天发布的文章不止一篇,就显示成深绿色。我想了一下,用 Hugo 的模版系统,加上一点 CSS 做布局和显示优化,应该就能实现,动手试了一下,果然效果还算可以。目前可以在首页看到实际演示。

fin.

❌