给博客增加支持mermaid语法和mindmap语法

有时候感觉画个流程图或者思维导图更直观。

使用 Hugo 的 Render Hook 功能（渲染钩子）来支持 Mermaid 流程图。

在根目录\layouts_default_markup 新建 render-codeblock-mermaid.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


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

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

增加支持markmap/mindmap

同样的位置创建 render-codeblock-markmap.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40


<div class="markmap" style="height: 300px; width: 100%;">
  <script type="text/template">
    {{ .Inner }}
  </script>
</div>

{{ if not (.Page.Scratch.Get "markmapLoaded") }}
  {{ .Page.Scratch.Set "markmapLoaded" true }}
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/markmap-view@0.15.4"></script>
  <script src="https://cdn.jsdelivr.net/npm/markmap-lib@0.15.4/dist/browser/index.min.js"></script>
  
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const { Transformer } = window.markmap;
      const { Markmap, loadCSS, loadJS } = window.markmap;
      const transformer = new Transformer();
      
      document.querySelectorAll('.markmap').forEach((container) => {
        const template = container.querySelector('script[type="text/template"]');
        const markdown = template.textContent;
        // 转换 Markdown 为思维导图数据
        const { root, features } = transformer.transform(markdown);
        
        // 如果有样式和脚本依赖，这里加载
        if (features.styles) loadCSS(features.styles);
        if (features.scripts) loadJS(features.scripts);

        // 渲染，清空容器先
        template.remove(); 
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.style.width = '100%';
        svg.style.height = '100%';
        container.appendChild(svg);
        
        Markmap.create(svg, null, root);
      });
    });
  </script>
{{ end }}