Hugo学习笔记六，serif主题下配置mermaid

采用LoviIt主题己经配置好了mermaid，看甘特图了。可是采用serif没有配置过肿么办？百度有教程，总结如下：

1. 在 themes/serif/layouts/目录下新建shortcodes目录，并在 themes/serif/layouts/shortcodes/目录下新建文件 mermaid.html, 内容如下

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

2. 更改 themes/serif/layouts/partials/header.html文件，在文件末尾加入以下代码

{{ if (.Params.mermaid) }}
<!-"mermaid",JS support -->
<script async src="https://unpkg.com/mermaid@9.4.3/dist/mermaid.min.js"></script>
{{ end }}

3. 很重要，在md文件头上加入 mermaid: true

4. 实验甘特图，代码如下：

甘特图

{{< mermaid >}}gantt
   dateFormat  YYYY-MM-DD
   title 利用mermaid功能，增加一个甘特图
   section 第一节
   己完成任务           :done,    des1, 2014-01-06,2014-01-08
   正在进行的任务               :active,  des2, 2014-01-09, 3d
   未来任务1               :         des3, after des2, 5d
   未来任务2               :         des4, after des3, 5d
   section Critical tasks
   Completed task in the critical line :crit, done, 2014-01-06,24h
   Implement parser and jison          :crit, done, after des1, 2d
   Create tests for parser             :crit, active, 3d
   Future task in critical line        :crit, 5d
   Create tests for renderer           :2d
   Add to mermaid                      :1d
{{< /mermaid >}}

或在md文件中加入

<<div class="mermaid">
graph LR
    A --- B
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
</div>