前阵子翻到一个站点，dev.anheyu.com，是「安和鱼」的官方文档。顺着它找到了演示站 blog.anheyu.com，界面挺对胃口：首页左边是渐变大标题配一面斜着的技术图标墙，右边一张大图卡片，往下是分类胶囊和双列文章卡。
后面去翻，看了才知道安和鱼不是主题，是安知鱼作者写的一套独立博客系统。我很喜欢他的主题和版式，但安和鱼是一套完整的独立系统，我又不想换博客系统，因为我的博客是 Halo，2.x 版本。去它的 GitHub 仓库看了一圈，没法和装主题一样简单。
安和鱼后端是 Go，前端是 Next.js（React + TypeScript），两边通过反向代理拼起来，用 Docker 部署。它有自己的数据库、自己的后台、自己的文章管理，跑起来是一整个站，不是挂在别人身上的模板。而 Halo 的主题是什么？一个压缩包里放 theme.yaml、settings.yaml 和一堆 templates/*.html，页面由 Java 端的 Thymeleaf 引擎实时渲染。两边从语言到运行方式都不一样，把安和鱼的代码丢进 Halo 的主题目录，Halo 连读都读不了。
我本来想省事，先找现成的。Halo 的应用市场和 awesome-halo 列表都翻了一遍，没有安和鱼的移植版。安知鱼本人另外做过一个 Hexo 主题，叫 hexo-theme-anzhiyu，跟安和鱼是同一个作者、同一套设计语言，但那玩意儿是给 Hexo 用的——Hexo 是本地跑的静态站点生成器，靠 Node.js 把 Pug 模板和 Stylus 样式编译成一堆死 HTML 再上传，Halo 是服务端实时渲染，所以那个主题同样装不进 Halo。
于是咱有 WorkBuddy 呀，没有现成的，我们就自己移植呀。
移植的思路
于是我配合 WorkBuddy，先让它把思路讲清楚，别急着动手。它给的第一句话就是：代码搬不了，只能搬设计——把安和鱼的首页拆开，一块一块在 Thymeleaf 里重写。
拆出来是这么几块：
- 左上那块渐变标题区
- 标题后面那面斜着排的技术图标墙
- 右边的每日图卡片和「更多推荐」按钮
- 下面的分类胶囊、标签条、文章卡片列表
- 侧栏的作者卡、目录、标签云、归档、统计
类名我沿用了它原来的命名，只是把驼峰改成短横线。这样做的好处是两边对照着看不会乱——它那边叫 randomBanner，我这边就叫 .random-banner；它叫 todayCard，我这边是 .today-card。写的时候开着两个窗口，改一处对一处。
| 页面元素 | 安和鱼 | 我这份主题 |
|---|---|---|
| 随机横幅 | randomBanner | .random-banner |
| 技术图标墙 | skillsTagsGroupAll | .skills-tags-group |
| 横幅大标题 | bannersTitleBig | .banner-title-big |
| 今日推荐卡 | todayCard | .today-card |
| 推荐按钮 | bannerButton | .banner-button |
| 分类胶囊 | categoryBar | .category-group |
模板是我一边对着它的界面，一边用 WorkBuddy 改出来的。它帮我把 Next.js 那套写法翻译成 Thymeleaf 的表达式，剩下配色和尺寸是我自己一点点调的——主色换成了紫色，跟它原来的蓝不一样。
效果
除了首页，文章页、归档、分类、标签、作者页、照片墙、404 页都一起做了。404 那页会随机抽两篇已发布的文章显示，用的是 Halo 的公开接口，不需要额外配什么。
装到你自己的博客上
环境要求是 Halo 2.20.0 及以上。步骤不多：
- 下载主题包
theme-anheyu-1.0.0.zip（下载链接在文末） - 进 Halo 后台，左边选「外观」，进「主题」页面
- 点右上角的安装入口（有的版本收在「主题管理」下拉里），选「本地上传」，把 zip 传上去
- 回到主题列表，找到它，点「启用」
启用之后在主题的设置页里能调这些东西：首页横幅的标题、副标题、小字，右边卡片的图片和按钮文字，技术图标列表（格式是「图标名|底色|logo颜色」，图标名对应主题里内置的那批 SVG），分类胶囊的显示数量和渐变配色，站标和导航，强调色和默认明暗模式，侧栏作者卡的内容和社交链接，文章列表是双列还是单列，页脚的社交图标和链接分组。
有两点容易踩：
- 技术图标想加新的，把 SVG 丢进主题的
templates/assets/images/tech/目录，然后在配置里写上文件名（不带后缀）就行。 - 页脚社交图标如果填的是图片地址（以 .png / .jpg / .webp 结尾），点击会弹出大图而不是跳转链接，微信二维码就是这么用的。
另外主题支持首页右侧显示 Bing 每日壁纸，但这个功能需要你在服务器上跑一个定时脚本去拉图，主题包里没带，README 里有完整的脚本内容，复制过去改一下路径就能用。
下载与说明
主题包下载：theme-anheyu-1.0.0.zip（64 KB）
免责申明：
- 这是和 WorkBuddy 配合、照着自己的需求写的移植版，跟安和鱼的作者没关系，也不是官方出品。原项目的设计版权归其作者所有。
- 主题里的界面样式设计参考自安和鱼，如有侵权联系删除。