眼馋 Hugo 好久了,但是一直没有实践。为什么呢,因为没有找到一款合适的主题。在借助AI的辅助,成功完善了自己期望的模板。 Hugo 启动~

在迁移过程中,主要是对模板的修改与完善。算是重新造轮子了。

主题相关

创建新主题放在 themes/blog。刚开始页面直接报错:

partial "head.html" not found

新主题的 baseof.html 调用了 head.html,但对应 partial 不存在。补上 themes/blog/layouts/partials/head.html 后才能继续渲染。

样式调优

主要调整了顶部导航栏,选择后的抖动问题。侧边栏icon的大小,以及对齐。

自定义页面

“关于”“下载”等页面由内容目录维护,菜单提供链接,不把正文写死在主题模板里。

语法高亮优化

代码块先后遇到命令没颜色、路径被误判的问题。现在改用本地 Shiki bundle 和现成 grammar:Windows 命令标为 bat,Linux 命令使用 shell grammar,D:\backup.ab 就不会被 Bash 当成转义。Batchfile grammar 不会把任意外部命令(如 adb、java)都单独着色,这点不能靠乱标语言掩盖。

行间距过大则是 CSS 的 white-space 与 Shiki 行元素冲突:行元素设为块级后,容器又保留了它们之间的换行。让容器折叠行间空白、单行内部继续保留空格后恢复正常。

构建验证

这个流程中,AI会犯抽,去验证生成的html是否有问题。纠正后,先验证统一 render hook 和页面结构,再用本机 Hugo 构建。代码页才加载 Shiki 脚本,其他页面不加载。