在hugo里集成mermaid图支持
本文环境： hugo v0.152.2+extended+withdeploy darwin/amd64 BuildDate=2025-10-24T15:31:49Z VendorInfo=Homebrew 一般使用了hugo主题的话，默认是集成了mermaid图。 若不使用hugo主题，那么就需要自己手动集成了。 步骤如下： 创建 layouts/_markup/render-codeblock-mermaid.html 负责开启一个mermaid图的html区块，内容如下： <pre class="mermaid"> {{- .Inner | safeHTML }} </pre> {{ .Page.Store.Set "hasMermaid" true }} 修改 layouts/_default/baseof.html 如果没有该文件就创建一个。默认情况下，所有html页面的主体结构和内容由这个文件渲染。和mermaid图相关的内容如下: <!DOCTYPE html> <html lang="zh-CN"> <body> ...... ...... ...... <!-- 必须放到最后在 （.Content 之下），因为这渲染钩子直到执行 .Content 之后才会被处理），否则.Page.Store.Get "hasMermaid"永远为false --> {{ if .Page.Store.Get "hasMermaid" }} <!-- 只有文章里写了 mermaid 才加载下面这些资源，节省性能 --> <script type="module"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true }); </script> {{ end }} </body> </html> 添加一个mermaid图看看效果 在网站的任意一个markdown文件里添加样例，看下效果 ...