总体构想 #
本博客在 blowfish 主题的基础上迁移了不少 hermit 及其衍生作品的元素。
初遇 hermit 是在 Nova Kwok 大佬那里,之后也有试用过。没有直接用 hermit 是因为这毕竟是一个荒废已久的主题,原作者虽已回归,但暂时没有精力处理之前的烂摊子,而是在 hermit 基础上改了一个自用博客 Zakee’s Planet(在 GitHub 上 开源,需要可以自取)。我不太喜欢新主题对移动设备做的优化,因为我习惯用电脑看博客,并不喜欢将内容放在首页左侧的布局。
放弃 hermit 的另一个理由是它只有默认的暗黑模式,没有提供 Hugo 原生支持的日间/暗黑模式切换。我自知没有能力魔改出这个功能,所以只能选用一个现成的 Hugo 主题。
在一番挑选后我相中了 blowfish,但又心水 hermit/Zakee’s Planet 的 Gallery(我称其为「相簿」)。于是,作为 CSS 和 HTML 白痴的不才在下硬着头皮花了三天时间,在 hugo server -D
、 Ctrl+C
和用浏览器调试工具分析元素之间横跳了无数次后基本实现了预期效果,最终打造成出了本博客现在的样子——一个基于 blowfish 但杂糅了 hermit 元素的缝合怪。
设置多语言 #
content
├── zh-cn
│ ├── about.md
│ ├── links.md
│ ├── posts
│ │ └── post1.md
│ └── gallery
└── en
├── about.md
├── links.md
├── posts
│ └── post1.md
└── gallery
修复 header 空格”bug“ #
在多语言下,header 的社交媒体图标和搜索图标之间会出现一个很不和谐的空格,经浏览器 Inspector 分析是多了一个 inline
元素。
<div class="inline">
<a href="/posts/"></a>
<a href="/en/posts/"></a>
</div>
我猜测 blowfish 可能在多语言下原生提供了语言切换按钮,但苦于在文档和 demo 里都找不到正确的打开方式,就只能把这个功能砍掉,然后用 blowfish 的多级菜单做出多语言切换按钮。
最后的解决方法是在 theme/blowfish/layouts/partials/header/basic.html
文件中删掉 line 34
{{ partial "translations.html" . }}
添加头像 #
在博客根目录的 assets
文件夹下新建 img
文件夹,放入头像图片文件。
在 config/_default/languages.zh-CN.toml
中,将 [author]
下的 image
修改为对应的头像图片路径。如果启用了多语言,则需要同步修改其他语言的配置文件。
加入相簿 #
相簿的加入堪称伤筋动骨级的修改,也是最耗费心智的环节。时隔一个月后再回顾当时的经历时竟有种恍若隔世的感觉,只记得一路都是坑,每一步都走得很艰辛,在具体思路上完全说不出所以然来,只好请看官自己去看配置文件了。主要的修改都在 assets/css/custom.css
里。
设置 RSS #
(本节参考了 Posts Only RSS Feed in Hugo)
Hugo 的 RSS 会为 content
文件夹下的所有子文件夹生成各自的 RSS 订阅链接。如果直接使用最上层的
https://example.com/index.xml ,就会导出当前目录下的所有内容,其中包括“关于”、“友链”等不需要出现在 RSS 信息流里的内容。
为了让 RSS 只保留博文文件夹(文件名可自定义,比如 posts
、 writing
、blog
等)下的内容,你需要手动把 RSS 链接设置成对应文件夹的 RSS 链接,比如
https://example.com/posts/index.xml,不需要修改 index.html
文件。
如果你的博客启用了多语言,你也可以轻松地为不同的语言设置对应的 RSS 链接,比如英文版对应的是 https://example.com/en/posts/index.xml