Hexo 静态博客指南：本站是如何诞生的（中）（2020 年版）
本文详细记录一下本站的建立过程，以便查阅。对于具体的细节则不会做过多解释，主要展示步骤。这一篇主要讲述更换 NexT 主题以及后续维护的相关内容。
本文运行环境：
1 | npm: 6.14.7 |
请注意，本文现在有更新版本，对于需要全新安装的读者，请移步 Hexo 静态博客指南：本站是如何诞生的（2021 年版）。
更换主题
我们这里选择的是 NexT 主题。Hexo 支持许多主题，你也可以选择自己喜欢的主题。
安装 NexT
NexT 是非常流行的 Hexo 主题。根据这个网站，该项目几经易手，经历过很多不同的版本。我们现在当然是采用目前的最新版本。
首先我们运行 hexo -v 与 npm -v 查看一下 Hexo 与 Node.js 的版本，确保它们大于这个链接里所示的版本最低要求。
以下步骤主要参考了 NexT 官方文档。还是在博客的根目录里，运行如下命令：
1 | git clone https://github.com/next-theme/hexo-theme-next themes/next |
等待运行完毕，新主题就下载好了。这里需要区分的是，我们现在有了两个名为_config.yml 的文件。一个是根目录下的_config.yml，这代表着站点的配置文件；还有一个是 themes/next/_config.yml，这代表着这个主题的配置文件。要注意区分它们。
下一步，我们打开站点配置文件_config.yml，找到 theme 那一行并改为 theme: next，主题就更换完毕了。你可以运行 hexo clean; hexo g; hexo s 来查看效果。
设置 git submodule
如果此时你尝试使用 git add .，你会发现会有如下的 warning：
1 | warning: adding embedded git repository: themes/next |
这是因为 themes/next 文件夹来源于另外的 git 项目，因此无法上传。在这里有许多解决办法，其中一个办法是删除 themes/next 里的.git 文件夹。这并不是一个好办法，因为这样的话就无法再通过 git pull 更新 themes/next 模块。因此，比较好的办法是设置 git submodule。
注意，使用本文的办法后，将不再推荐修改 themes/next/_config.yml 文件。因为修改该文件可能在更新主题时会造成本地修改与远程更新的冲突。当然，这也可以通过 git stash、git pull、git stash pop 然后修复 conflicts 来解决，但总归是比较麻烦。如果你需要深度定制该主题，建议 fork 一份改主题源代码到自己的 GitHub 上，然后将自己 fork 后的仓库作为 submodule。具体的做法可以参考网上的其他教程。这里假设你不会再修改 themes/next/_config.yml 文件（放心，还有其他方法可以更改主题设置）。
在添加 submodule 之前先做一点准备工作：
1 | git rm -r --cached themes/next |
然后运行：
1 | git submodule add https://github.com/next-theme/hexo-theme-next themes/next |
这会在你的根目录下添加.gitmodules 文件，内容如下：
1 | [submodule "themes/next"] |
在这之后，如果你想更新 NexT 主题的代码，可以使用 git submodule update --remote 命令。你也可以进入 themes/next 文件夹使用 git pull。
让我们提交这一次修改：
1 | git add . |
修改主题配置
前文推荐不要修改 themes/next/_config.yml 文件。我们想要自定义一些配置，该怎么做呢？官方教程给出了答案。
在这里，有两种修改方式，一种是 Hexo-Way，也就是把所有设置都放在根目录的_config.yml 里。还有一种是 NexT-Way，也就是把主题设置放在 source/_data/next.yml 里。这里我们选择后者。
我们新建文件夹并复制文件：
1 | mkdir -p source/_data |
随后，你就可以修改 source/_data/next.yml 里的内容了。这里讲几个主要的配置。
主题样式与暗色模式
主题样式在# Schemes 下面。一共有四种样式，分别是 Muse，Mist，Pisces 和 Gemini。其中前两种是单栏样式，后两种是双栏样式，如果要更改，只需注释掉当前样式，再取消注释想要更改的样式即可。
在下方的 Dark Mode 选项里，你可以选择为网页开启暗色模式，只需要把 false 变成 true 即可。
菜单与侧边栏项目
在# Menu Settings 下面你可以选择开启菜单项目。它们都是默认关闭（被注释掉）的。需要哪一项，取消注释即可。
注意，除了 home 与 archives，其他的页面需要手动添加。比如，你想要开启 about 页面，那么就要在 Hexo 根目录下运行：
1 | hexo new page "about" |
随后在 source 文件夹下面就会生成 about 目录，里面有 index.md 文件。你可以更改文件内的标题，随后在 date 行下面加一句：
1 | + type: "about" |
如果需要还可以加上 comments: false 来为这个页面关闭评论（后文会讲到如何添加评论功能）。
就大功告成了。你可以随意编辑这个页面。你也可以自定义菜单项目，甚至可以嵌套项目，具体做法可以查看官方教程。
这里举个简单的例子，假如我们要新建一个菜单项目叫做 notes，首先在# Menu Settings 的 menu 下面新建一行：
1 | menu: |
图标的代码可以去 Font Awesome 网页上查找。随后如前面的例子，手动添加页面即可。如要添加自定义菜单的中文翻译，需要新建 source/_data/languages.yml 文件，然后写入如下内容：
1 | zh-CN: |
任何翻译都可以在这个文件里设置或覆盖。
此外，在# Sidebar Settings 下面可以找到关于侧边栏的一些设置。除了它本身的一些参数，你还可以设置其中的一些内容，比如 social 下面可以开启你的社交网络账号与主页。另外，搜索 back2top 还可以让你把回到首页的按钮放在侧边栏，并开启阅读进度百分比功能。
网站图标与头像
网站图标可以在# Site Information Settings 的 favicon 下面找到。默认读取的图标位于 themes/next/source/images/ 下面。我们当然不应该修改 themes/next 里面的内容，因此如果要更换，可以把图标放在 source/images/ 目录里（如果没有这个目录就自己新建）。教程还推荐了这个网站来生成你自己的图标。
头像则在侧边栏设置的# Sidebar Avatar 下面。你可以把头像放在 source/uploads/ 目录里（如果没有这个目录就自己新建）。
知识共享许可协议设置
Creative Commons 设置可以搜索 creative_commons。它支持多种协议，默认是 by-nc-sa。更多协议可以参考维基百科的解释。
代码块样式
你可以在这里查看并选择你喜欢的样式，随后搜索 codeblock 修改。你还可以打开复制按钮，方便读者复制代码块里的内容。
阅读进度、书签与 GitHub 横幅
搜索 reading_progress 即可开启阅读进度功能。还可以在 bookmark 开启书签功能，读者可以选择点击书签图标来保存阅读进度，下次进入这篇文章时就可以继续阅读。
下面的 github_banner 可以让你开启 GitHub 横幅，它会在网页右上角显示一个小横幅，直通你的 GitHub 主页。
字体设置
在# Font Settings 可以更改字体设置，NexT 允许你更改全局字体、网站标题字体、h1-h6 标题字体，文章字体与代码字体。如果你的定制程度比较高，还是参看官方教程比较好。
设置中英文自动空格
这个功能已经内置在 NexT 主题中。在 source/_data/next.yml 中搜索并开启 pangu 即可。
增加第三方服务
同样，官方教程还是比较详细的，解释了很多第三方插件的用法，囊括了数学公式、评论系统、网站统计与分析、评分与分享小部件、搜索功能、即时聊天室等等。这里只讲一下我个人开启的服务。
LeanCloud 阅读统计功能
这部分参考了这篇文章。
注册 LeanCloud 时，建议注册国际版，国内版要验证的东西比较多。然后新建一个应用，名字可以任意写。随后打开应用，点击存储条目下的结构化数据，然后点击创建 Class，名称为 Counter，其他保持默认。随后去设置里的应用Keys 记下 AppID 与 AppKey。
打开 source/_data/next.yml，搜索 leancloud_visitors，将其打开，填写刚才的 AppID 与 AppKey，security 也设置为打开。随后的步骤比较多且复杂，请参考上面的文章，但是介于现在 LeanCloud 又有更新，所以做一点补充说明。
首先，上面的参考文章里，需要打开 NexT 主题配置文件的时候，我们统一打开 source/_data/next.yml。要时刻记住 NexT 主题的目录不要修改。
其次，在博客配置文件_config.yml 里，在 theme:next 后面（你也可以添加到别的位置）添加的内容是：
1 | leancloud_counter_security: |
记得在这之前要安装：
1 | npm install hexo-leancloud-counter-security |
然后，在配置 deploy 的时候，因为我们多加了一项，所以应该改为：
1 | deploy: |
也就是每一个 type 前面都要加上 -。
随后，在设置 Counter 的权限时，我们在 add_field 与 create 均选择指定用户，随后在用户名里输入你用 hexo lc-counter register 注册的用户名，它会自动找到对应的用户。在设置完后，两项都应该显示 0 Role, 1 User。对于 delete，选择指定用户留空即可，会显示显示 0 Role, 0 User。
Valine 评论系统
在前一步的基础上，在 source/_data/next.yml 找到# Valine，将其打开，并且填写 appId 与 appKey。在这里，我们把 visitor 设置为 true，随后把上一步的 leancloud_visitors 下的 enable 设置为 false，因为两者之间有冲突。
不蒜子网页计数器功能
这个功能可以显示网站的浏览量和访客数。在 source/_data/next.yml 里找到 busuanzi_count，将其打开，因为我们已经开启了 LeanCloud 的计数功能，所以将 post_views 关掉（否则文章内部的阅读次数会有异常），其他保持打开即可。
如果在本地测试，你会发现统计数据非常大，这是因为不蒜子通过域名统计，所以 localhost:4000 的数字会比较大，不必担心。
Local Search 搜索功能
首先在根目录安装：
1 | npm install hexo-generator-searchdb |
随后，在博客配置文件_config.yml 里加入：
1 | search: |
然后在 source/_data/next.yml 里打开 local_search。
Word Counter 字数统计与阅读时长功能
首先在根目录安装：
1 | npm install hexo-word-counter |
随后，在博客配置文件_config.yml 里加入：
1 | symbols_count_time: |