Hugo博客添加mermaid作图

作为GitHub官方支持的作图库，mermaid无论是充当文字的补充叙述，还是为版面增添几分灵活，无疑是值得尝试的。接下来就用Sulv大佬提供的方法，介绍怎么在Hugo中通过Shortcodes使用mermaid进行作图

步骤

1. 添加并编辑mermaid.html

在网站根目录下添加并编辑layouts/shortcodes/mermaid.html。

1
2

mkdir layouts/shortcodes -p \
  && nano layouts/shortcodes/mermaid.html

添加如下内容：

1
2
3

<div class="mermaid">
    {{ .Inner }}
</div>

2. 修改extend_head.html

在网站根目录下，使用如下指令复制一份extend_head.html到layouts/partials目录下并编辑：

1
2

cp themes/PaperMod/layouts/partials/extend_head.html layouts/partials/extend_head.html \
  && nano layouts/partials/extend_head.html

添加如下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{{ if or .Params.mermaid .Site.Params.mermaid }}
<!-- MermaidJS support -->
<script src="https://cdn.bootcdn.net/ajax/libs/mermaid/9.1.6/mermaid.min.js"></script>
<script>
    mermaid.initialize({
        startOnLoad: true,
        theme: localStorage.getItem("pref-theme") === "dark" ? "dark" : "forest" // 自动匹配默认或夜间模式主题。
    });
</script>
{{ end }}

3. 使用方法

在需要使用mermaid作图的文章的前文（front matter）中添加如下字段：

1

mermaid: true #是否开启mermaid

即可在后文中以Shortcodes的形式使用mermaid。同时可以在archetypes/defaults.md里加入上面的设置，这样每次创建新文章时都会自动添加该字段。另外将true改为false，即可关闭mermaid作图。

使用该Shortcodes进行作图，举例如下：

1
2
3
4

{{<mermaid>}}
flowchart LR
  a --> b & c --> d
{{</mermaid>}}

结果如下：

flowchart LR a --> b & c --> d

可以用html代码包裹该代码实现居中或其他排版：

1
2
3
4
5
6
7
8

<div align=center>

{{<mermaid>}}
flowchart LR
  a --> b & c --> d
{{</mermaid>}}

</div>

结果如下：

flowchart LR a --> b & c --> d

mermaid使用教程在这里：

官方文档

4. 补充

暂未实现mermaid主题实时根据网页主题变化，改为夜间模式后需要刷新才能看到效果。

另外之前用async异步加载mermaid.js，现在不能这样做，文件加载需要先于设置mermaid主题，不清楚对网站性能是否有影响，有更好的建议可以邮件联系我修改。

这是用Shortcodes实现的mermaid作图，然后我发现了另一篇不需要Shortcodes的教程《让Hugo Papermod主题支持 Mermaid》，但是测试发现无效，诸位有兴趣也可以尝试一下。

引用