Hugo支持渲染mermaid图

Hugo个人博客搭建过程参考Hugo个人博客搭建 sequenceDiagram participant Alice participant Bob Alice->>Bob: Hello Bob! Bob->>Alice: Hello Alice! 在layouts目录下创建_default目录,拷贝主题下对应的内容 mkdir -p layouts/_default cp themes/hugo-PaperMod-master/layouts/_default/baseof.html layouts/_default/ vim layouts/_default/baseof.html 在文件后面增加以下内容 {{ 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 }} 在layouts/_default目录下创建_markup目录 mkdir -p layouts/_default/_markup vim layouts/_default/_markup/render-codeblock-mermaid.html render-codeblock-mermaid.html文件内容如下 <pre class="mermaid"> {{- .Inner | safeHTML }} </pre> {{ .Page.Store.Set "hasMermaid" true }}

四月 14, 2024 · 1 分钟 · 61 字 · Byter ·  Hugo ·  Mermaid