图表与可视化集成

Hugo 提供了多种方式来集成图表和可视化工具，让你的内容更加生动和易于理解。通过渲染钩子和 Shortcodes，你可以轻松地在 Markdown 内容中嵌入各种类型的图表。

渲染钩子实现的图表集成

Mermaid 图表集成

虽然 Hugo 没有内置的 Mermaid 渲染钩子，但可以通过自定义代码块渲染钩子来实现：

{{/* layouts/_default/_markup/render-codeblock-mermaid.html */}}
<div class="mermaid">
{{ .Inner | safeHTML }}
</div>
{{ .Page.Store.Set "hasMermaid" true }}

然后在基础模板中条件加载 Mermaid JavaScript 库：

{{ if .Store.Get "hasMermaid" }}
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
{{ end }}

GoAT ASCII 图表

Hugo 内置支持 GoAT ASCII 图表，通过嵌入式代码块渲染钩子实现。你可以直接在 Markdown 中使用：

```goat
    ┌─────┐   ┌─────┐
    │     │   │     │
    │  A  ├──▶│  B  │
    │     │   │     │
    └─────┘   └─────┘
```

自定义图表类型

你可以为其他图表库创建类似的渲染钩子，例如 D3.js、Chart.js 等：

{{/* layouts/_default/_markup/render-codeblock-chartjs.html */}}
<canvas id="chart-{{ .Ordinal }}"></canvas>
<script>
// Chart.js 初始化代码
const data{{ .Ordinal }} = {{ .Inner | jsonify }};
// ... 图表渲染逻辑
</script>
{{ .Page.Store.Set "hasChartJS" true }}

数学公式渲染

通过启用 Goldmark 的 Passthrough 扩展，可以使用渲染钩子渲染数学公式：

{{/* layouts/_default/_markup/render-passthrough.html */}}
{{ if eq .Type "math" }}
  {{ .Inner | transform.ToMath }}
{{ end }}

配置文件中需要启用相应扩展：

markup:
  goldmark:
    extensions:
      passthrough:
        enable: true
        delimiters:
          block:
            - ['\[', '\]']
            - ['$$', '$$']
          inline:
            - ['\(', '\)']
            - ['$', '$']

图表性能优化

条件加载资源

使用 Page.Store 来记录页面使用的图表类型，然后条件加载相应的 JavaScript 库：

{{/* 在基础模板中 */}}
{{ if .Store.Get "hasMermaid" }}
  {{ $mermaid := resources.Get "js/mermaid.min.js" }}
  <script src="{{ $mermaid.Permalink }}"></script>
{{ end }}

{{ if .Store.Get "hasChartJS" }}
  {{ $chartjs := resources.Get "js/chart.min.js" }}
  <script src="{{ $chartjs.Permalink }}"></script>
{{ end }}

延迟加载

对于复杂的图表，可以考虑使用 Intersection Observer API 实现延迟加载，提高页面加载性能。