Hexo-Butterfly 主题配置

前言

2020 年 6 月，我入坑 Hexo + Github 的懒人模式。Hexo 主张用 markdown 写博文，借助强大的 Theme 库来一件配置主题；而 Github 能提供服务器的挂载（虽然国内访问会不稳定）。我当时选择的主题是 Hiker。

随着时间的推移，我不再满足于 Hiker 的风格和简单功能，于是决定从头开始配置 Hexo，并做一些记录。

搭建 Hexo

首先安装 Node.js（它会附带安装 npm 包管理器）。

根据 hexo 官网首页的命令在本地创建 blog 文件夹。

npm install hexo-cli -g
hexo init blog
cd blog
npm install

在 shell 里输入 hexo server 命令后，就能在 localhost:4040 展示网页效果（它还会动态检测你的本地变更并动态更新）。如果打开网页后出现以下报错：

1	extends includes/layout.pug block content #recent-posts.recent-posts include includes/recent-posts.pug include includes/pagination.pug

需要再在 shell 里安装一下：

1	npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

此时打开 localhost:4040 会出现以 landscape 为主题的网页，有一篇默认的 Hello World 文章。

更换 Butterfly 主题

Hexo 提供了一个官方主题网址供大家选择主题。我以前用的 Hiker 在几年前就不再维护了，功能上也存在很多的不足。最后，我综合好看程度、可拓展性、功能复杂性和社区活跃性，选择换成了 Butterfly 主题。

1 2	git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly npm install hexo-renderer-pug hexo-renderer-stylus --save

blog 文件夹下的 _config.yml 是全局配置文件，我们需要把 theme 从 landscape 换成 butterfly。

官方建议再新建个 _config.butterfly.yml 作为全局配置文件（大概是不想让适用于 butterfly 的全局修改变成所有主题的全局修改，把两者解耦开来），但我选择直接在 _config.yml 上做全局配置。

themes/butterfly/_config.yml 则是 butterfly 主题支持的各种功能的配置文件，它比全局配置要复杂很多。

butterfly 文档里介绍了对应的各种功能，我们可以根据自己的喜好来配置。

修复图片显示问题

之前用 Hexo 写博客的时候，我习惯用 ![](<title>/<image>.png) 的形式来引用图片，其中 <title>.md 是当前博文的文件名，<title> 是它对应的专属资源文件夹。

配置 Butterfly 时为了规避 Hexo 等工具升级的麻烦，我选择一切工具/配置重装，只把 source 下的 markdown 文件拷贝过去。然后我就发现一个问题：无论是 hexo server 还是 hexo deploy 命令，图片都无法显示。

经过反复的搜索和试验，我终于成功把图片显示出来了！采取的步骤参见这里。首先我们在 _config.yml 全局配置里把资源文件夹开关 post_asset_folder 设置成 true。然后我们安装一个图片间接引用的插件：

1	npm install https://github.com/CodeFalling/hexo-asset-image --save

最后我们打开 node_modules/hexo-asset-image/index.js，把内容替换（我们相当于修复了一个 bug）。

数学渲染的配置

作为一个 Latex 控，我首先关注的是 markdown 的公式能否被正确地渲染，特别是多行公式和复杂公式。

butterfly 提供了 mathjax 和 katex 两种渲染功能，我们可以在在 themes/butterfly/_config.yml 里全局开启，或者在需要的博文里单独开启。实测发现 mathjax 不支持多行公式和花括号。

最终我选择了 katex，它速度快、渲染效果也好。我们首先要更换渲染器。

npm un hexo-renderer-marked --save 
npm un hexo-renderer-kramed --save
npm i hexo-renderer-markdown-it --save 
npm install @neilsustc/markdown-it-katex --save

在 themes/butterfly/_config.yml 里把 katex 开启成true，然后在 _config.yml 里加上这段话：

markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false

推送至 github

安装 github 的自动发布工具。

1	npm install hexo-deployer-git --save

在 _config.yml 里修改 deploy 规则。

deploy:
  type: git
  repo: git@github.com:jiangshibiao/jiangshibiao.github.io.git
  branch: master

命令行里输入 hexo deploy 即可把网站部署到 github 上。