在 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
發佈時間
2020-12-16