小球飞鱼博客建立于2021年8月26日，在此之前我辗转新浪博客、不老歌、Lofter 等博客应用，也曾尝试过 WordPress、Notion、Hexo、Halo等建站工具，不得不说，前者是各有各的审核标准与社区氛围，后者是各有各的不好用啊！有了竞品衬托，Hugo 的渲染速度就显得眉清目秀了起来，于是一不留神，博客站点就五年了。

五周年了，总得搞个大的

换掉 Cactus 的想法来自于一个闪念，那天我端详博客首页，心想这张封面图也快挂了一年了，是不是应该来点新鲜的换换胃口？

从 Cactus 主题可以一口气用四年半就可见一斑，通常而言我是一个审美非常单一并且无聊的人，流行的各种雷霆动效我觉得过于喧闹，但受限于代码水平，想要的效果我又做不出来。于是干脆贯彻最省事儿原则，在这四年半里，站点的效果一直类似于草稿流，能不使用图形的地方就不使用图形，可以使用黑白文字的地方就只使用黑白文字。记得有一次做标签墙，我对着屏幕思索再三，还是去掉了所有 Tag 的底色，最终的效果，显得很像砌了一面砖……

这次有换换站点口味的念头时，最开始我还是秉持了这个最省事儿原则，我本来想的是，按以前的习惯，重新换一张封面图，根据封面图的色系，给站点换个背景+主题色，虽然手机还是 iPhone XR，但只要换了一个手机壳，它看上去就像新的一样！

直到我折戟沉沙于刷了一周米画师，是这样的，我可以解释，看得上的橱窗，超过我的预算一倍，符合预算内的橱窗，我又总觉得伊有各种各样例图上的问题，而且我心里真的是一点想法也没有，让画师自由发挥，又把这个氪金开盲盒的难度，翻了一倍。

大概就是昨天晚上，我正在绝望地刷米画师，突然灵机一动，想，如果首页无法放图，那么是不是给文字做一做排版也会很好看，那么说到纯文字首页就想到报纸，就想到最近很喜欢又舍不得买的印章套组（by 片羽吉光，套组惠承708元），以及早年 Hexo 博客里使用的主题样式，把博客做成这种风格，是不是也不错？

并且，一旦有了这种想法，再看旧的站点页面，就像看毛边纸，理智上我知道毛边纸有自己的风格特点，情感上还是觉得太陈旧粗糙了！于是当晚开工。

庄严地请出我们的干活搭子

这次 vibe coding 由于涉及到了网页设计，显然不能让 Codex 直搓，毕竟 Codex 虽然不会叫苦叫累，我的 token 却经不起和它再三磨合排版。于是第一步，我先重新研读了vibe coding 教程中的前端设计部分。

使用的工具如下：

1. Google AI Studio，这是 Google 的 AI 应用开发平台，可以以自然语言生成网页原型，家大业大，额度免费。
2. frontend-design， 我计划仍然秉持极简风格，因此跳过了组件库和动效选择，只是使用了一个 Claude 的官方 skill 来提升整体设计效果和把控细节统一。
3. Codex，负责所有代码上的实现，以及忍受我东一榔头西一棒子想到哪里说哪里的样式修改。

整个流程，是先使用 Google AI Studio生成站点首页和归档页面的基础框架，删除多余的模块并调整页面样式。之后导出文件，上传至已经下载好 skill 的 Codex，让 Codex读取我的博客文件夹，将样式套用至整个博客站点。进行无穷无尽的 debug 和样式细节修改，从搓出雏形到最后上线，大约花费7个小时。

以及有了 Codex 之后发现很多东西其实可以很方便地以另一种形式来管理，比如在手输 hugo server 五年之后我终于想起来其实可以让 Codex 写一个双击启动的脚本，自动启动预览服务器并打开网页。还比如因为首页内容比较多，放在 YAML 里不仅不够直观，写起来也挺麻烦，于是让 Codex 搓了一个编辑台，打开时直接在页面中编辑对应部分，并自动带入文章发布时间、标题等内容，非常便利。

飞鱼小报的一些小巧思

新主题因为模仿了报纸版式，和原 Cactus 主题相比，多了很多装饰性的文字，我借鉴了杂志的一些用语。

1. 首页左上角的 Vol 和 NO.：Vol 在期刊出版中是“卷”，一般报纸一年增加一卷，杂志一期为一卷，在这里是博客文章篇数的意思，NO.则是指博客建站天数。
2. “我们会一起遇见鲸鱼吗？”：从建站开始就一直沿用的站点副标题，来自林奕华的《梁祝的继承者们》中《为什么我好想告诉他我是谁》，鲸鱼与“飞鱼”呼应，歌名与博客这个形式呼应，这首歌也非常好听。
3. “17°19’ N, 87°33’ W”：这个经纬度指的是伯利兹大蓝洞，全世界最大的水下洞穴，又称“上帝的瞳孔”。
4. “飞鱼报社·封面故事”：杂志中最重要的一版就是封面故事，往往是这期杂志的核心专题报道。在我的博客中，用于指代最新更新的一篇博客文章，其中导言和下方分栏部分模仿杂志中常常有的引语排版，封面故事右侧则是对应博客的发布时间（发刊时间）。
5. “上一期，再上一期”：对应更前的两期博客文章。
6. 侧边栏的“生活手记、花边新闻”：类似“Now”页面，用于更新近况，其中生活手记是近期在用手账，花边新闻是指“关于我的”“花边新闻”，包括博客最近的变化、近期关注的书影游戏，以及生活近况等内容，是介于 Mastodon SNS 挂件和“关于我”版块中间的一个形式，最早是在椒盐豆豉的博客中看到的，一直很喜欢，考虑过很多呈现方式，来回上线下线过好几次，终于找到了适合的一种。
7. 落款与联系地址：显然也是模仿期刊报纸的地址栏，博客上线过评论区，体验不太良好，且绝大部分有关博客的交集都在 Fedi 宇宙内完成了，显得开评论也不太必要。也考虑过留言板的形式，但既然不开评论区，相同性质的留言板就被我一并否决。最近发现 Google 邮箱可以修改邮箱名称了，大喜，如果 Fedi 外读者一定要和我联系的话，请给我写邮件。
8. “▌▌▌”：对的，这个花边是，手打的。做到最后的时候觉得页面只有文字还是略显单调，且左右两栏在很多时候还是需要一些占位符来保持版面的对齐和平整，于是想到了在墨水屏排版中见过的这个符号，略作倾斜之后当作装饰性元素使用。
9. 在页面中四处游走的小球飞鱼：原本它是文章页面的页脚挂件，现在定位解放，它会随机在整个可视页面（小屏幕则在页面下方）游走，为纯黑白的页面增加一些活泼感，点击挂件它则会回到页面右下角，防止遮挡阅读。
10. Archive 页面：采取了分卷合订本的形式，分页也写成了按年度而不是按篇数的逻辑，正好去年 CP 游记使用的标题也是“增刊”。新的 Archive 页面增加了 Tags 显示，这样也方便迅速找到相关文章内容。
11. About 页面：自信地写下布袋戏受害者和 Fedi 博客推广大使的 Tag！后者是我在 Fedi 宇宙最幸运的成就之一，因为写博客认识了很多朋友，也带动了很多朋友来写博客，朋友们，Fedi 小气候还是要靠自己营造啊！有三个人我们就是美帝了！

最后，与五周年有关的

❤️