记录使用 AstroPaper模板的修改
Table of Contents
显示目录
针对这个主题的相关修改
主题颜色的修改
文章参考了这个主题,对应的github源代码
根据个人喜好对主题的深色模式中的颜色定义进行了修改,模板文章中也有说明,详见自定义主题的配色方案。相对来说这部分不是特别麻烦,主要是没找到舒服的颜色,这块等以后遇到合适的配色再说吧,
相关 CSS 定义于 src/styles/base.css,它的值是一个 CSS 颜色代码。 --color-fill
作用于背景色,--color-accent
作用于强调色,
调整了主题代码高亮
Astro本身的代码高亮用的是Shiki,跟着文档的说明在网上找的一个感觉还算舒服的主题 catppuccin-mocha
修改字体
主题默认采用的 IBM Plex Mono 字体对于中文支持不佳,我选择将主字体替换为开源中文字体修改文件是 tailwind.config.cjs
相对应的,需要在 src/styles/base.css
中将 font-mono
替换为 font-fontfix
接下来需要引入霞鹜文楷字体的 Stylesheet,为了避免阻塞渲染,可以将 media 设置为 print,在加载完成后再将 media 设置为 all。同时,使用的阿里的npm镜像可以看这里,相关代码添加到 src/layouts/Layout.astro 中:
同时,把上面文件中引用的google字体换个国内的加速,这里用的是loli.net
但是通过以上的修改,会存在两个问题:
- 标签展示时,若采用霞鹜文楷字体,会导致显示紊乱;
- 代码框中也会采用霞鹜文楷字体,不符合等宽字体的要求。
对于第一个问题,需要在 src/components/Tag.astro 中将字体强制设定为 IBM Plex Mono:
对于第二个问题,在 src/styles/base.css 中,将 pre > code 的字体强制设定为 IBM Plex Mono 即可:
部分内容中文化
其他一些小修改,主要是尽量把主题中英文显示的部分,替换为中文,这个就不详细记载了,只要找到对应的字段,在对应的位置修改就好
也有一些还没来及或者修改后,发现功能异常,暂时先不动了。本身这个模板坐着也是好久没更新了,期待后续功能更加完善