较为优雅的静态博客之旅（二）：更换主题与域名

发表于 更新于 分类于 Disqus： 本文字数： 1.9k

前言

本文承接前文，以 NexT 主题为例，讲述如何更换主题并对其进行配置。

安装

Hexo 支持添加主题。不同的主题可以将博客渲染成各式各样的美观样式，还能对你的博客添加额外功能提供助力。NexT 是一个知名度极高并且至今仍在维护的主题，我们以它为例讲解如何安装主题。在此之前，你应该已经安装好 Hexo 并建立了自己的博客。

NexT 历史版本有多个库，我们将以最新版本进行讲解。

回到博客根目录，在此路径启动终端。输入

1
npm install hexo-theme-next@latest

安装 NexT。传统的方式是将下载的主题放到 HexoSite->themes 文件夹下，但是这种方式对版本升级并不友好。因此我们使用 NPM 进行安装，安装后，NexT 主题的路径是 HexoSite\node_modules\hexo-theme-next 。以后，我们就可以使用 NPM 命令管理升级了。

安装完成后，打开 NexT 主题目录，可以看到 Hexo 根目录下和 NexT 主题的路径下都有名为 _config.yml 的配置文件。为了避免混淆，我们在后面称它们为 Hexo 配置文件和 NexT 配置文件。本节后续的主要工作主要都在其中进行。

这两个文件使用一种名为 YAML 的标记语言。Hexo 和 NexT 通过 YAML，以键值对（即先写一个设置项的名字，再写其被设置的值）的形式存储自定义设置。在这里我们不需要太在乎其语法，只需要知道形式是 key: value（中间空格不可省略），且缩进和大小写都很敏感即可。

启用主题和配置 Hexo

Hexo 的设置

在之前 部署 一节我们实际上就设置过 Hexo 配置文件，现在我们更详细地对其进行配置。
文件的开头，可以写下网站的名字、侧栏的欢迎语以及作者等。如本站的配置为：

1
2
3
4
5
6
7
8
# Site

title: 'LeeKa 的酒馆'
subtitle: '欢迎，旅人！坐下来享受一下暖烘烘的炉火吧。'
description: '代码、音乐和游戏，一起来聊聊吧'
keywords: sample keywaord
author: LeeKa
......

我们现在启用主题。将查找 theme，将其值替换为 next：

1
theme: next

此时我们 hexo s 启动本地服务，可以看到网页布局发生了改变。

其余 Hexo 原生配置可以查阅文档进行。接下来我们对 NexT 主题进行设置。

NexT 主题的设置

如果我们直接修改 NexT 配置文件，那么升级 NexT 时，这些自定义设置就会被覆盖而丢失。因此更好的做法是使用代替配置文件。这是 Hexo 官方支持的一种功能，具体来说，我们不修改 NexT 配置文件，而将这些配置写在 Hexo 配置文件中。这有点像 VSCode 中的默认设置和工作区设置的关系，后者会覆盖前者设置的值。这样就不会因为升级而丢失设置了，因为这些设置写在 NexT 主题文件之外。

更详细地来说，我们要这么做：

假设这是我们需要修改的配置：

1
2
3
4
5
6
7
# NexT 配置文件

# Schemes
# scheme: Muse
# scheme: Mist
scheme: Pisces
# scheme: Gemini

我们并不直接修改它而是：

1
2
3
4
5
6
7
8
9
# Hexo 配置文件

theme_config:
  # Schemes
  # scheme: Muse
  # scheme: Mist
  scheme: Pisces
  # scheme: Gemini
  # 所有的配置信息都在theme_config的基础上缩进了相同的空格数

下面是我建议进行配置的功能和对应的条目名：

  • 选择喜欢的布局方案：scheme
  • 设置你的头像：avatar 下 url。推荐将头像上传至图床，使用图床的链接。
  • 设置你的其它网络账号的跳转链接：social 下按需设置
  • 设置喜欢的代码高亮风格和复制按钮：codeblock 下的 theme 、 copy_button 中的 enable
    下面是一些需要详细阐述的设置

