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

Posted on | Edited on | In |
再多的资料，不如自己动手尝试

为了实现数学公式在博客中的正常显示，我查了资料和方法，折腾了好几个小时未果，自己的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

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

拷贝完全一致的环境

1
2
3
4
5
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 步骤

安装 math-plugin步骤

  • npm install hexo-math --save

  • 在theme/_config.yml中进行配置（事后证明这一步不需要）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    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中进行配置
    1
    2
    3
    4
    # MathJax Support
    mathjax:
    enable: true
    cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

数据准备

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

实验过程

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

一切皆卡片

实际问题

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

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

    1
    2
    3
    4
    5
    6
    7
    {% 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下安装新的渲染器。如果安装新的出现不生效的情况，记得删掉原有的，代码如下

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

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

感受

动手，动手，动手。

完

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

ChangeLog

161124 新建