前言
由于之前胡乱配置把 hexo 干散架了，渲染页面很大一片都有问题，于是就干脆不救了，于是我便开始尝试寻找新的方法管理博客，直到我发现了 hugo，其作为超高速的网站生成器吸引了我其实是过年回老家想重新部署 hexo 网络不允许，于是我便开启了博客的三代目。
这其中我发觉原先文章中的数学公式渲染全数失效 (x_x)b ，于是有了这篇文章来记录我是如何处理这方面问题的。
目前博客的状况
- 采用hugo框架
- 主题采用LoveIt
- 已经进行了一部分主题修改
Katex 的弃用
由于之前多次的渲染测试多行公式始终出现问题, 故选择弃用了 $KaTeX$ 转而去使用 $MathJax$ 进行公式的渲染. 在此对于使用 LoveIt 主题的配置进行调整。在博客根目录下 your_site/config.toml 中找到这么一行： # KaTeX mathematical formulas config (KaTeX https://katex.org/)，在其下方的 [params.page.math] 下将 enable 的值改为 false。
经过修改应当看起来大致如此：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
# 上方为其他配置
# KaTeX mathematical formulas config (KaTeX https://katex.org/)
# KaTeX 数学公式配置 (KaTeX https://katex.org/)
[params.page.math]
enable = false
#此处向下不必理会
# default inline delimiter is $ ... $ and \( ... \)
# 默认行内定界符是 $ ... $ 和 \( ... \)
inlineLeftDelimiter = ""
inlineRightDelimiter = ""
# default block delimiter is $$ ... $$, \[ ... \], \begin{equation} ... \end{equation} and some other functions
# 默认块定界符是 $$ ... $$, \[ ... \], \begin{equation} ... \end{equation} 和一些其它的函数
blockLeftDelimiter = ""
blockRightDelimiter = ""
# KaTeX extension copy_tex
# KaTeX 插件 copy_tex
copyTex = true
# KaTeX extension mhchem
# KaTeX 插件 mhchem
mhchem = true
# Mapbox GL JS config (Mapbox GL JS https://docs.mapbox.com/mapbox-gl-js)
# Mapbox GL JS 配置 (Mapbox GL JS https://docs.mapbox.com/mapbox-gl-js)
#下方为其他配置
|
至此即可关闭其自带的 Katex。
MathJax 的启用
配置技巧
由于生成 public 文件时，Hugo 会优先读取根目录的文件，然后再读取主题里文件（也就是先读取 your_blog\layouts\ 里的文件再读取 your_blog\themes\LoveIt\layouts\ 里的文件）。所以我选择修改到根目录下。
我们当然也可以直接修改主题里的文件，但是如果这样做，那么在更新主题后我们之前的修改也会一并地消失，这显然是我们不期望发生的。
首先来到博客根目录下 your_site\layouts\partials (如果没有需要自己创建)，创建一个新文件 Mathjax.html，然后输入如下代码（修改后记得用Ctrl+S保存)：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<script type="text/javascript"
async
src="https://cdn.bootcss.com/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
displayMath: [['$$','$$'], ['\[\[','\]\]']],
processEscapes: true,
processEnvironments: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
TeX: { equationNumbers: { autoNumber: "AMS" },
extensions: ["AMSmath.js", "AMSsymbols.js"] }
}
});
MathJax.Hub.Queue(function() {
// Fix <code> tags after MathJax finishes running. This is a
// hack to overcome a shortcoming of Markdown. Discussion at
// https://github.com/mojombo/jekyll/issues/199
var all = MathJax.Hub.getAllJax(), i;
for(i = 0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<style>
code.has-jax {
font: inherit;
font-size: 100%;
background: inherit;
border: inherit;
color: #515151;
}
</style>
|
在此之后，来到博客根目录的 your_site\layouts\posts ，将 your_blog\themes\LoveIt\layouts\posts 中的 single.html 复制进此位置并找到 <article class="page single"> 下方的 {{- /* Subtitle */ -}} 这一行，在其下方 {{- end -}} 后添加这样一段代码
1
2
3
4
5
6
7
8
9
|
{{- /* 确认文章是否要开启MathJax */ -}}
{{- if .Params.math -}}
<!-- 引入 MathJax partial -->
{{- partial "mathjax.html" . -}}
{{- end -}}
|
由于数学公式的渲染比较复杂，并且对性能有相较而言较高的消耗，所以我们并不希望每篇文章都引入 MathJax，上方添加的代码的功能便是检测是否要添加 MathJax 进入文章。修改后看起来大概是这样的：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<article class="page single">
{{- /* Title */ -}}
<h1 class="single-title animate__animated animate__flipInX">{{ .Title | emojify }}</h1>
{{- /* Subtitle */ -}}
{{- with $params.subtitle -}}
<h2 class="single-subtitle">{{ . }}</h2>
{{- end -}}
{{- /* 这里是我们引入代码的地方 */ -}}
{{- /* Check if the article requires MathJax */ -}}
{{- if .Params.math -}}
<!-- Include the MathJax partial -->
{{- partial "mathjax.html" . -}}
{{- end -}}
{{- /* 这里是我们结束的地方 */ -}}
{{- /* Meta */ -}}
<div class="post-meta">
<div class="post-meta-line">
{{- $author := $params.author | default .Site.Author.name | default (T "author") -}}
{{- $authorLink := $params.authorlink | default .Site.Author.link | default .Site.Home.RelPermalink -}}
<span class="post-author">
{{- $options := dict "Class" "author" "Destination" $authorLink "Title" "Author" "Rel" "author" "Icon" (dict "Class" "fas fa-user-circle fa-fw") "Content" $author -}}
{{- partial "plugin/a.html" $options -}}
</span>
|
至此我们便完成了 MathJax 的引入，但是要在文章中使用 MathJax，我们还需要进行最后一项配置。找到 your_site\archetypes\default.md 文件, 在其中添加 math: false。如此一来，我们每次生成新的博文之后便会在文章头的位置自动填入这一部分。当我们需要在文章中使用数学公式的时候，将其后方的 false 改为 true 即可使用相关功能。
附公式输入用法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
//行内公式
$包裹的公式体$
\\(包裹的公式体\\)
//行外公式
$$
包裹的公式体
$$
\[\[
包裹的公式体
\]\]
//这里第二种为非官方写法，但是适用于上方配置
|
警告
本文最后更新于 April 22, 2024，文中内容可能已过时，请谨慎使用。
高山流水觅土豆