科技

給Hugo加上流程圖的功能

給Hugo的mini主題套上flowchart.js

參考文章(https://lucumt.info/post/hugo/enable-diagrams-in-hugo/#flowchart%E5%9B%BE%E8%A1%A8)

觀察theme/mini/layout/_default/baseof.html，發現{{ partial "footer.html" . }}這段。

於是我們能在layouts/partical/footer.html內，新增程式碼：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<!-- flowchart -->
{{- if and (or .Params.flowchartDiagrams.enable (and .Site.Params.flowchartDiagrams.enable (ne .Params.flowchartDiagrams.enable false))) (or .IsPage .IsHome) -}}
	<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js" integrity="sha512-tBzZQxySO5q5lqwLWfu8Q+o4VkTcRGOeQGVQ0ueJga4A1RKuzmAu5HXDOXLEjpbKyV7ow9ympVoa6wZLEzRzDg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.18.0/flowchart.min.js" integrity="sha512-FX1RpRt8RDEtTiFbDxg4u62QUJXhVE+cVE1mBD0iSOpj/ZZ/VNyZKlwhBT39QMcP5KEYS3yU8wh6Qpa57qVnbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script>
		let flowPageOptions = {{ .Page.Params.flowchartDiagrams.options  }};
		let flowSiteOptions = {{ .Site.Params.flowchartDiagrams.options  }};
		flowPageOptions = !!flowPageOptions ? flowPageOptions : {};
		flowSiteOptions = !!flowSiteOptions ? flowSiteOptions : {};

		// page options have high priority then site options
		let flowOptions = {...flowSiteOptions, ...flowPageOptions}; 
		
		document.querySelectorAll('[id^="flow_"]').forEach(function(elem) {
			code = elem.querySelector('pre');
			flowchart.parse(code.innerText).drawSVG(elem, flowOptions);
			code.hidden = true;
		})
	</script>
{{- end -}}

新增檔案layout/_default/_markup/render-codeblock-flow.html。

1
2
3
4
5

<div id="flow_{{ .Ordinal }}">
  <pre>
    {{- .Inner | safeHTML }}
  </pre>
</div>

最後為了避免流程圖太大，新增以下css

1
2
3
4

svg {
    width: 100%;
    height: auto;
}

mini主題支援自訂css，需在hugo.toml新增：

1
2

[params]
customCSS = [ 'css/custom.css' ]

並將該文件至於static/css/custom.css