Hexo实现Math公式撰写的实验报告

再多的资料，不如自己动手尝试

为了实现数学公式在博客中的正常显示，我查了资料和方法，折腾了好几个小时未果，自己的next主题做了大量的定制，有可能影响到插件的效果。最终决定从头开始，按照实验的方法认真测试一遍，忠实的记录实验结果。

三种可能

网络上流传的三种方法简介如下：

工具名称	方法简介	安装	使用	相关资料
Pandoc	利用hexo-renderer-pandoc对内容进行渲染，彻底解决问题	方法一：下载安装方法二：利用homebrew安装`brew install pandoc` hexo根目录执行`npm install hexo-renderer-pandoc --save`	正常使用	Pandoc Markdown语法 pandoc介绍数学部分一些介绍 Try Pandoc
NexT自带的Mathjax接口	利用Mathjax渲染	在theme/_config.yml对应的Mathjax设置即可。	正常使用	next官方文档
hexo-math插件	利用MathJax渲染	`npm install hexo-math --save`	正常使用	hexo-math

实验计划

采用全新的hexo源码文件和主题文件对上面提到的三种方法进行实验。主题以hexo新建时默认的landscape和自己现阶段的主力主题next为主。实验的目的是挑选出自己的环境下能实现math数学公式撰写的最适合方法。

实现设计

主题	hexo-math	hexo-renderer-pandoc	next.mathjax
landscape	是否生效-onm	是否生效-olp
next	是否生效-olm	是否生效-onp	是否生效-ona

首先完成上表的基础实验之后，结合自己的实际环境测试具体实现方案，同时考虑验证如果原始代码可以正常工作，如何和自己的实际代码进行结合。比如说主题文件保留，初始化Hexo除了主题之外的文件等等。

实验准备

环境准备

从零安装环境和主题并验证本地环境为：origin

hexo init
npm install
git clone https://github.com/iissnan/hexo-theme-next themes/next
hexo s

拷贝完全一致的环境

cp -rf origin olm
cp -rf origin olp
cp -rf origin ona
cp -rf origin onm
cp -rf origin onp

在实际使用时需要调整_config.yml的主题，不再详细说明。

安装 hexo-renderer-pandoc 步骤

npm install hexo-renderer-pandoc --save
官方库文档

安装 math-plugin步骤

npm install hexo-math --save
在theme/_config.yml中进行配置（事后证明这一步不需要）

conifg
  math:
    engine: 'mathjax' # or 'katex'
    mathjax:
    src: custom_mathjax_source
      config:
        # MathJax config
katex:
  css: custom_css_source
  js: custom_js_source # not used
    config:
    # KaTeX config

官方文档

安装next mathjax插件步骤

在theme/_config.yml中进行配置

# MathJax Support
mathjax:
enable: true
cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

数据准备

准备了一些公式的测试数据，需要的小伙伴可以直接打开拷走不谢。

实验过程

做好了充分的准备，其实实验过程还是比较顺利的，每一种情况看测试数据的结论，做好记录。在了解了结果之后进行机遇自己环境的实证效果还是不错的，下面是实证阶段留下的卡片。

一切皆卡片

实际问题

实验中遇到了一些小问题：

测试数据太复杂，hexo s经常报错，修改了一般简单的数据，逐个排查。

{% math %}
\begin{aligned}
\dot{x} & = \sigma(y-x) \\
\dot{y} & = \rho x - y - xz \\
\dot{z} & = -\beta z + xy
\end{aligned}
{% endmath %}

没想到同样的源码在Desktop没问题，在icloud文件夹报错，初步判断和文件夹权限或者路径中的~符号有关，没有验证。

实验结论

基础实验结论

主题	hexo-math	hexo-renderer-pandoc	next.mathjax
landscape	生效	复杂环境：报错简单环境：不生效
next	生效	复杂环境：报错简单环境：不生效	报错

复杂实验结论

hexo模块化非常清晰，可以把主题文件替换为我原有的文件结合hexo init其他源码正常工作。
我原来的环境符合基础实验结论，但是依旧报错是因为在icloud文件夹下导致的，换到Desktop后不再报错。
hexo-math安装后不需要做配置及时生效可以使用。
网络上的经验只能参考，自己动手才能得到真知。
所有的实验都是基于本人的MAC电脑当前环境下的实验结论，也有可能和配置相关，请大家谨慎选择。（macOS Sierra Version 10.12.1 ）

Hexo原理理解

在your_hexo-dir/node_modules目录下的文件都是模块化的，其中hexo-renderer-marked主要用来做markdown到html的渲染。一般的hexo-renderer-XXX都是在your_hexo-dir/node_modules下安装新的渲染器。如果安装新的出现不生效的情况，记得删掉原有的，代码如下

npm uninstall hexo-renderer-XXX --save
# 把XXX部分换成你的渲染器的名字

安装了hexo-math之后，会在your_hexo-dir/node_modules/生成hexo-inject和hexo-math两个目录文件。

感受

动手，动手，动手。

[完](http://blog.junyu.pro)

声明: 本文转载需标明出处，禁止用于商业目的。

ChangeLog

161124 新建

三种可能#

实验计划#

实现设计#

实验准备#

环境准备#

安装 hexo-renderer-pandoc 步骤#

安装 math-plugin步骤#

安装next mathjax插件步骤#

数据准备#

实验过程#

实际问题#

实验结论#

基础实验结论#

复杂实验结论#

Hexo原理理解#

感受#

ChangeLog#