这次更换主题的很大一个动因就是因为在 NexT 这个主题上，开启 Latex 的支持很方便。网上关于这方面的文章其实不少，但是大部分都不全面，照本宣科下来，很可能不能用。这些教程一般就给了_config.yml文件的配置以及pandoc依赖安装，但是一些关键细节缺失了。这篇文章里我梳理了一下整个流程。

1 Reference

英语好的话，其实可以尝试直接阅读官方文档。

2 Install Dependencies

Next 支持mathjax和katex两种渲染方式，其中katex的速度更快，但是对于 Latex 的支持有一定的限制。所以除非你的博客数量实在是过于庞大，不然就可以直接使用mathjax。

mathjax可以选用下面两种渲染引擎的中的任一一种

  • hexo-renderer-kramed
  • hexo-render-pandoc

使用hexo-render-pandoc还需要安装 pandoc 渲染引擎。其安装方法可以参考 pandoc 官网。如果在 macOS 上可以使用 Homebrew安装.

这里以pandoc为例：

1
2
3
# 需要先卸载默认的渲染引擎
npm un hexo-renderer-marked --save
npm i hexo-renderer-pandoc --save

替换渲染器之后会导致 NexT note 功能出现问题，note 内的元素内容无法渲染，会输出 markdown 源代码。 这个问题我在hexo-render-pandoc上提了一个Issue，看原作者什么时候能够更新解决吧。

3 Configuration

配置 NexT 主题的_config.yml文件

1
2
3
4
5
math:
  enable: true
  ...
  engine: mathjax
  #engine: katex

很多文章都漏掉了在配置中一个重要的信息：在主题配置math下有一个名为per_page的选项，其值为true或者false。这个选项用来控制是否对每个篇文章都渲染数学公式。默认情况下是true，这意味只对 Front Matter 中含有mathjax: true的文章进行公式渲染。将per_page设置为false，则会对每一篇文章都尝试进行公式渲染。

由于公式渲染时一个很费时的操作，因此还是保持默认配置，通过 Front Matter 进行渲染控制.

4 How to use

4.1 行内嵌套公式

如：质能方程\(e=mc^2\)

1
如：质能方程$e=mc^2$

4.2 独占一行的公式

如：

\[ 1=\sum_{i=0}^{m}\sum_{k=0}^{W_i-1}b_{i,k}=\sum_{i=0}^{m}b_{i,0}\sum_{k=0}^{W_i-1}\frac{W_i-k}{W_i}=\sum_{i=0}^{m}b_{i,0}\frac{W_i+1}{2}\\ =\frac{b_{0,0}}{2}\left[W\left(\sum_{i=0}^m-12p^i+\frac{(2p)^m}{1-p}\right) + \frac{1}{1-p}\right] \]

1
2
3
4
5
如：
$$
1=\sum_{i=0}^{m}\sum_{k=0}^{W_i-1}b_{i,k}=\sum_{i=0}^{m}b_{i,0}\sum_{k=0}^{W_i-1}\frac{W_i-k}{W_i}=\sum_{i=0}^{m}b_{i,0}\frac{W_i+1}{2}\\
=\frac{b_{0,0}}{2}\left[W\left(\sum_{i=0}^{m-1}(2p)^i+\frac{(2p)^m}{1-p}\right) + \frac{1}{1-p}\right]
$$

更多 latex 的使用方法，请参考官方文档

5 Advance Usage

默认情况下，无论是使用 Mathjax 还是 Katex，公式的渲染都是在浏览器前端进行的。这样做有两个弊端：

  1. 前端需要载入 Mathjax 或者 Katex 的静态文件，增加开销；
  2. 公式多的时候，前端渲染缓慢，用户会先看到未经渲染的公式源码。

因此我尝试做了一个 Mathjax 离线渲染的脚本，这样公式渲染就是在后端完成，进而大幅度改善前端性能。具体参考这篇文章：Hexo + Mathjax: 公式离线渲