virusdefender's blog ʕ•ᴥ•ʔ

迁移到 Hugo

从本站的文章发布日期来看,写博客也已经有 10 多年的历史了。回想了一下本站使用的博客系统,大概分为下面三个阶段,它们让我切换的动力都是简洁轻量的部署与贴合个人审美的模板。

Typecho

印象中当年将 Typecho 在多家不同的虚拟主机上都部署过,也是当年初入技术圈的时候,各种胡乱探索的过程。

相对于 WordPress,差别是 Typecho 更加简洁易用,共同点是 10 多年过去了,我翻了下 Typecho 的 GitHub 发现还是和 WordPress 一样天天在修复安全漏洞。

这个截图来自官方博客,我当年用的主题似乎和这个有点差别,但是整体布局和色调是接近的。

Jekyll

后面静态博客生成器快速流行起来,无意中发现有人分享了一个主题 jekyll-theme-H2O,也是一眼就看中了。

因为不想更换为 Jekyll 之后让之前 Typecho 生成的文件链接失效,所以一个静态网站的 url 也不得不变成 /index.php/archives/100/ 这样的格式了。

Hugo

逛 GitHub 的时候发现了一个名为 ʕ•ᴥ•ʔ Bear Blog 的博客系统,其小熊的 logo 非常的呆萌可爱。

不过这个博客系统很遗憾是 Django 开发的,不是静态网站,但是我又一眼就喜欢上了这个网站的模板风格,就打算自己扒一下网站的源码改造一些,调研过程中就发现了原来已经有好心人给弄了 Hugo 版本,所以自然就切换到了 Hugo 上。整体来看,这个版本的风格和 Typecho 还是比较接近的。

折腾这个没花太多的时间,借助 AI 工具,一些明显的问题和数据格式的简单迁移很快就搞定了,主要遇到的一个卡点是这个博客区分 Dark 和 Light 模式,并借助 css 自动切换,但是 Markdown 中代码块的高亮却是固定的模式,导致不管选择哪个高亮的主题在另外一个模式下总是看上去比较奇怪。后来搜索了一些资料,最终是导出了两个主题的语法高亮 css 然后插入自定义的 css 进行选择,感觉 Hugo 自带这个功能的话会更好一些。

1<style type="text/css" media="screen">
2@media (prefers-color-scheme: dark) { 
3  /* Generated using: hugo gen chromastyles --style=github-dark */
4  /* github-dark css 内容 */
5}
6@media (prefers-color-scheme: light) { 
7  /* Generated using: hugo gen chromastyles --style=friendly */
8  /* friendly css 内容 */
9}

提交评论 | 微信打赏 | 转载必须注明原文链接

#其他