评论

我使用 Disqus 支持的评论功能，优点是无需备案，缺点是评论者需要注册 Disqus 账号，且国内网络不友好。要使用此功能，需要先注册账号，并选择喜欢的 Shortname（推荐与网站保持一致）。你无需选择 What platform is your site on?，选择最下方的"我的平台不在列表中跳过即可"。

随后，回到配置文件中，在 comments 的 active 项中写为 disqus，并在下面的 disqus 中启用它。即

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
theme_config:
  # …………其它的设置
  # Multiple Comment System Support
  comments:
    # Available values: tabs | buttons
    style: tabs
    # Choose a comment system to be displayed by default.
    # Available values: disqus | disqusjs | changyan | livere | gitalk | utterances
    active: disqus
    # Setting `true` means remembering the comment system selected by the visitor.
    storage: true
    # Lazyload all comment systems.
    lazyload: false
    # Modify texts or order for any naves, here are some examples.
    nav:
      disqus:
       text: Load Disqus
       order: -1
      #gitalk:
      #  order: -2
  

  # Disqus
  # For more information: https://disqus.com
  disqus:
    enable: true
    shortname: # 填入你在 Disqus 填写的shortname
    count: true

站内搜索

安装对应插件（由 NexT 团队支持）

1
npm install hexo-generator-searchdb

在 Hexo 配置文件的 NexT 的 代替配置文件 条目中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Local search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

字数统计

安装对应插件（由 NexT 团队支持）

1
npm install hexo-word-counter

在 Hexo 配置文件的 NexT 的 代替配置文件 条目中：

1
2
symbols_count_time:
  separated_meta: true

LaTeX 数学公式支持

如果我们需要在 Markdown 中写一些数学公式，那么一个简单的办法就是左右各用一个或者两个美元符号包裹 LaTeX 代码实现行内公式或者公式块。

LaTeX 数学公式语法这里不做讲解，搜索时注意它不是 LaTeX 语法即可。

但是 Hexo 自带的渲染器（渲染器即将 Markdown 转化为对应的网页代码的模块）对于 LaTeX 支持并不好。我们需要换用其它的渲染器。Hexo 有若干的渲染器，它们使用的渲染引擎大体上有两个：MathJax 和 Katex。简单来说，MathJax 支持的格式更全，但是渲染速度更慢；KaTeX 支持的格式更少但是速度更快。

鉴于 VSCode 的 Markdown 预览默认采用的就是 KaTeX，我倾向于使用 KaTeX ，这样在后续 VSCode 中预览时，所得到的渲染信息能够更加符合晚点实际渲染结果。于是我们可以选择的渲染器主要是 hexo-renderer-markdown-it-plus 和 hexo-renderer-markdown-it 。后者需要自行安装 markdown-it-katex 插件，不推荐，我们使用 markdown-it-plus。

在 Hexo 目录下终端运行下列命令

1
2
npm un hexo-renderer-marked
npm i hexo-renderer-markdown-it

这表示卸载 Hexo 原生的渲染器 hexo-renderer-marked 并安装新的渲染器 hexo-renderer-markdown-it。

在 Hexo 配置文件中，NexT 的代替配置文件条目下修改为

1
2
3
katex:  
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex  
    copy_tex: true

在不是 代替配置文件条目 的地方，添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# LaTeX fomula

markdown_it_plus:
  highlight: true
  html: true
  xhtmlOut: true
  breaks: false
  langPrefix:
  linkify: true
  typographer: false
  quotes:
  plugins:
    - plugin:
        name: markdown-it-mark
        enable: false

运行 hexo clean 清理数据，hexo s 检查重新生成的渲染信息。

目前还是有不支持 equation 等格式的问题，怀疑是插件使用的版本较老。