Hexo NexT：设置背景图片以及本地字体

Posted on In

明明学业繁重，为了让博客更顺眼一点还是花了很多时间和精力研究主题基础上的个性化 🥱 配置文件中包含的个性化设置都比较直观，就不多做赘述。文章主要针对一些需要底层操作的个性化设置方法进行整理，并且这些设置在我的博客页面中都会被实际使用，可以作为预览参考。

此次整理的是背景图片和本地字体的解决方案，主要是对stylus文件进行修改，文末附加了参考调试思路。我对于css一窍不通，虽然成功达成了目标，但对于各类的问题解决方法无法做到详尽具体的解释 🤐

环境

  • Hexo：5.4.0
  • NexT：8.2.2

背景图片

背景图片的设置方法主要是对stylus文件的修改，main.styl文件中支持加入个性stylus文件的导入，以实现背景图片的显示。这部分内容引用了 Charles Li 博主的博客文章（博主初中生真的厉害）👍

  1. 添加图片资源

    在Next主题的images目录 themes\next\source\images 目录中加入想要设置成为背景的图片，本文以 back.jpg 为例

  2. 创建个性化stylus文件

    在Next主题的css目录 themes\next\source\css 下创建 _custom 文件夹。在此文件夹中创建 style.styl 文件，写入代码：

    1
    2
    3
    4
    5
    6
    7
    body { 
    background: url("/images/back.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 50%;
    background-size: cover
    }

    参数解释：

    • background：图片url
    • background-repeat：设置图片是否重复填充
    • background-attachment：设置图片是否固定(不随页面滚动)
    • background-position：设置图片位置
    • background-size：设置图片拉伸大小

    注：由于css格式要求严格，制表符 \t 和空格混用会报错，请不要使用制表符进行排版 😅

  3. 修改main.styl

    回到Next主题css目录 themes\next\source\css ，在 main_styl 文件最后的 Custom Layer 段加入代码：

    1
    @import "_custom/style.styl";

    整体示例：

    1
    2
    3
    4
    5
    6
    7
    ...
    // Custom Layer
    // --------------------------------------------------
    @import "_custom/style.styl";

    for $inject_style in hexo-config('injects.style')
      @import $inject_style;

    这步做完就可以重新生成文件并远程部署或者本地预览效果了 🎈

本地字体

NexT主题在配置文件中提供了字体的个性化设置功能，但每次加载需要向Google Font发出请求，经常造成网页加载缓慢或字体加载失败的情况。此处提供本一种字体本地化的解决方案（麻烦但一劳永逸）

  1. 配置文件设置

    next主题提供了字体设置，每次都需要获取Google Font字体，因此需先启用设置，从而提取出应答代码。

    打开next主题配置文件，找到 Font Setting 部分，启用 Font 设置，同时添加 host，这里使用中国科学技术大学的国内镜像。

    注：此处host可以百度 “google font 国内镜像” 查询，原谷歌url可能出现连接失败的情况。

    1
    2
    3
    4
    5
    6
    7
    ...
    font:
      enable: true

      # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
      host: https://fonts.proxy.ustclug.org
    ...

    在 Google Fonts 中查找想要的字体，设置 global 字体 family，此处以 Noto Serif SC 为例

    1
    2
    3
    4
    5
    # Global font settings used for all elements inside <body>.
    global:
      external: true
      family: Noto Serif SC
      size: 1

    此时刷新博客页面，若设置没问题且host请求成功，则会出现字体效果。

    注：连接失败可以尝试更换国内镜像地址。若速度能接受可略过后面的字体本地化步骤 🙂

  2. 获取respond

    f12 并刷新博客页面，查看网络请求，可以发现向host发送了一条请求 css?family... ，查看响应信息(respond)，若响应失败可尝试更换host。

    在next主题 _custom 目录 themes\next\source\css\_custom 中新建文件 fonts.styl ，若无该目录则新建一个。复制并保存响应信息至该文件中，不同的字体信息量可能会不同，我这里有2943行 😕 部分代码如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ...
    /* [6] */
    @font-face {
      font-family: 'Noto Serif SC';
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/notoserifsc/v8/H4c8BXePl9DZ0Xe7gG9cyOj7mgq0SzUpCNMKEN0nmGnGv-OMEQDgKS-k5SiuioPhBdQcziZZTQ.6.woff2) format('woff2');
      unicode-range: ...
    }
    /* [21] */
    @font-face {
      font-family: 'Noto Serif SC';
      font-style: normal;
    ...

  3. 字体文件下载

    观察上步获取的响应文件，可以发现是从指定 url 提取字体文件进行加载，因此需将上步所有 url 中的字体资源文件下载至本地（是的我下了303个文件）🤒

    注：可以使用正则表达式提取下载链接进行批量下载

    在 next 主题 source 目录中新建 fonts 文件夹，将下载的全部文件放在该文件夹中。

  4. 创建stylus文件

    由于已经实现了字体资源本地化，需将响应信息文件 fonts.styl 中全部 url 原始目录替换为本地目录 /fonts，此处可使用正则表达式进行替换。

    示例：

    1
    2
    3
    4
    5
    # 原始
    scr: url(https://fonts.gstatic.com/s/notoserifsc/v8/H4c8BXePl9DZ0Xe7gG9cyOj7mgq0SzUpCNMKEN0nmGnGv-OMEQDgKS-k5SiuioPhBdQcziZZTQ.6.woff2) format('woff2')

    # 替换后
    scr: url(/fonts/H4c8BXePl9DZ0Xe7gG9cyOj7mgq0SzUpCNMKEN0nmGnGv-OMEQDgKS-k5SiuioPhBdQcziZZTQ.6.woff2) format('woff2')

  5. 修改main.styl文件

    同背景图片修改步骤，打开next主题css目录 themes\next\source\css 中的 main.styl 文件，在custom layer段添加代码：

    1
    @import "_custom/fonts.styl";

    整体示例（包括了第一部分的背景图片stylus文件）：

    1
    2
    3
    4
    5
    6
    7
    8
    ...
    // Custom Layer
    // --------------------------------------------------
    @import "_custom/style.styl";
    @import "_custom/fonts.styl";

    for $inject_style in hexo-config('injects.style')
      @import $inject_style;

  6. 禁用配置文件字体设置

    由于字体资源文件已经本地化，无需发起请求获取资源。

    打开next主题配置文件，在 Font Settings 段的global部分禁用external外部获取。

    1
    2
    3
    4
    5
    # Global font settings used for all elements inside <body>.
    global:
      external: false
      family: Noto Serif SC
      size: 1

    此时刷新网页，字体已经替换成功了😉。

调试

由于上述步骤基本都是对stylus文件的修改，因此调试时可以观察网页生成的css文件

  1. 查看网页main.css

    浏览器中 f12 查看网页 main.css 文件，拉到最下可以看到前两部分import的css代码

    可以根据改代码观察stylus文件中的代码是否正确导入，也可以通过本地和远程部署的main.css代码对比观察区别，以发现问题所在 🧐

参考文章

Hexo NexT主题自定义背景图片

国内外优秀前端 CDN，Google Fonts 国内镜像

HEXO_NexT 使用本地字体 | PanFan Studio