hexo next主题简单美化

改变页面的字体大小
打开 themes\next\source\css_variables\base.styl，该文件保存了一些基础变量的值，我们找到$font-size-base，将值改为16px。

// Font size  
$font-size-base           = 16px

这个文件里定义了很多常量，有兴趣的可以自己去琢磨琢磨，修改一些其他的变量。

文章启用tags和categories
可能是该版本的NexT主题的关系，在我第一次使用NexT主题时，折腾了很久都没办法让菜单栏里的tags和categories的页面生效，一直显示白屏。后来终于在知乎找到答案，首先我们需要将某篇文章设置tags和categories，如下：

---
title: Test
tags:
  - MyTag
categories:
  - MyCategory
date: 20xx-xx-xx xx:xx:xx
---

接下来是重点了，首先确定是否已经在主题配置文件中启用了tags和categories这两个菜单，如下：

menu:
  home: / || fas fa-home
  archives: /archives/ || fas fa-archive
  categories: /categories/ || fas fa-th
  tags: /tags/ || fas fa-tags

接着确定是否在source目录下是否已经存在tags和categories这两个文件夹，如果不存在需要运行下边的命令：

hexo n page tags  
hexo n page categories

运行之后会在source目录下生成对应的两个文件夹，在文件夹下会存在一个index.md文件，打开这两个index.md文件，分别添加type: tags和type: categories，如下：

---
title: 标签
date: 20xx-xx-xx xx:xx:xx
type: tags
---

---
title: 分类
date: 20xx-xx-xx xx:xx:xx
type: categories
---

接下来重新使用本地调试三连，就可以看到tags和categories这两个菜单的页面显示正常了。

去掉图片边框
NexT主题默认会有图片边框，不太好看，我们可以把边框去掉。打开 themes\next\source\css_custom\custom.styl，添加如下CSS代码：

/* 去掉图片边框 */
.posts-expand .post-body img {
    border: none;
    padding: 0px;
}
.post-gallery .post-gallery-img img {
    padding: 3px;
}

修改语法高亮的主题
语法高亮就是在引入代码时让代码呈现特定的样式，而在Markdown文件中语法高亮的使用方法是在引入代码的前一行添加三个反引号加上使用的语言名字，然后在引入代码的下一行使用三个反引号结尾。

如下所示的格式，就表示html代码的语法高亮：

<h2>Hello World!</h2>

由于NexT默认的语法高亮的主题比较一般，我们可以换成其他的主题，比如我所使用的就是黑色的主题。

打开主题配置文件，修改如下配置：

# 语法高亮主题
# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties

指定Markdown的解析器
上边我们设置了语法高亮后，虽然在本地调试没有问题，然而当我们将博客部署到GitHub Pages和 Coding Pages后却发现，前者的页面不支持语法高亮，而后者支持。百度后才知道原来是因为 GitHub 默认使用的 Markdown 解析器不支持语法高亮，解决方法如下：

打开站点配置文件_config.yml，在末尾添加如下内容：

markdown: redcarpet
redcarpet:
    extensions: ["fenced_code_blocks", "autolink", "tables", "strikethrough"]

接下来重新执行部署三连命令，就会发现 GitHub Pages 上部署的页面语法高亮显示成功了。