Hugo Shortcode 渲染Mermaid图形

创建Mermaid shortcode

创建shortcodes目录

cd your_theme_dir
mkdir layouts/shortcodes

创建mermaid.html文件

cd shortcodes
touch mermaid.html

shortcode的名字就是mermaid；该文件名与我们要使用的shortcode名称相同。将以下内容粘贴到该文件中。

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

导入mermaid.min.js

在你的主题中找到适合添加的地方，添加以下代码引入渲染mermaid所需的JS文件。

 {{ if (.Params.mermaid) }}
 <!-- MermaidJS support -->
 <script async src="https://unpkg.com/[email protected]/dist/mermaid.min.js"></script>
 {{ end }}

使用shortcode示例

在你想使用Mermaid的文章中，你需要打开Mermaid选项来加载所需的脚本。例如，这篇文章的配置如下：

title: "Hugo集成Mermaid"
description: "Hugo Mermaid Shortcode"
date: "2022-12-29T14:46:10+08:00"
mermaid: true

mermaid流程图代码

{{< mermaid >}}
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
{{< /mermaid >}}

mermaid展示效果

跳过Hugo shortcode

有时你可能需要跳过（即防止执行）Hugo markdown（.md）文件中的一个shortcode，并显示shortcode的内容{ {< myshortcode >}}。

在撰写文本时，一个简单的方法是在开头的双大括号和角括号或百分号后加入/*，在结尾的角括号或百分号和双大括号加入*/。例如，在markdown（.md）文件中这样做

{ {</* myshortcode */>}}

上面的mermaid流程图代码就是用这种方式显示的。