1 推荐主题

butterfly 的默认 layout 很好，尤其对于内容比较多的 blog，安装方法如下：

1
2
3
4
npm install hexo-renderer-pug hexo-renderer-stylus --save
npm install hexo-theme-butterfly
cp node_modules/hexo-theme-butterfly/_config.yml _config.butterfly.yml
vi _config.yml # 修改 theme: butterfly

2 正常显示 Latex 公式

2.1 切换渲染器

切成 root 权限，安装 pandoc:

1
apk add pandoc

2.2 安装插件

这个插件能支持 $ 号模式的 Latex 公式：

1
npm install hexo-filter-mathjax

2.3 配置文件

修改 _config 文件如下：

(我直接把插件 github 说明中的配置文件拷过来了)

1
2
3
4
5
6
7
8
mathjax:                                                  
  tags: none
  single_dollars: true
  cjk_width: 0.9
  normal_width: 0.6
  append_css: true                                             every_page: false
  packages: 
  extension_options: {}
  • 修改主题配置文件 _config.butterfly.yml：
1
2
3
4
# MathJax                                         
mathjax:              
  enable: true                      
  per_page: true

3 使用 pandoc 渲染器

切换 hexo-renderer-pandoc 后，公式倒是能正常显示，但是图片，文本格式需要按 pandoc 的 markdown 格式修改，因此，做了批量调整：

  • 换行前加两个空格。
  • 图片使用绝对路径。
  • 标题前两个回车。
  • 把本地图片地址变为绝对路径。

4 构建标签和分类界面

4.1 标签界面

1
2
3
4
5
6
7
8
$ hexo new page "tags"
$ vi ~/.hexo/source/tags/index.md
加如下内容
---
type: "tags"
layout: "tags"
comments: false
---

4.2 分类界面

1
2
3
4
5
6
$ hexo new page "categories"
$ vi ~/.hexo/source/categories/index.md
加如下内容
---
type: categories
---

4.3 自动生成分类

一般分类在 md 的文件头中设置，形如：

1
2
3
categories:
  - web
  - framework

也可以使用自动分类功能，按目录结构生成分类：

安装插件：

1
npm install hexo-auto-category --save

修改配置文件 _config.yml

1
2
3
auto_category:
 enable: true
 depth:

5 添加搜索功能

5.1 安装插件

1
npm install hexo-generator-searchdb --save

5.2 修改配置文件

改 _config.yml

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改主题的配置文件 _config.butterfly.yml：

1
2
local_search:
  enable: true

6 显示外链图片

需要在生成网页的 head 中加：

1
<meta name="referrer" content="no-referrer"/>

我使用 butterfly 主题，只需要在主题配置文件 _config.butterfly.yml 中修改：

1
2
3
4
5
6
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    <meta name="referrer" content="no-referrer"/>
  bottom:
    # - <script src="xxxx"></script>

7 内链跳转

首先，让 hexo 生成的 html 目录结构与 markdown 存储的结构一致，在 _config.yml 中设置：

1
permalink: :title/

详见：permalink写法

然后写了程序，批量在 markdown 内链的位置把扩展名.md 去掉，再把路前面加一个 "/" 变成绝对路径即可使用。

8 添加字数和阅读时间统计

安装插件

1
npm install hexo-symbols-count-time --save

修改 _config.yml，添加：

1
2
3
4
5
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

修改 _config.butterfly.yml，打开 enable：

1
2
wordcount:
  enable: true
  • 需要支持两个中括号的图片/链接

9 在 butterfly 风格界面中加备案号

修改：node_modules/hexo-theme-butterfly/layout/includes/footer.pug

在.framework-info 最后面添加：

1
2
3
4
5
</br>
<img class="img-circle profile-img" src="/img/beian.png" alt="">
<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802043346">京公网安备 xxxx 号</a>
</br>
<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备 xxxx 号</a>

注意：把 beian.png 复制到 public/img 目录下

10 生成静态短链接地址

1
npm install hexo-abbrlink --save

在配置文件中设置：

1
permalink: posts/:abbrlink/

如果文章较多，容易 id 冲突，建议使用 crc32 替换 crc16

1
2
3
abbrlink: 
  alg: crc16
  force: true # force默认值是false，对已生成的保留，只对新生成的重新编码，如果想重新生成全部，将其设成true

在配置完后重新生成笔记

1
2
$ hexo clean 
$ hexo generate

说明详见

https://github.com/rozbo/hexo-abbrlink