Hexo Next 主题字体相关配置

🏷 学习折腾 配置与操作

版本:Hexo 4.0、Next 7.0

搜索的一些文章里提及改动的地方挺多的,我乱试了一下,似乎并不需要那么复杂。不知道是不是我没搞懂。

可能是因为 Next 更新了一些配置简化了操作?总之记录一下。

PS:Hexo Next 的瞎几把优化可以看看这篇:尝试折腾了下用 hexo-next-theme 搭建的博客

相关配置

先看主题配置文件 _config.yml 里与字体相关的配置项:

font:
  enable: true
  # CDN
  host:

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # external: 控制是否使用 CDN。
  # family: 字体样式。
  # size: 字体大小。默认为 1(16px)。

  # Global font settings used for all elements inside <body>.
  # 全局配置,覆盖 <body> 标签里所有元素
  global:
    external: true
    family:
    size:

  # Font settings for site title (.site-title).
  # 博客名字那儿
  title:
    external: true
    family:
    size:

  # Font settings for headlines (<h1> to <h6>).
  # 注意这是文章里的标题,而不是侧边栏的 toc
  headings:
    external: true
    family: #Roboto Mono
    size:

  # Font settings for posts (.post-body).
  # 正文
  posts:
    external: true
    family:
    size:

  # Font settings for <code> and code blocks.
  # 代码块
  codes:
    external: true
    family:

挑选并配置字体

Google Fonts 挑选一款字体,在配置里的 family 处添加即可。

例如:

font:
  enable: true
  global:
    external: true
    family: Noto Serif SC
    size:

如此配置之后,基于 hexo-next-theme 的博客就会全局使用「思源宋体」。

同理,配置代码块的字体也只需要挑选并覆盖相应配置即可。如:

font:
  enable: true
  # ……
  codes:
    external: true
    family: Roboto Mono
    size:

其它可配置样式的覆盖详见上面的 相关配置

样式的高级设置

主题提供的字体配置挺到位的,但仍然有限。

一是只能配置 global、title、headings、posts、codes 几处(其实也挺丰富了);二是能配置切换字体,设置字体大小,但不能设置颜色等;三是字体只能设置一种 —— 网页是支持多种字体按优先级展示的。

这些问题,可以使用 Next 4.0 提供的「加载用户自定义样式的配置」解决。

道理很简单,就是用 Next 提供的自定义样式覆盖默认或者配置的样式。

在主题配置文件 _config.yml 里开启:

custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

然后在 Hexo 根目录进入 source/_data/styles.styl(若无则新建),添加自己想要设置(覆盖)的样式就好啦!

比如我要更改全局的字体颜色,就可以这样:

* {
  color: #2e405b;
}

PS:同理,这里也可以覆盖博客的各种样式

font-family

字体设置默认使用的 CDN 是 //fonts.googleapis.com。如果从 CDN 上访问失败,就会默认使用如下的字体:

  • Non-code Font: Fallback to "PingFang SC", "Microsoft YaHei", sans-serif
  • Code Font: Fallback to consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace

非代码的文字使用 "PingFang SC", "Microsoft YaHei", sans-serif

代码块使用 consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace

浏览器要知道用什么字体,实际上是通过读取 CSS 属性 font-family 1实现的。

在 Next 里,font-family 的默认值就是上面的两项。当我们在配置文件的 font 里添加字体后,被添加的字体就会被插入到 font-family 默认值的头部 —— 当 font-family 里配置了好几个值时,浏览器会优先使用排在前面的字体。

比如本站最后渲染出来的效果是这样的(你可以打开浏览器的调试窗口查看):

body {
  font-family: "Noto Serif SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

code,
pre {
  font-family: "Roboto Mono", consolas, Menlo, monospace, "PingFang SC",
    "Microsoft YaHei";
}

然而很可惜的是,Next 似乎无法在配置文件里 fontfamily 处配置多个字体。

# 无效配置
font:
  enable: true
  global:
    external: true
    family: Noto Serif SC , Noto Serif SC
    # family: [Noto Serif SC , Noto Serif SC]
    # family: "Noto Serif SC , Noto Serif SC"

如果你想要利用 font-family 的规则2:或者 修改默认使用的字体,阔以直接到源码 source/css/_variables/base.styl 里修改。

如下面,修改 $font-family-chinese

// Font families.
- $font-family-chinese = "PingFang SC", "Microsoft YaHei";
+ $font-family-chinese = "Noto Serif SC";

Next 能加载用户自定义的样式,同样也能加载用户自定义样式使用的变量。然而同样比较可惜的是,自定义样式使用的变量里的定义(source/_data/variables.styl),不能覆盖变量默认定义的值hexo-next-theme/source/css/_variables/)。但是你可以在默认定义里注释掉变量后,在自定义变量里重新定义并赋值。

自定义样式使用的变量

在主题配置文件 _config.yml 里开启使用自定义样式变量:

custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

首先,在主题的 source/css/_variables/base.styl 下注释掉你想自定义的变量。如:

// Font families.
//$font-family-chinese = "PingFang SC", "Microsoft YaHei";

然后在 source/_data/variables.styl (若无则新建)添加自定义变量并配置(你刚刚注释掉的变量)。

$font-family-chinese = "试试就试试";

我觉得 source/_data/variables.styl 的设计应该是为 source/_data/styles.styl 提供变量。像上面这样使用好像没啥必要。要说有点好处的话,就是方便了管理用户配置吧……

googleapis 镜像

虽然许多文章里都提到说 fonts.googleapis.com 不太稳定,但我访问还挺顺利的……

fonts.googleapis.com 的国内 CDN 比较少,只找到这么一篇帖子。

前端 CDNJS 库及 Google Fonts、Ajax 和 Gravatar 国内加速服务

用上面帖子里提供的 CDN,Next 的配置就可以这样:

font:
  enable: true
  host: //fonts.loli.net

官方文档

https://theme-next.org/docs/theme-settings/#Fonts-Customization

如果修改不生效

  1. 浏览器清理下缓存。
  2. 是部署后没效果还是本地就没效果?hexo shexo d 前使用 hexo clean 清理下。
  3. 部署后没效果的话,稍微等一下远程的缓存刷新。
  4. 本地没生效的话,CSS 文件夹有没有使用 CDN?
  5. 再不行,进主题的 CSS 文件,或后文里提到的 styles.styl.post-body 单独添加字体相关的 CSS。
  6. 尝试升级 hexo-theme……
  7. 如果仍不能正常显示,或者确定不是自己的问题,可以去 theme-next/hexo-theme-next 提 issue 。

关于本博客的样式

本博客的样式抄袭了 木子零の轨迹,两位大佬都公布了自己的源码,分别在 muzi502/blogElietio/Elietio.github.io ,有需要的可以参考。原理就是自定义 custom_file_path ,即 source/_data/** ,通过自定义的 CSS 覆盖默认样式。比如 样式的高级设置

  1. font-family 的规则是这样的:(1)优先使用排在前面的字体。(2)如果找不到该种字体,或者该种字体不包括所要渲染的文字,则使用下一种字体。(3)如果所列出的字体,都无法满足需要,则让操作系统自行决定使用哪种字体。 

  2. 利用 font-family 的规则:比如「font-family 应 该优先指定英文字体,然后再指定中文字体。否则,中文字体所包含的英文字母,会取代英文字体。」这样的问题。 

相关文章

评论区加载中……