在 Hugo 中加入 js library

善用 shortcode 以及 override theme 的觀念即可

這裡用 mermaid-js 當範例

step1. add short code

layouts/shortcodes/mermaid.html

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

step2. add custom theme

layouts/partials/footer.html

...
{{ if (.Params.mermaid) }}
<script
  async
  src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.8.4/mermaid.min.js"
></script>
{{ end }}

step3. add post parameter

content/posts/xxxxx.md

mermaid: true

done

sequenceDiagram A->>B: hello B->>A: world
cmd + /