hexo + next主题高级配置

前言

配置完yilia后，发现缺少一些东西，百度之下，找到了特别喜欢的主题——next。跟大家分享配置经验。

• 首先，本文是根据我自己的博客配置而写的，并不全面，其他美化配置在文末提供了相应的参考链接。欢迎浏览我的博客：destiny'Note
• 其次，本文中有部分自己的改进方案，并非全部摘自他文

我的博客原文链接：hexo + next主题高级配置

一、主题下载

git clone https://github.com/iissnan/hexo-theme-next.git themes/next

在根目录_config.yml文件中：

theme: next

注意：所有配置文件内，每一项配置的冒号后面都要加上空格

二、综合设置

1. 语言设置

在根目录_config.yml文件中：

language: zh-Hans

编辑主题目录下language/zh-Hans.yml中英文的对应关系

2. 修改字体大小、样式

在主题目录配置文件下，查找font：

font:
  enable: true

  # Uri of fonts host. E.g. //fonts.googleapis.com (Default).
  host:

  # body元素的字体设置
  global:
    external: true
    family: Lato
    size: 18

  # 标题的基础字体设置
  headings:
    external: true
    family:
    size: 30

  # 文章字体设置
  posts:
    external: true
    family: 18

  # logo字体设置
  logo:
    external: true
    family:
    size: 30

  # 代码块字体设置
  codes:
    external: true
    family:
    size: 13

把false改为true，并修改了size的数值，单位是像素。如有需要可自行改变字体。

另外提供一种方法，供会前端的小伙伴参考：
打开\themes\next\source\css\ _variables\base.styl文件，修改里面的字体大小

3. 主题选择

在主题配置文件中，查找scheme：

# 主题中的主题
# scheme: Muse
scheme: Mist
# scheme: Pisces
# scheme: Gemini

选择你喜欢的，去掉前面的#号，其他加上#号。即注释掉的意思。

4. 背景的设置

在主题配置文件中，查找canvas：

# Canvas-nest
canvas_nest: false
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false
# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: true

开启相应的背景，只要把对应的false设置为true，记得把其他都改为false

5. 修改内容区域宽度

Next 对内容的宽度的设定如下：

• 700px，当屏幕宽度 < 1600px
• 900px，当屏幕宽度 >= 1600px
• 移动设备下，宽度自适应

在主题目录下的 source\css_variables\custom.styl 文件，新增变量：

// 修改成你期望的宽度
$content-desktop = 700px
// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

此方法不适用于 Pisces Scheme， Pisces Scheme 编辑themes\next\source\css\_schemes\Picses\_layout.styl文件，更改以下 css 选项定义值：

.header {width: 1150px;}
.container .main-inner {width: 1150px;}
.content-wrap {width: calc(100% - 260px);}

三、文章模块的美化

1. 文章中添加居中模块

文章的Markdown文件中写上：

<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
&