我先前用的一个香港虚拟主机原本是 2025 年到期，但是考虑到博客建立的这几年也很少有什么内容输出，发的东西也没什么人看，为了博客单独搞一台服务器实在是没有必要，到期也不打算再续费了。到了 2023 年底，我开始准备把博客提前迁移到 GitHub Pages。

由于 GitHub Pages 仅支持静态页面，之前使用的 typecho 也没法继续用。四处考察了一番，决定利用 hugo 重建博客，这期间找到了一个喜欢的主题 minimal-bootstrap。

我当初是在 hugo 官网发现的这款主题，写文章的时候发现原 hugo 官网主题链接已经处于 404 状态。可能是因为主题已经不再维护，hugo 官网将其下架了。

原 hugo themes 链接：https://themes.gohugo.io/themes/minimal-bootstrap-hugo-theme/（已失效）

GitHub：https://github.com/zwbetz-gh/minimal-bootstrap-hugo-theme

从 typecho 到 hugo

我对 typecho 实在太熟悉了，再加上用的时间也久，可能是因为 typecho 本身就很简洁，源码文件结构清晰，即便是我这样完全不懂 php 的人来说（迄今为止，我的代码水平仅限于大学计算机基础课上学过的那一点点 C 语言…），看看源码，连蒙带猜也能修改很多东西，打造出自己满意的效果。

换成 hugo 之后算是一夜回到解放前，hugo 的代码我不太看得懂，而且主题文件看起来比 typecho 复杂的多，幸好现在有了大模型编程工具的助力（我用的是字节的 Trae，指定的模型是 Claude-4-Sonnet Beta），基本上只要你能描述清楚需求，它改代码效率还是挺不错的，调试网页的过程中也极少报错。大模型似乎很擅长写前端代码，我改了很多次，基本都跑通了。我之前用它写过 macOS 应用，当时感觉不是很顺手。

我选的主题 minimal-bootstrap 看起来和 typecho 的风格很像，虽然功能不丰富，默认样式也略显简陋，我碍于自身实力，也只能凑合着用，直到最近才意识到可以用 Trae 去改造它。

主要的改造项

1.导航栏显示网站标题

minimal-bootstrap 主题的导航栏简洁到甚至不显示网站标题，我希望它至少可以展示出网站的名称。当你看到这里时，不妨留意一下现在的顶栏，前面的「JL DUAN‘s Blog」就是我自己加上去的，原版主题中顶栏只有四个链接…

修改方法是找到主题文件中 layout/partials/nav.html 文件，在适当位置插入：

<strong><span style="color:#FFFFFF;">{{.Site.Title}}</span></strong><span style="color:#FFFFFF;">丨</span>

这里只用了一小段 HTML 代码就能实现这个需求，顺便加了个「丨」将网站名称和后方的导航选项分隔开。而且这个改法是我自己摸索出来的，那时候还没有 Trae……

2.区分独立页面和文章页面

独立页面和文章页面最大的区别是：独立页面不需要显示标题和发布时间，但是文章页面需要这两项内容。按照 minimal-bootstrap 的说明，主题本身应该可以支持设置不同的页面属性，可能是我的用法不对，反正一直都无从下手。直接把需求告诉 Trae，最终实现了这个效果。

用法： 创建页面时需要设定 page参数，true表示这是独立页面，false表示这是文章页面，默认为false。

3.添加评论框，可选是否启用页面评论区

hugo 自身不支持评论互动（哈哈其实很少有人会留言），我通过 giscus 这个项目为博客添加了一个评论框,默认的几个样式就非常简洁，完全不需要再改动什么了。但 giscus 会默认给所有页面都加上评论框，如果用户能手动控制是否启用页面的评论区就更好了，这里同样用 Trae 解决了这个需求。

用法： 创建页面时需要设定 comment 参数，true 或留空表示启用评论区，false 表示不需要评论区，默认为true。

4.优化 markdown 标题样式

原版主题在显示 markdown 标题时，没有做任何特殊样式，仅是放大加粗了各级标题的字号，可读性方面不够友好。特别是 1-4 级标题字号大到离谱，我也不知道怎么缩小字号，迫使我之前写东西都直接从 4 级标题开始用，好在现在我可以直接用 Trae 修改 markdown 1-6 级标题的样式（一般用不到 6 级标题，对我个人而言最多 1-4 级足矣）。

现在这个标题样式是 Trae 自己生成的，虽然也不算很好看，但总比之前单纯粗暴的加大加粗字号看起来更优雅、醒目，先就这么用着，留着以后再改吧。

5.为豆瓣网址添加豆瓣 logo 图标

博客之前发过一些读书笔记，我在码字的时候，顺便给每本书都加上了豆瓣对应的链接，所以博客还是有很多豆瓣的外链的。因为有了 Trae，我想给豆瓣链接增加一些特别的样式：

• 网站的外链默认是蓝色的，豆瓣的链接可以换成和豆瓣更适配的绿色；
• 豆瓣链接前方可以加上豆瓣的 logo，让这个链接更加直观。

把我的要求告诉 Trae，顺便准备好豆瓣的图标资源（刚好可以把图标上传到我之前利用 Cloudflare R2 做的图床）。Trae 告诉我，通过修改 CSS 样式表完成了这个任务。好吧，这已经触及到了我的知识盲区。

6.修改标签（tags）页面样式

在主题默认样式中，原本标签页面里每个标签都会另起一行显示。我写东西时标签都是随便加的，因此文章的标签有很多，导致这个页面变得很长……

通过 Trae 修改了这个页面，让所有的标签都平铺显示，这下看起来就舒服很多了。

7.删除不需要的功能

主题默认支持 Google Analytics，只需要在配置文件填入 Google Analytics 后台提供的 GA 代码就能使用。不过现如今出于用户隐私的考虑，目前各大操作系统、浏览器、去广告插件都会拦截这类数据分析服务，导致在 Google Analytics 后台看不到任何统计信息。而且我自建了一个简单的统计服务 umami 用来替代 Google Analytics，所以通过 Trae 将 Google Analytics 相关代码文件都进行了删除。

同理，主题中包含的 mastodon 相关代码也因为我自己用不到所以让 Trae 将其移除了。

8.修改底栏

主题原版的底栏只是一行文字，导航栏又是深色，显得有一些头重脚轻。

我通过 Trae 将其修改为和导航栏相似的样式，在视觉上和导航栏颜色、高度均一致，看起来平衡多了。

9.为文章添加目录

根据主题的 readme 文件，主题原本应该支持自动为文章生成 table of content 目录，但是我摸索了许久，实在搞不懂要如何操作，这次直接用 Trae 满足这个需求。