Hexo 静态博客指南：建站教程（中）

本文最初发布于我的个人博客Bambrow's Blog，采用 BY-NC-SA 许可协议，转载请注明出处。若有后续更新，将更新于原博客。欢迎去我的博客阅读更多文章！

本文详细记录一下站点建立过程，以便查阅。对于具体的细节则不会做过多解释，主要展示步骤。这一篇主要讲述更换NexT主题以及后续维护的相关内容。

本文运行环境：

npm: 6.14.7
hexo: 4.2.1
hexo-cli: 3.1.0
NexT: 8.0.0-rc.4

更换主题

我们这里选择的是NexT主题。Hexo支持许多主题，你也可以选择自己喜欢的主题。

安装NexT

NexT是非常流行的Hexo主题。根据这个网站，该项目几经易手，经历过很多不同的版本。我们现在当然是采用目前的最新版本。

首先我们运行hexo -v与npm -v查看一下Hexo与Node.js的版本，确保它们大于这个链接里所示的版本最低要求。

以下步骤主要参考了NexT官方文档。还是在博客的根目录里，运行如下命令：

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：

warning: adding embedded git repository: themes/next
hint: You've added another git repository inside your current repository.
hint: Clones of the outer repository will not contain the contents of
hint: the embedded repository and will not know how to obtain it.
hint: If you meant to add a submodule, use:
hint:
hint: 	git submodule add <url> themes/next
hint:
hint: If you added this path by mistake, you can remove it from the
hint: index with:
hint:
hint: 	git rm --cached themes/next
hint:
hint: See "git help submodule" for more information.

这是因为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之前先做一点准备工作：

git rm -r --cached themes/next

然后运行：

git submodule add https://github.com/next-theme/hexo-theme-next themes/next

这会在你的根目录下添加.gitmodules文件，内容如下：

[submodule "themes/next"]
	path = themes/next
	url = https://github.com/next-theme/hexo-theme-next

在这之后，如果你想更新NexT主题的代码，可以使用git submodule update --remote命令。你也可以进入themes/next文件夹使用git pull。

让我们提交这一次修改：

git add .
git commit -m "change theme"
git push origin master

修改主题配置

前文推荐不要修改themes/next/_config.yml文件。我们想要自定义一些配置，该怎么做呢？官方教程给出了答案。

在这里，有两种修改方式，一种是Hexo-Way，也就是把所有设置都放在根目录的_config.yml里。还有一种是NexT-Way，也就是把主题设置放在source/_data/next.yml里。这里我们选择后者。

我们新建文件夹并复制文件：

mkdir -p source/_data
cp themes/next/_config.yml source/_data/next.yml

随后，你就可以修改source/_data/next.yml里的内容了。这里讲几个主要的配置。

主题样式与暗色模式

主题样式在# Schemes下面。一共有四种样式，分别是Muse，Mist，Pisces和Gemini。其中前两种是单栏样式，后两种是双栏样式，如果要更改，只需注释掉当前样式，再取消注释想要更改的样式即可。

在下方的Dark Mode选项里，你可以选择为网页开启暗色模式，只需要把false变成true即可。

菜单与侧边栏项目

在# Menu Settings下面你可以选择开启菜单项目。它们都是默认关闭（被注释掉）的。需要哪一项，取消注释即可。

注意，除了home与archives，其他的页面需要手动添加。比如，你想要开启about页面，那么就要在Hexo根目录下运行：

hexo new page "about"

随后在source文件夹下面就会生成about目录，里面有index.md文件。你可以更改文件内的标题，随后在date行下面加一句：

+ type: "about"

如果需要还可以加上comments: false来为这个页面关闭评论（后文会讲到如何添加评论功能）。

就大功告成了。你可以随意编辑这个页面。你也可以自定义菜单项目，甚至可以嵌套项目，具体做法可以查看官方教程。

这里举个简单的例子，假如我们要新建一个菜单项目叫做notes，首先在# Menu Settings的menu下面新建一行：

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat
+ notes: /notes/ || fa fa-sticky-note

图标的代码可以去Font Awesome网页上查找。随后如前面的例子，手动添加页面即可。如要添加自定义菜单的中文翻译，需要新建source/_data/languages.yml文件，然后写入如下内容：

zh-CN:
  menu:
    notes: 笔记

任何翻译都可以在这个文件里设置或覆盖。

此外，在# 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后面（你也可以添加到别的位置）添加的内容是：

leancloud_counter_security:
  enable_sync: true
  app_id: 你的AppID
  app_key: 你的AppKey
  username: 你用"hexo lc-counter register"注册的用户名
  password: 你用"hexo lc-counter register"注册的密码

记得在这之前要安装：

npm install hexo-leancloud-counter-security

然后，在配置deploy的时候，因为我们多加了一项，所以应该改为：

deploy:
  - type: git
    repo: 你的GitHub目录地址
    branch: master
  - type: leancloud_counter_security_sync

也就是每一个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搜索功能

首先在根目录安装：

npm install hexo-generator-searchdb

随后，在博客配置文件_config.yml里加入：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

然后在source/_data/next.yml里打开local_search。

Word Counter字数统计与阅读时长功能

首先在根目录安装：

npm install hexo-word-counter

随后，在博客配置文件_config.yml里加入：

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4
  wpm: 275
  suffix: "mins."

需要注意的是，如果插件需要安装新的包，而你像我一样设置了自动部署，那么你可能需要更新一下你的工作流，在安装Hexo那一步加一些步骤，安装这些依赖。修改.github/workflows/main.yml的内容，将新的依赖安装写在npm install那一行后面即可。