给博客做了个新主题——Ruri 开发记录

博客又装修了。这回没有换一个现成主题，而是借助 Codex，做了一个自己的 Hugo 主题，叫 Ruri（日语，琉璃）。

要求说起来不复杂：原来的壁纸、头像、文章、分类、歌单都留下，页面重新设计。极简，平面，加载快，占用少。毕竟折腾了这么多年博客，东西越攒越多，加载总是很慢（可能是图片太多了）。

主题已经放到 GitHub：GuZhengSVT/hugo-theme-ruri。这里不写安装教程，简单记一下这次主要折腾了什么。

先把样子定下来

之前用的是 D-Sketon/hugo-theme-reimu ，功能很全，也给这次开发省了不少事。Ruri 借鉴并沿用了其中一部分代码，不过页面布局和主要交互重新做了。开发时先复制整个博客，在副本里改，本地预览，原来的 Hugo 项目不动。

底色用暖白，强调色用雾蓝，靠文字、细线和留白区分内容。没有再引入前端框架、动画库和图标字体，常用按钮用 SVG，字体优先用系统已有的。二次元图片该留的还是留，尤其是首页壁纸和文章封面。真做成纯文字博客，我也没有好的纯文字平面设计功底。

首页左边放“素月分辉，明河共影，表里俱澄澈。”，右边放Noa大图；Poetry 和 Thoughts 两个分类还是放在最新文章前，用图片作入口。顶部留一句斜体的 Per aspera ad astra.，页脚则是 Life is too long to end at a grave.。这些小字和图片一样，算是这个家的装饰。

真正费时间的是间距。文章封面先放大，后来又觉得文章卡片太空，缩小；时间、标签、字数、阅读时长挪到同一行；菜单栏压矮，页尾留白收紧。reimu的友链最初一行两个，空得能跑马，我的友链又越来越多。将其改成紧凑的多列卡片，描述太长就换行。

长文章和归档，单独处理

许多侧边栏静态博客的侧边栏总是固定显示个人信息，感觉不是很有必要，放在首页和个人介绍页就够了。文章页不再塞一整套个人资料侧栏，主要留给目录。
我的博客不只有短文，还有学习笔记和毕设论文。拿《低剖面天线的研究与设计》做目录侧边栏宽高压力测试、标题显示效果测试。
默认看到二级标题，读到哪里，就展开对应的小标题；长标题换行，避免丑陋的滚动条设计。在原来reimu的基础上，增加直达评论区按钮，放在目录下面，和目录本身分开，主要是方便我回复。封面在文章开头按原比例显示，列表里的缩略图则统一比例。

归档也没必要重复首页文章卡片。改成按年、月排列的时间树，只留标题，向下滚动时逐年展开。我想首页就有翻页按顺序看文章大卡片功能，归档页可以提高信息密度，顺便把占据巨量篇幅的标签分类折叠。原来关于页的文章更新热力图一起搬过来，分类置顶。

音乐播放器

最初Astra为了省事，用了一个很轻的原生播放器。但切个页面歌就断了，也巨丑无比，这肯定不行。

改成左下角的浮动播放器，平时只露出一张方形封面，鼠标移上去再展开控制项。进度、音量、歌单、播放顺序都重新做，图标统一大小。长歌名滚动显示，歌词放在页面底部中间。原本设想有翻译就原文一行、译文一行，没有就不硬留空位。但meting服务带的歌词是“原文（译文）”的格式，自己再手动拆分显示不是很有必要。

为了切换文章时不断歌，站内导航改成局部替换页面内容，播放器和音频实例留在替换区域之外。这样换文章、换语言时，音乐还在原地继续播。

保留一些实用小功能

第一轮做完，又把 Ruri 和原来的 Reimu 博客对照了一遍。结果发现，页面大体齐了，一些小细节还没做。

比如代码块只剩语法高亮，没有复制和折叠；图片能显示，但点不开大图；配置里还开着阅读统计，模板里却没有展示数字的位置。搜索也从 Pagefind 换成了简单的文本匹配，长文章后半截还可能搜不到，搜索效果差。

后面把代码语言栏、复制和折叠、图片灯箱补回来，恢复 Pagefind 全文搜索；文章阅读数和评论数、页脚字数与阅读时长也补上。微信分享生成二维码，个人二维码可以在站内弹窗看，版权信息支持文章单独设置，不再把许可证写死在模板里。

舍弃了reimu的AOS入场动画、装饰图标之类，加快加载。

将私人Ruri改为面向Hugo用户的主题

以Hugo最小站点为前置，要让ruri安装即用，需要将现有的各种设置和模板重新整理。于是又做了一轮拆分，把个人文案移到配置里，给可选功能补默认处理，做不带个人资料的示例站点。

现在分成两处维护：Ruri 是我的博客，hugo-theme-ruri 是独立主题。博客通过 hugo.toml 选择主题，params.yaml 配置外观和功能，文章、图片、友链数据各放各的位置。主题示例里的可设置项也补了中英文说明，即使两年前毫无技术背景的我来了也能看懂。

发布前检查了最小站点、四语言和子目录部署。Reimu 的借鉴范围、署名和许可证也保留下来，主题代码用 MIT 协议。

暂且完工

一边感叹Astra神力，一边心疼token。中转站前前后后充了 15 $，这次做主题用了 9 $ / 39M tokens，一天登完60多人民币。夸脏哦

在这之前用DeepSeek V4.1 flash试着做一个Liquid Glass版，即使提供现成库仍做的一坨。可能是模型视觉能力太差了，不能自己检验迭代。

从当年搭 Hexo，到现在给 Hugo 做自己的主题，这片互联网自留地倒是一直在修修补补。感谢 Reimu 的作者和开源社区，也希望 Ruri 能给喜欢这套样式的人省一点折腾时间。

接下来该多写点文章了（

自从AI能写文章，尤其是技术类的，写得比我严谨、详细得多，我就很懒不想写。
交给AI吧，写出来一股味儿怎么也去不掉，大多不合我心意。似乎越是编程和Agent能力强的LLM，其文本越是远离人类。

这一篇开发记录先交给GPT-6-Astra(medium)，根据两个历史会话生成。然后我审阅改了大半。好在多语言翻译交给AI问题不大。

后续开发计划

增加鼠标特效、简单背景动效。
调整黑暗模式配色，增强阅读体验。
微调部分字体及字号。
增加部分obsidian语法适配。