绝妙的Typst博客框架
背景故事
其实在很早之前我就用上了Typst来处理日常的排版任务,其相对于LaTeX带来了很多便利1,尤其是在日常文档编排期间,Typst提供了绝妙的编程手段实现大量编排自动化产生的图像和从原始数据生成表格,以便阅读。 成了Typst的熟练工之后,我就进入了拿着锤子,看什么都是钉子的状态,只要不涉及协作和投稿的排版需求,我都会用Typst而不是LaTeX。
1
好处是快,以及写错了能正确的报错,复杂的逻辑在Typst要阳间不少。 代价是完全没有PostScript支持了,只能回到PDF来处理图像,不过支持PDF我就很感恩了——因为很早之前Typst甚至只支持svg的矢量图。
在 Typst 支持 HTML 导出之后,我就在琢磨博客的生成系统有没有可能从 Markdown 切换为 Typst。 但是受限于时间限制——毕业前后各种原因忙得团团转,于是一直没能实施。直到最近发现了一个各方面都满足我喜好的 Typst 博客框架: Tufted-Blog-Template。于是干脆一不做二不休,直接把博客系统从 Hexo 换成了这么个方案。
解决的痛点
这个框架设计有个最大的好处是编译过程就是直接把所有Typst文件编译成路径对应的HTML文件,所需的工具链非常简单,不像 Hexo 那样需要 Node.js 及其引入的海量依赖包2。并且清晰的结构很适合让AI上手实现我想要的功能。
2
我不是说Node.js不好,而是使用过程中遇到报错经常让人无法下手+想要修改依赖包的行为很麻烦。
迁移过程
迁移本身其实很简单,用 pandoc 逐个把 Hexo 的 Markdown 文件转换为 Typst 文件,然后让AI相应的补充Typst文件中需要的元数据和样式定义。不过日常的bug体质的我,迅速就发现了一些微妙的bug。
quote-block等环境的数学公式排版字体莫名的大,并且宽度受限3- 移动端的目录页面被奇怪的压缩了4
- 在表格、block、list等环境用
#footnote生成的旁注对齐错误 55Yousa-Mirage/Tufted-Blog-Template:44这一条比较复杂,很大程度上包括两个更改:
- 修改 CSS 规则保证在各种环境下
footnote的位置不会错的太离谱(之前在table中调用footnote结果是旁注被塞到了表格里面) - 用一个 JS 脚本在页面加载时把所有的
footnote元素移动横向位置正确对齐(纵向位置不变)
- 修改 CSS 规则保证在各种环境下
此外,在本项目源代码中,我还实现了一些纯粹因为个人喜好而进行的更改,这包括
- 迁移过来了评论系统
- 将源文件的结构改得更加符合Typst语义—比如文章标题应该通过
set document(title: ...)来设置,并通过typst eval对外暴露 - 在前一条的基础上,实现了目录页的自动生成(
python脚本收集文件路径信息,Typst在一个循环中收集元数据并整理成目录页) - 出于我的喜好添加了 tags 功能,依旧是 python 脚本扫描所有
typ文件的路径,传递给一个专门的typ文件,其中使用Typst原生方法扫描元数据,构建出按照tag分类的文章列表。
这些都没准备提交为PR,因为改动规模太大了,不过要是大伙感兴趣可以去我的仓库拣选。
最后
迁移友链的时候发现很多链接其实都死掉了…那我算是矮子里面拔高个,只是有那么一段时间没有更新罢了。