眼馋 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 脚本,其他页面不加载。