hugo支持绘图
目录
支持mermaid设置绘图展示开关
Front Matter：
---
title: "hugo支持绘图"
isCJKLanguage: true
date: 2020-10-13 22:24:53
...
mermaid: true
---
好处：避免所有页面或所有文章无脑加载绘图相关的js、css等资源文件。
在模板中添加支持js代码
可在对应模板，singe或script等文章模板html文件中添加如下js代码：
{{ if .Params.mermaid }}
<script
src="https://cdn.jsdelivr.net/npm/mermaid@8.8.2/dist/mermaid.min.js"
integrity="sha256-KqisLh8jVMBRjpNkOhH5W9VWs+F6x6vQksLqxs7+x9A="
crossorigin="anonymous"
></script>
<script>
// Replace mermaid pre.code to div
Array.from(document.getElementsByClassName("language-mermaid")).forEach(
(el) => {
el.parentElement.outerHTML = `<div class="mermaid">${el.innerText}</div>`;
}
);
</script>
<style>
/* Set svg to center */
.mermaid svg {
display: block;
margin: auto;
}
</style>
{{ end }}
js等资源文件建议使用国内或自有CDN源。
范例
流程图：
graph LR;
爷爷-->爸爸
爷爷-->叔叔
爸爸-->我
爸爸-->姐姐
时序图：
sequenceDiagram;
服务员->>客人: 你好，请问有什么可以帮助你的？
activate 客人
客人-->>服务员: 谢谢，没有。
deactivate 客人
参考
mermaid-js/mermaid: Generation of diagram and flowchart from text in a similar manner as markdown
