Featured image of post 给hugo添加mermaid支持

给hugo添加mermaid支持

发现2022年居然一篇博客都没写,一方面是疫情原因实在太糟心,另外一方面是环境使然,2022年一年都在适应新环境和拼命的推动项目前行。立个Flag,保证明年至少一个季度有一篇文章吧。

这篇文章是为了提示如何在hugo中添加mermaid支持,mermaid是一个流程图的工具,可以在markdown中直接使用,非常方便。其实在hugo官方文档中已经有了说明,但是我在使用的时候发现对新人不是特别友好,所以这里记录一下,顺便水一个。

官方文档中,第一步是在主题目录下创建对应Mermaid文件,这个按照官方文档操作即可,但是第二步其实说的有点模糊。最开始我按照官方文档进行添加,发现实际并未生效。我猜测是主题不支持的原因。因此我换了一种实现方式。

其实第二个步主要说的是在.Content内容之后进行添加代码。我们可以搜索一下主题中哪里使用了{{ .Content。为什么添加了一下前面的{{ ?因为这个是Go的模版语法,因为每个主题不一样,可能存在其他叫做.Content的变量或者内容,为了尽量排除干扰项可以这样搜索。当然如果你还是没搜索到,可能需要使用.Content再来一次。

在我的主题中,可以看到在layouts/partials/article/components/content.html文件中使用了.Content,因此我们可以在这个文件添加代码:

     {{ .Content | replaceRE "(<table>(?:.|\n)+?</table>)" $wrappedTable | safeHTML }}
+    {{ if .Page.Store.Get "hasMermaid" }}
+    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+    <script>
+        mermaid.initialize({ startOnLoad: true });
+    </script>
+    {{ end }}

实际效果如下:

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

当然,你也可以图省事使用第三方服务,比如说我之前推荐过的Kroki

![Kroki](https://kroki.io/bytefield/svg/eNqllcuOmzAUhvd5iiPPJiyQgDDMDNt20327QixMMBfF2BRMQzri3WsM4T7MpYkUC_P59_F_znGOIYmwEEUJbhDrcUEIg1c3SikF9ICNKMIGarTDcYbdCKX8OnJRtM3lKbtMqcDYos43PN8TR3hDqypySkaO2MFj9NRyCmQQFvgqD8CrXKc4IFRPCA5JcQDwylzuoCZ9-XhUZMBrOApSi-4FeG6GRdLqcyb0Mv1LwLQaX5Mzarn6cQNeSM0SHl4bcBOSxokA0260eRQFybggYTAJ4ZKyEHARl2MEZ06rjPVMqQ3z6zPAI6BS4EKg96if9Y_v-9AJkLjlZB-yALWx7kOmVMJ3iEkn9UIWhfksvZiabNSmORaXtnj3_GSd7BdMwOt9tpsR9rVtpa7-tI1cdgaAyqW21OyWrUWNoVgXkgmpdSWrsme36afhKGs1w8KVqBENtf2WaOuwdLoX3aZldPak_BfW9mc2us8ZtSVZg-e5OcUpu9fytStTRNtBMpMCdxofEBxNS0P-yq5uS_-t8J0xdk-OtR6lRSnWK3lJfoP3B8sWc-SiEzj99-S3vbAt3uIL-YJQLJtqtsFqBwOMlap68Y7E4HdPUrw4imrwjd6WGbKfDAteBuBeqdrs2TINGwZ_tT32Y1ife0pYLBLUX1--HMsqAHO8t1Yq9izSz8vEOAf0rSKAZU9QznPIecoEBDdB2stgIs5SCspOeWu0_bpn0Mn51LlZlS2jRQkXaOfgH5U5V2Qh89U0WPtp-B8VlYVf7ML4lfXWSyhLWX9Hd38uJTiTfYXgmXb4BwBAgK8=)

Kroki

Licensed under CC BY-NC-SA 4.0
Built with Hugo
主题 StackJimmy 设计