配置字体

  1. 放置字体文件：
1
2
3
4
5
6
7
8
博客根目录/source/
└── fonts
    ├── sci.woff2
    ├── scr.woff2
    ├── ub.woff2
    ├── ubi.woff2
    ├── ur.woff2
    └── uri.woff2
  1. 编辑 _config.butterfly.yml，修改 inject.head：
1
2
3
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>
  1. 继续修改 font.font-family 和 font.code-font-family：
1
2
3
font:
  font-family: uf, sans-serif
  code-font-family: sc, sans-serif

成功，参考本站字体。

配置插件

启用

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

1
2
3
4
npm un hexo-renderer-marked --save
npm un hexo-renderer-kramed --save

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

启用 KaTeX

  1. 安装插件：
1
npm install @neilsustc/markdown-it-katex --save
  1. 启用插件，修改 _config.yml：
1
2
3
4
5
6
markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false
  1. 禁用 MathJax，修改 _config.butterfly.yml：
1
2
mathjax:
  enable: false
  1. 启用 KaTeX：
1
2
3
4
katex:
  enable: true
  per_page: false
  hide_scrollbar: true
  1. 修改 CSS：

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

1
ul,ol{overflow:scroll}
  1. 应用 KaTeX：

修改文章的 front-matter：

1
2
3
---
katex: true
---

修复 TOC

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

1
2
3
markdown:
  anchors:
    level: 1

启用 footnote

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

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

1
2
3
4
5
6
7
markdown:
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup

启用 Todo 复选框

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

1
npm install markdown-it-checkbox --save

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

1
2
3
markdown:
  plugins:
    - markdown-it-checkbox

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

该渲染器的完整配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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