图表

GoAT 图表

Hugo原生支持GoAT，这种图表样式比较简单，在文档中较难编写。

• 不同的样式效果

// 这是一些示例代码
      .               .                .               .--- 1          .-- 1     / 1
     / \              |                |           .---+            .-+         +
    /   \         .---+---.         .--+--.        |   '--- 2      |   '-- 2   / \ 2
   +     +        |       |        |       |    ---+            ---+          +
  / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3
 /   \ /   \    |   |   |   |    |   |   |   |     '---+            '-+         +
 1   2 3   4    1   2   3   4    1   2   3   4         '--- 4          '-- 4     \ 4

这是生成的图表

Mermaid 图表

mermaid js 官方文档

Hugo目前没有提供 渲染 Mermaid 的模板。

可以通过 Hugo 提供的 Markdown Render Hooks 自定义渲染 mermaid 标识的代码块

1. 创建一个匹配 md 文件中以 mermaid 标识的代码块内容的布局模版
   文件路径: layouts/_default/_markup/render-codeblock-mermaid.html

1<!-- render-codeblock-mermaid.html -->
2<!-- md 文件中的 ```mermaid ``` 的代码块内容将应用该布局文件 -->
3<div class="mermaid">
4    {{- .Inner | safeHTML }}
5</div>
6{{ .Page.Store.Set "hasMermaid" true }}

2. 在 Content View 布局模版底部添加渲染 mermaid 功能，需要借助 mermaid js 来渲染 mermaid 代码块的内容

 1<!-- layouts/_default/single.html -->
 2{{define "main"}}
 3    <!-- 其他代码 -->
 4{{ if .Page.Store.Get "hasMermaid" }}
 5  <script type="module">
 6    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
 7    mermaid.initialize({ 
 8      // 页面加载时渲染 mermaid 图表
 9      startOnLoad: true,
10      // 配置主题
11      theme: 'base',
12      // 配置日志等级
13      logLevel: 3,
14    });
15  </script>
16{{ end }}
17{{end}}