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那一行后面便可。