前言

本文系参考Butterfly 作者 Jerry 大佬进行编写
仅会记录自己需要用的功能点
详细其他更加细化的功能请参考大佬的配置文章

https://butterfly.js.org/posts/ceeb73f/

Math (数学)

  • 文章中数学功能我们选择使用 KaTeX
  • Mathjax 和 KaTeX 二选一
  • Mathjax 功能比较齐全
  • KaTeX 比较轻量化比较快

修改 Theme 配置文件

  1. 修改根目录中的 _config.butterfly.yml 文件
  2. 搜索关键字 Math
  3. 按照自己的需求更改以下字段
1
2
3
4
5
6
7
# KaTeX (数学)
katex:
  enable: true
  # true 表示每一页都加载 katex.js
  # false 需要时加载，须在使用的Markdown Front-matter 加上 katex: true
  per_page: false
  hide_scrollbar: true

替换 Markdown 渲染器

  1. 卸载掉 marked 插件
1
npm uninstall hexo-renderer-marked --save
  1. 卸载掉 marked 插件
1
npm uninstall hexo-renderer-kramed --save
  1. 安装 hexo-renderer-markdown-it
1
npm install hexo-renderer-markdown-it --save

修改 Hexo 配置文件

  1. 打开根目录中的 _config.yml 文件

  2. Markdown 渲染器配置文件模板

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
# Markdown 渲染器 (hexo-renderer-markdown-it)
markdown:
    # 渲染器默认预设
    # "commonmark": 使用严格 CommandMark 规定
    # "default": 默认配置, 类似于 GFM
    # "zero": 禁用所有预设
    preset: 'default'
    # 以下为 render 选项
    render:
    # 是否解析 HTML 内容, 如果为 true 则表示解析, false 表示将 HTML 转意为文本。
    html: true
    # 将 HTML 内容渲染为 XHTML 的形式 (XHTML 语法非常严格, 比如原 HTML 中的 <br> 标签必须要使用 <br/> 这样的形式进行 "自闭和") 可能会出现兼容性问题。
    xhtmlOut: false
    # 只适用 Hexo 默认的两个高亮插件禁用时 
    # 为围栏代码块中语法定义选项渲染后自动添加 class 名前缀, 如 ---html 渲染为 <class="language-html">
    langPrefix: 'language-'
    # true 则将所有换行渲染为 <br> 标签
    # 这种行为不属于 CommandMark 和 GFM。
    breaks: true
    # true 则自动解析链接并添加为 <a> 标签, false 则将链接渲染为文本。
    linkify: true
    # 默认 true # 自动转义各种排版用字符, 如 ©
    typographer: true
    # 当 typographer 定义为 true 时的自动转换引号的行为, quotes: '“”‘’' 则表示将 "123" '123'转换为 “123” ‘123’
    quotes: '“”‘’'
    # render 选项到此结束
    enable_rules:
    # 当 preset 定义时的渲染规则
    # "zero" 表示禁用所有规则而能单独启用规则
    # "default" 表示启用所有规则, 所以只能禁用特定规则
    # "commandmark" 将严格遵循 CommandMark 因此不能额外定义规则的启闭
    # 使用单条规则
    # disable_rules: 'link'
    # 使用多条规则
    # disable_rules:
    #    - 'link'
    #    - 'image'
    disable_rules:
    # Markdown 渲染插件
    plugins:
      # 数学插件
      # https://github.com/renbaoshuo/markdown-it-katex
      - '@renbaoshuo/markdown-it-katex'
      # 目录锚定插件
      # https://github.com/rstacruz/markdown-it-named-headings
      - markdown-it-named-headings
      # 高亮插件
      # https://github.com/markdown-it/markdown-it-mark
      - markdown-it-mark
    # 以下为额外安装插件
      # https://github.com/markdown-it/markdown-it-abbr
      #- markdown-it-abbr
      # https://github.com/markdown-it/markdown-it-cjk-breaks
      #- markdown-it-cjk-breaks
      # https://github.com/markdown-it/markdown-it-container
      #- markdown-it-container
      # https://github.com/markdown-it/markdown-it-deflist
      #- markdown-it-deflist
      # https://github.com/markdown-it/markdown-it-emoji
      #- markdown-it-emoji
      # https://github.com/markdown-it/markdown-it-footnote
      #- markdown-it-footnote
      # https://github.com/markdown-it/markdown-it-ins
      #- markdown-it-ins
      # https://github.com/markdown-it/markdown-it-sub
      #- markdown-it-sub
      # https://github.com/markdown-it/markdown-it-sup
      #- markdown-it-sup
      # https://github.com/revin/markdown-it-task-lists
      #- markdown-it-task-lists
    # 锚点的配置
    anchors:
    # 开始创建锚点的等级 
    # 如 "2" 则表示从 H2 开始创建一直到 H6(最后)。
    level: 2
    # 如果遇到重复的锚点 ID 为其添加数字编号时在这个数字前添加的前缀。
    collisionSuffix: ''
    # 以下为标题锚点配置
    # 如果为 true 则创建一个除标题外带有固定地址的的锚点标签。
    permalink: false
    # 定义固定锚点的 class 名
    permalinkClass: 'header-anchor'
    # 设定为 right 则会在标题后添加固定链接
    permalinkSide: 'left'
    # 定义固定链接使用的符号 
    permalinkSymbol: '¶'
    # 标题固定锚点到此结束
    # 转换锚点 ID 中的字母为大写或小写
    # "0" 不转换, "1" 为小写, "2" 为大写
    case: 0
    # 用于替换空格的符号
    # 默认为 "-"
    separator: '-'
  1. 按照自己的需求添加以下字段
