创建Mermaid初始化的局部视图

在你的 layouts/partials 目录下创建一个名为 mermaid-init.html 的新文件。 将以下代码添加到 mermaid-init.html 中:

1
2
3
4

<script type="module">
  import mermaid from '/js/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

添加shortcodes

新建 layouts/shortcodes/mermaid.html 文件. 将以下代码添加到 mermaid.html 中:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{{- $scratch := .Page.Scratch -}}
{{- if not ($scratch.Get "mermaid-counter") -}}
  {{- $scratch.Set "mermaid-counter" 1 -}}
  {{- partial "mermaid-init.html" . -}}
{{- else -}}
  {{- $scratch.Add "mermaid-counter" 1 -}}
{{- end -}}
{{- $id := printf "mermaid-%d" ($scratch.Get "mermaid-counter") -}}
<div id="{{ $id }}">
    <pre class="mermaid">
{{- .Inner | safeHTML }}
        </pre>
</div>

说明:

  1. {{- if not ($scratch.Get “mermaid-counter”) -}}: 检查 mermaid-counter 是否未设置 (即为 nil)。
  2. {{- $scratch.Set “mermaid-counter” 1 -}}: 如果 mermaid-counter 未设置,则将其初始化为 1。
  3. {{- partial “mermaid-init.html” . -}}: 仅当 mermaid-counter 第一次设置为 1 时,才加载 mermaid-init.html 局部视图。
  4. {{- else -}}: 如果 mermaid-counter 已设置,则执行此 else 块。
  5. {{- $scratch.Add “mermaid-counter” 1 -}}: 在后续使用时,mermaid-counter 会递增。

工作原理:

第一次在页面上遇到 mermaid 短代码时,mermaid-counter 将为 nil。 if 条件将为真,并且 mermaid-counter 将被设置为 1。 mermaid-init.html 局部视图将被加载,确保 Mermaid 库被加载。 在同一页面上后续使用 mermaid 短代码时,将执行 else 块,并且 mermaid-counter 将递增。 mermaid-init.html 局部视图不会再次加载。 这种方法确保了 Mermaid 库只在每个页面加载一次,并且只在存在 Mermaid 图时加载,而不需要修改你的基础布局。

如何在hugo中使用

在你的 Hugo Markdown 文件中,你可以像这样使用 mermaid 短代码:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

### Mermaid 示例一

\{\{< mermaid >}} # remove the escape character '\'
graph LR
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    B -- No ----> D[KO];
    C --> E[End];
    D --> E;
\{\{< /mermaid >}} # remove the escape character '\'

### Mermaid 示例二
\{\{< mermaid >}} # remove the escape character '\'
flowchart TD
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    B -- No ----> D[KO];
    C --> E[End];
    D --> E;
\{\{< /mermaid >}} # remove the escape character '\'

演示

示例一

graph LR
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    B -- No ----> D[KO];
    C --> E[End];
    D --> E;

示例二

flowchart TD
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    B -- No ----> D[KO];
    C --> E[End];
    D --> E;