fluid主题自带了mathjax渲染器,该渲染器需要适当的配置
修改主题配置
修改_config.fluid.yml:
math:# 开启后文章默认可用,自定义页面如需使用,需在 Front-matter 中指定 `math: true`enable: true# 开启后,只有在文章 Front-matter 里指定 `math: true` 才会在文章页启动公式转换,以便在页面不包含公式时提高加载速度specific: false# Options: mathjax | katexengine: mathjax
启用math并设置引擎为mathjax
书写数学公式的要求
有几种数学公式书写方法,但是和博客园的公式不完全兼容,有一些踩坑点,接下来会逐一介绍。
1. 行内公式
直接用$...$
包裹即可
2. 行间公式
写法一:
$$
\boldsymbol{R}=x
$$
渲染结果如下:
写法二:
\begin{equation}
\boldsymbol{R}=x
\end{equation}
渲染结果如下:
\begin{equation}
\boldsymbol{R}=x
\end{equation}
这两种写法都没问题,写法二可以加标签,进行交叉引用。
在博客园交叉引用
使用\label
进行交叉引用
举个例子
\begin{equation}
\boldsymbol{R}=x
\label{eq1}
\end{equation}我们在公式\eqref{eq1}中提到了balabala
渲染结果如下:
\begin{equation}
\boldsymbol{R}=x
\label{eq1}
\end{equation}
我们在公式\eqref{eq1}中提到了balabala
这部分虽然在博客园编辑器中无法预览,但是保存后在网页是可以正确渲染的。
在hexo中交叉引用
hexo中需要开启交叉引用功能,参考mathjax官方文档:https://docs.mathjax.org/en/latest/input/tex/eqnumbers.html
需要给mathjax添加配置:
window.MathJax = {tex: {tags: 'ams'}
};
找到node_modules\hexo-theme-fluid\layout\_partials\plugins\math.ejs
,将上面的配置选项添加到mathjax的配置中即可。
数学公式渲染的bug
有一种写法合并了上述提到的方法一和方法二:
$$
\begin{equation}
...
\end{equation}
$$
不知道这是不是一种标准的写法,在博客园是可以完美支持的,但是在hexo中会导致渲染出错,这仅限于公式中有空白行的情况,如果把公式中所有空白行删除则hexo不会出错。因此,建议非必要不要混用两种方法。