1
2
3
markdown:
    plugins:
      - '@renbaoshuo/markdown-it-katex'

Markdown 渲染器 Bug

  • hexo-renderer-markdown-it 会导致目录失效
  1. 安装 markdown-it-named-headings
1
npm install markdown-it-named-headings --save
  1. 按照自己的需求添加以下字段
1
2
3
markdown:
    plugins:
      - 'markdown-it-named-headings'

Search (搜索)

许多大佬都喜欢用在线搜索服务
但是我感觉还是有点安全问题
所以我们还是使用本地搜索比较好

安装 Hexo 搜索插件

我们这次使用比较新的 hexo-generator-searchdb

1
npm install hexo-generator-searchdb

修改 Theme 配置文件

  1. 打开根目录中的 _config.butterfly.yml 文件
  2. 搜索关键字 local_search
  3. 按照自己的需求更改以下字段
1
2
3
4
5
6
7
8
9
10
11
12
13
# Local search (本地搜索)
local_search:
  # 是否开启本地搜索
  enable: true
  # 预加载，开启后，进入网页后会自动加载搜索文件。
  # 关闭时，只有点击搜索按钮后，才会加载搜索文件
  preload: true
  # 匹配的文章结果，默认显示最开始的第1段结果
  top_n_per_article: 1
  # 将 html 字符串解码为可读字符串
  unescape: true
  # 搜索文件的 CDN 地址（默认使用的本地链接）
  CDN:

Share (分享)

  • share.js 和 AddToAny 二选一
  • 个人推荐比较新的 AddToAny

修改 Theme 配置文件

  1. 打开根目录中的 _config.butterfly.yml 文件
  2. 搜索关键字 Share
  3. 按照自己的需求更改以下字段
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Share System (分享)
# --------------------------------------

# Share.js
# https://github.com/overtrue/share.js
sharejs:
  enable: false
  sites: facebook,twitter,wechat,weibo,qq

# AddToAny
# https://www.addtoany.com/
addtoany:
  enable: true
  item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

评论 & 在线聊天

个人不太喜欢这些功能
未来可能会加入
所以现在还需要的大佬自己研究下吧

Analysis (分析)

我们这里直接使用 Cloudflare 的吧

进入 Cloudflare

分析和日志 --> Web Analytics --> 添加站点

添加站点

  1. 设置主机名
  1. 复制 JS 片段

修改 Theme 配置文件

  1. 打开根目录中的 _config.butterfly.yml 文件
  2. 搜索关键字 Analysis
  3. 直接填写你的 Token 就🆗

字数统计

安装字数统计插件

1
npm install hexo-wordcount --save

修改 Theme 配置文件

  • 修改 _config.butterfly.yml 文件
1
2
3
4
5
6
7
# wordcount (字数统计)
# see https://butterfly.js.org/posts/ceeb73f/#字數統計
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

实现效果

参考 & 引用

https://butterfly.js.org/posts/ceeb73f/
https://seayj.cn/articles/33818/#er-xiu-fu-zhang-mu-lu-mao-dian-shi-xiao
https://blog.cxplay.org/works/hexo-renderer-markdown-it_and_plugins_config/