博客与建站

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

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

  1. 在 themes/serif/layouts/目录下新建shortcodes目录，并在 themes/serif/layouts/shortcodes/目录下新建文件 mermaid.html, 内容如下
    1
    2
    3
    <div class="mermaid">
     {{.Inner}}
    </div>
  2. 更改 themes/serif/layouts/partials/header.html文件，在文件末尾加入以下代码
    1
    2
    3
    4
    {{ 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. 实验甘特图，代码如下：
甘特图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{{< 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文件中加入

1
2
3
4
5
6
7
8
<<div class="mermaid">
graph LR
    A --- B
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
</div>