迁移并使用zola重写博客

一直想写一个自己的主题，正好看 Hexo 不爽很久了（主要是node_modules这一顽疾），正好换成关注了一段时间的 Zola。

主题  

配色是从蜂蜜牛奶键帽得到的灵感，另外我喜欢稍微带点暖色的背景色，只不过写完了才发现这配色似乎有点像 nga。

此外 Zola 没有默认实现标签、分类等功能，需要自己使用 Taxonomies 实现，不过我只实现了标签，因为我个人很少用到分类功能。

CSS使用Tailwind，它的官方插件@tailwindcss/typography可以对无法控制的 HTML 内容（例如从 Markdown 生成的内容）进行一定程度的自定义，另外一个加分项是它自带的standalone cli安装、使用上还是挺方便的。

另外，本主题勉强可以算是无JS，通过配置可以按需引入Waline和MathJax，除此之外就没有其他JS内容了。为了尽可能减少不必要的加载，两者的启用都是页面级可配置的，即通过 Markdown 前面的 TOML 块设置 ，只不过 Waline 是默认启用，而 MathJax 是默认不启用，因为我发现全部几十篇文章内只有一篇上古文章用到了数学公式，另外惊觉之前使用的 Hexo 主题 Murasaki 没有或是我没开启 MathJax，所以那篇文章的一大堆数学公式都是没有渲染的。另外去除了 Google Analytics，主要是因为会来访问本站的基本上八成是装了 uBlock Origin 或者其他广告拦截插件的，还不如顺手去掉少一个请求。

顺便把很多图片等资源文件从腾讯云COS搬回来了，一部分原因是 COS 也不是用来当 CDN 的，有时候反而会拖累加载速度，主要原因是上传麻烦，所以直接放本地了。

一些小坑  

开发过程中遇到了一些小问题，留个记录。

Social Icons 无法加载  

具体表现为图标不显示，控制台的 Network 栏显示对应的图标是Block(Others)，其实是被 uBlock 的Fanboy's Annoyance规则拦截了，拦截的 url 关键词包括social_icons和icons/rss，前面一个还能理解，后一个直接导致很多rss订阅按钮无法显示，不知道是出于什么思路。解决方案就是改文件名。

Tailwind 无法生成由配置文件生成的 class 的对应 css  

标题有点绕，Tailwind 会通过监听目录中 html 文件里的所有 class 来生成 css，以此减小生成的 css 文件体积。我在开发过程中监听的是主题目录下的templates文件夹，这样就会导致一个问题：class="text-{{ config.extra.color }}"这样的 class 是识别不出来的，所以就不会生成对应的 css。理想的解决方案是同时监听使用zola build生成的public文件夹，但是这样就要时不时手动 build，稍微有点麻烦。所以我简单地放弃了这一配置项，直接写死。

迁移  

还是部署在 Vercel 上。最好的迁移方式应该是再开一个项目，等一切配置妥当之后再把域名绑定到新项目上，但是我再次犯懒，直接把之前博客下的.vercel文件夹复制过来，因为我是直接部署生成的静态文件，所以这样就能正常使用了。

另外还要解决一下重定向，因为我之前用的 URL 形式是yyyy/mm/dd/TITLE，会有一大堆编码后的中文，不太美观，看它不爽一段时间了，另外 Zola 也不支持这样的形式，我也不想去搞一些乱七八糟的 hack 了，所以就保留了 Zola 自动 slugify 的结果。这样就会导致以前的文章全部 404，用户体验较差，正好 Vercel 自带重定向功能，写一个配置文件就行。写了个脚本根据 sitemap 自动生成配置：

import xml.etree.ElementTree as ET
import re

redirects = {}

# hexo
tree = ET.parse("sitemap.xml")
root = tree.getroot()
pattern = r"\d{4}/\d{2}/\d{2}"
for x in root:
    url = x[0].text.replace("https://www.senventise.com", "")
    # hexo 的 lastmod 是读取文件修改时间，而非 metadata
    date = re.findall(pattern, url)
    if date:
        redirects[date[0].replace("/", "-")] = (url, )

# zola
tree = ET.parse("public/sitemap.xml")
root = tree.getroot()
for x in root:
    if len(x) != 2:
        continue
    url = x[0].text.replace("https://www.senventise.com", "")
    lastmod = x[1].text
    redirects[lastmod] += (url, )

result = ""
for x in redirects.values():
    s = f"""{{
  "source": "{x[0]}",
  "destination": "{x[1]}"  
}},
"""
    result += s

print(result)

对比  

Hexo 博客共占用 152.6 MB，其中 119.3 MB 是node_modules，全部文章重新生成耗时 2.25 秒。

Zola 博客共占用 30 MB，全部文章重新生成耗时 111.73 毫秒。非常舒爽。

致谢  

感谢 apollo 主题，我就是以这个主题为基础魔改的，不过原来的内容估计没多少了，只剩下了一个框架。

另外设计上大量参考了Karan Sharma。