在Hexo nexT主题上添加多个字体

折腾Hexo的第一篇,先聊聊多字体设置。

官方自带的主题市场溜达了一圈,也没看到什么感兴趣的,后来发现怎么好几个博客都在用nexT?那就装上试试吧。从 Github 上下载、安装、改设置一气呵成,清掉之前的重新生成,Bingo!
翻了翻这主题真的不错,要用的一些插件基本集成全了,还自带一个网站用来 Step by Step 教怎么用,真的贴心到家了~
使用中发现了一个痛点,就是不知道默认样式怎么设置多个字体,文档里提到的next\_config.yml里的font设置包括给到的 Demo 只适合单个字体,但我自己习惯上需要设置多个字体回退(包括现在在码字的 VSCode 都是)的,So,

怎么办?

上网搜了下,资料不是很多,只有一篇 2017 年的文章提到要改next\source\css\_variables\base.styl文件,我一看,我去这 Stylus 啊,当初觉得门槛高就没碰过,没想到在这又……好吧硬着头皮去找文档。除了官方文档以外,能用的只有张鑫旭维护的Stylus中文文档还能看,简单瞅了几眼,然后对着代码开撸~
按照之前那篇文章里所写,先在family里设置长字符串,然后回到 styl 文件的函数里去除引号,但找了好几圈,也没发现stylus哪里提供了去除掉引号的方法,或者说,就没找到完整的字符串类型操作函数……于是放弃。
由于之前折腾 Docker 的时候,学了点 Yaml 语法,这时突然想,把配置直接写成数组形式行不行?于是我写成了这样:

global:
  external: false
  family:
    - -apple-system
    - BlinkMacSystemFont
    - Segoe UI Emoji
    - Helvetica Neue
    - Helvetica
    - Nimbus Sans L
    - Arial
    - Liberation Sans
    - Hiragino Sans GB
    - Source Han Sans CN Normal
    - Microsoft YaHei
    - 微软雅黑
    - Wenquanyi Micro Hei
    - WenQuanYi Zen Hei
    - ST Heiti
    - SimHei
    - WenQuanYi Zen Hei Sharp
  size:

再在 styl 文件里直接放变量,然后拼接尾部的, sans-serif,好的hexo g生成!然后惊喜的发现数组内容是以空格连接直接输出的,这……好吧,我改用自带的join()函数拼接下试试~但是试了几次,最后输出的内容都会被一对引号包起来,甚至连一开始的空格都没了,这……
一筹莫展之际,发现base.styl下边还有个custom.styl,咦?试着直接把需要的样式直接写进去:

$font-family-base      = -apple-system, BlinkMacSystemFont, "Segoe UI Emoji", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "Hiragino Sans GB", "Source Han Sans CN Normal", "Microsoft YaHei", "微软雅黑", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif
$font-family-monospace = "Fira Code", "更纱黑体 UI SC", consolas, Menlo, "Segoe UI Emoji", monospace

然后hexo g生成……居然搞定了!哈哈😄~生成的内容就是我想要的!

所以方法就是这样,不要管_config.ymlbase.styl里的东西,直接在custom.styl里重写相应的变量就行了~

如果本文对你有帮助,欢迎在下方打赏我哦!谢谢😁~