配置字体

1. 放置字体文件：

博客根目录/source/
└── fonts
    ├── sci.woff2
    ├── scr.woff2
    ├── ub.woff2
    ├── ubi.woff2
    ├── ur.woff2
    └── uri.woff2

2. 编辑 _config.butterfly.yml，修改 inject.head：

inject:
  head:
    - <style>@font-face{font-family:sc;font-display:swap;src:url('/fonts/scr.woff2');font-style:normal;font-weight:normal;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/scr.woff2');font-style:normal;font-weight:bold;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/scr.woff2');font-style:normal;font-weight:100;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/scr.woff2');font-style:normal;font-weight:200;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/scr.woff2');font-style:normal;font-weight:300;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/scr.woff2');font-style:normal;font-weight:400;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/scr.woff2');font-style:normal;font-weight:500;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/scr.woff2');font-style:normal;font-weight:600;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/scr.woff2');font-style:normal;font-weight:700;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/scr.woff2');font-style:normal;font-weight:800;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/scr.woff2');font-style:normal;font-weight:900;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/sci.woff2');font-style:italic;font-weight:normal;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/sci.woff2');font-style:italic;font-weight:bold;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/sci.woff2');font-style:italic;font-weight:100;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/sci.woff2');font-style:italic;font-weight:200;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/sci.woff2');font-style:italic;font-weight:300;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/sci.woff2');font-style:italic;font-weight:400;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/sci.woff2');font-style:italic;font-weight:500;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/sci.woff2');font-style:italic;font-weight:600;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/sci.woff2');font-style:italic;font-weight:700;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/sci.woff2');font-style:italic;font-weight:800;}@font-face{font-family:sc;font-display:swap;src:url('/fonts/sci.woff2');font-style:italic;font-weight:900;}@font-face{font-family:uf;font-display:swap;src:url('/fonts/ur.woff2');font-style:normal;font-weight:normal;}@font-face{font-family:uf;font-display:swap;src:url('/fonts/ub.woff2');font-style:normal;font-weight:bold;}@font-face{font-family:uf;font-display:swap;src:url('/fonts/uri.woff2');font-style:italic;font-weight:normal;}@font-face{font-family:uf;font-display:swap;src:url('/fonts/ubi.woff2');font-style:italic;font-weight:bold;}</style>

3. 继续修改 font.font-family 和 font.code-font-family：

font:
  font-family: uf, sans-serif
  code-font-family: sc, sans-serif

成功，参考本站字体。

配置插件

启用

卸载 Hexo 自带的渲染器，安装本文标题中提到的渲染器。

npm un hexo-renderer-marked --save
npm un hexo-renderer-kramed --save

npm i hexo-renderer-markdown-it --save

启用 KaTeX

1. 安装插件：

npm install @neilsustc/markdown-it-katex --save

2. 启用插件，修改 _config.yml：

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

3. 禁用 MathJax，修改 _config.butterfly.yml：

mathjax:
  enable: false

4. 启用 KaTeX：

katex:
  enable: true
  per_page: false
  hide_scrollbar: true

5. 修改 CSS：

在本文标题“配置字体”第二步中的代码 <style> 和 </style> 之间添加属性：

ul,ol{overflow:scroll}

6. 应用 KaTeX：

修改文章的 front-matter：

---
katex: true
---

修复 TOC

这个渲染器会导致在文章目录点击一级标题无法跳转，可以通过配置解决，编辑 _config.yml：

markdown:
  anchors:
    level: 1

启用 footnote

有了它，你就不需要额外安装插件 hexo-footnotes 了。

footnote 属于该渲染器自带插件，修改 _config.yml 来启用它（这里同时把其他自带插件也启用了）：

markdown:
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup

启用 Todo 复选框

该渲染器本身不能识别 [ ] 和 [x] 来把它们渲染成复选框，但是可以安装 markdown-it-checkbox 插件以达成这种效果：

npm install markdown-it-checkbox --save

要启用这个插件，修改 _config.yml：

markdown:
  plugins:
    - markdown-it-checkbox

最好在 [ ] 或 [x] 后空两格写内容。

该渲染器的完整配置

markdown:
  anchors:
    level: 1
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-checkbox
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false