hugo 小技巧

支持时序图

技术文档中常会用到时序图，hugo 默认不支持时序图，需要安装 mermaid.js.

我使用的hugo主题是: hugo-theme-stack

使用方法

在路径layouts/_default/_markup/下新建一个文件render-codeblock-mermaid.html,内容为：

1
2
3
4
5


<pre class="mermaid">
    {{ .Inner | htmlEscape | safeHTML }}
</pre>

{{ .Page.Store.Set "hasMermaid" true }}

然后在layouts/partials/article/content.html最后面添加如下代码：

1
2
3
4
5
6


{{ if .Store.Get "hasMermaid" }}
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>
{{ end }}

这样就可以了，hugo server -D 运行看看效果

示例

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


```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!

效果

    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!