Hexo Next 主题如何修改字体

发表于 更新于 分类于 阅读次数：
本文介绍如何在应用了 Next 主题的 Hexo 博客中修改字体，包括主题基础配置与自定义样式覆盖。基于 Hexo 7.2.0 和 NexT version 8.19.2。

Next修改字体

Next 提供了基础的字体配置方案，例如：

1
2
3
4
5
6
7
font:
  enable: false
  host:
  global:
    external: true
    family: Lato
    size:

在主题Next主题的scripts\helpers\font.js中有这样一段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// https://developers.google.com/fonts/docs/getting_started
module.exports = function() {
  const config = this.theme.font;

  if (!config || !config.enable) return '';

  const fontStyles = ':300,300italic,400,400italic,700,700italic';
  const fontHost = config.host || 'https://fonts.googleapis.com';

  // Get a font list from config
  let fontFamilies = [];
  ['global', 'title', 'headings', 'posts', 'codes'].forEach(item => {
    if (config[item] && config[item].family && config[item].external) {
      fontFamilies = fontFamilies.concat(config[item].family.split(','));
    }
  });

  fontFamilies = fontFamilies.map(name => name.trim().replace(/\s/g, '+') + fontStyles);
  fontFamilies = [...new Set(fontFamilies)].join('%7C');

  // Merge extra parameters to the final processed font string
  return fontFamilies ? `<link rel="stylesheet" href="${fontHost}/css?family=${fontFamilies}&display=swap&subset=latin,latin-ext">` : '';
};

配置高级样式：

上面的配置只能展示一个

原理很简单，可以使用自定义样式去覆盖 Next 的默认样式。

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

1
2
3
4
5
6
7
8
9
10
11
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

对于我们要修改字体

Next字体的修改依赖于谷歌的网址https://fonts.googleapis.com

可以在https://fonts.google.com/里面找自己想要的字体。

因此可能会出现加载比较慢的情况。

可能需要提速

https://github.com/googlefonts/josefinsans

参考

  1. Hexo Next 主题字体相关配置
  2. Hexo更换为Google Fonts思源宋体！
  3. Hexo-NexT-字体设置
  4. fonts.googleapis.com访问太慢导致站点加载很慢
  5. 解决页面中引用了谷歌字体库访问缓慢的问题