Hexo 数学公式和文章图片管理

Hexo 中输入公式和插入图片的方法总结

数学公式

主题内置的 LaTex 显示功能

Hexo 5.0 之前的版本可以通过主题内置的 LaTex 功能来显示数学公式，详细配置步骤可参考官方文档。

1. 更改主题配置

在主题配置文件 _config.*.yml中添加配置：

post:
  math:
    enable: true
    specific: false
    engine: mathjax

2. 更换 Markdown 渲染引擎

Hexo 默认渲染引擎对数学公式的支持有限，对于复杂的公式就需要切换专门的渲染引擎，并且 Hexo 中渲染引擎不能共存，需要先卸载旧的渲染引擎，然后安装新的渲染引擎。

3. 执行 hexo clean

清理博客之前生成的文件

使用 hexo-math 插件

主题内置的 LaTex 显示功能配置相对来说比较麻烦，对于 Hexo 5.0 以上的版本，可以使用 hexo-math 插件来显示 LaTex 公式，详细配置可参考仓库说明。

1. 安装插件

npm i hexo-math --save

2. 更改主题配置文件（全局配置）

在主题配置文件 _config.*.yml中更改 math 项配置：

# _config.*.yml
math:
  katex:
    css: 'https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css'
    options:
      throwOnError: false
  mathjax:
    css: 'https://cdn.jsdelivr.net/npm/hexo-math@4.0.0/dist/style.css'
    options:
      conversion:
        display: false
      tex:
      svg:

3. 其他配置

配置完成后可以在 post 的 front-matter 中指定要渲染的公式类型或者覆盖全局配置：

katex: false # 不对 katex 公式进行渲染
mathjax: false

katex: # 覆盖全局配置
  output: 'mathml'
  felqn: true
  minRuleThickness: 0.05
  throwOnError: true
mathjax:
  conversion:
    em: 14
  tex:
    tags: 'ams'
  svg:
    exFactor: 0.03

4. 示例

按以上配置好后，在 {% mathjax %}···{% endmathjax %} 块之间写入 LaTex 公式的代码即可，如以下代码：

{% mathjax %} # katex 同理

\begin{matrix}
1 & x & x^2 \\
1 & y & y^2 \\
1 & z & z^2 \\
\end{matrix}

{% endmathjax %}

将渲染出公式：

可以使用 tag{} 对公式进行手动编号，同时公式会居中显示：

{% mathjax %}

\begin{equation}
\beta^*(D) = \mathop{argmin} \limits_{\beta} \lambda {||\beta||}^2 + \sum_{i=1}^n max(0, 1 - y_i f_{\beta}(x_i)) \tag{1}
\end{equation}

{% endmathjax %}

使用以上公式块时需要注意，如果两个块之间没有文字（空格和换行不算）的话，渲染出来的两个公式就会连在一起，不会换行。

图片管理

1. 统一管理

在本地或者 Hexo 博客的 source 文件夹下创建一个图片文件夹 img，文章中所有图片都放在这个文件夹下，然后在文章中采用绝对或者相对路径来引用图片，目前我是用的第二种相对路径引用方法。

2. 按文章管理

所有的图片都放在一起会显得比较杂乱，因此统一管理对图片的命名要求较高，需要根据图片名区分其作用或者引用位置等；Hexo 提供了为每篇文章单独建立 asset 文件夹的方法，只需要在全局配置文件 _config.yml 中进行以下设置即可：

 # _config.yml
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

配置好后将对应文章的图片放在对应的 asset 文件夹中，再通过相对引用的方式引用。

开启资源文件夹后，引用时只需输入图片相对于asset文件夹的路径。

3. 其他方式

除此之外，也可以将图片上传到图床中，通过远程链接来直接引用图片。

4. Hexo 引用图片示例

通过 Markdown 语法引用图片:

![MD_img](/img/post/post10.jpg "Markdown image")

通过 HTML 语法引用图片：

<div align="center">
<img src="/img/post/post10.jpg" width=600px height=400px alt="HTML image">
</div>