2020最新版Next主题配置文件修改方式

Posted on In

前言：因为没有修改过的 Next 博客里的排版对于看过无数优秀版面的读者们实在是不太友好，所以需要修改下展示博客的页面。这里我只修改的两个地方的样式：一个是行距，另一个是字体的大小。

但是由于最新版的 Next 主题的主题配置文件修改方式已经发生改变了，所以下面展示的是最新版的配置方式。我们现在可以直接在站点配置文件的同名目录下新建一个名为_config.next.yml文件，首次使用还请将官方主题配置文件全部复制到这里，之后对于主题配置的修改就在这里修改，不再对克隆下来的主题文件夹里的配置文件进行修改。

然后在里面设置启用custom_file_path.variable

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
#head: source/_data/head.njk
#header: source/_data/header.njk
#sidebar: source/_data/sidebar.njk
#postMeta: source/_data/post-meta.njk
#postBodyEnd: source/_data/post-body-end.njk
#footer: source/_data/footer.njk
#bodyEnd: source/_data/body-end.njk
-  #variable: source/_data/variables.styl
+  variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
#style: source/_data/styles.styl

然后在博客根目录/source/文件夹下新建_data文件夹，并且在_data文件夹下新建文件variables.styl

1
touch variables.styl

在这个文件里我们书写关于修改主题行高的配置，写入

1
2
// Global line height
$line-height-base         = 2;

这里我将全局文章行高设置为2，阅读起来文字效果较为友好。

那么在哪里设置字体大小呢？全局字体的大小配置我们可以在博客根目录下的_config.next.yml中找到：

1
2
3
4
5
6
 font:
   global:
     external: true
     family: Noto Serif SC
-    size:
+    size: 0.9

因为这里的 size 是以 em为单位的，而默认的就是 1 em，也就是16px，我这里设置的是0.9(14.4px)。

注意这里只能保留1位小数，如果设置为0.85渲染出来的也只是0.8

好了，关于博客文章行距和字体大小的设置就到这里了，关于新版 Next 主题的配置还在不断探索中，一起优化我们的博客观感吧！

Reference

[1] custom-files官方文档设置: https://theme-next.js.org/docs/advanced-settings/custom-files.html