在 Hugo 中使用 Mermaid

以下内容仅适用于 未适配 mermaid 的主题

一些主题，如：LoveIt 无需自己额外配置

效果

等待一下，看看效果先（rss用户没效果请打开网页）：

graph LR;
A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

在 Hugo 中使用 Mermaid

在 站点配置目录 创建一个 layouts/shortcodes/mermaid.html 文件，写入以下内容：

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

然后再在 layouts/partials/header.html 文件添加以下内容：

{{ if (.Params.mermaid) }}
<!-- MermaidJS support -->
<script async src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
{{ end }}

如果某一篇需要开启 mermaid 可以在 front matter 中加入 mermaid: true 即可

也可以选择在 archetypes/defaults.md 里加入 mermaid: true ，这样每次创建 posts 时都会自动添加

要在文章中使用 mermaid 可以添加以下内容，然后在中间添加 mermaid 语法（详见 mermaid 官网)

参考

https://www.sulvblog.cn/posts/blog/hugo_mermaid

https://mermaid-js.github.io/mermaid/#/