目录

拓展hugo的markdown_流程图mermaid

有一段时间用有道云笔记来做笔记。里面有一个非常喜欢的功能就是流程图。

同时我在看自己的站点过程中,觉得不够美观。更多的使用图表类似的功能,会让表达更加直观。所以今天就来动手做一下。

hugo的渲染

使用markdown

主要采用markdown文件进行文章的编写,它的方案如下:

  1. md文件的解析,是用的blackfriday
  2. 除了已有的自带拓展,提供shortcodes来进行功能的拓展

shortcodes的演示

使用{{< youtube 8HnLRrQ3RS4 >}}的简短编写,即可完成如下youtube视频的展示。

想要自动播放的话,使用{{< youtube id="8HnLRrQ3RS4" autoplay="true" >}}"即可。

为markdown拓展流程图

关于mermaid

mermaid是一个js库,用来渲染流程图用的。2w多的star,看了一下文档,觉得博客是肯定够了的。

如果真的要求特别高,那不如用专业软件做出来,导出图片更好。

拓展步骤

  1. 在你使用的主题中,找到yoursite/themes/themes_name/layouts文件夹,如果没有shortcodes文件夹,就自己新建一个
  2. mermaid的script标签贴到yoursite/themes/themes_name/layouts/partials/footer.htmlfooter外部
1
2
<!--head部分添加-->
<script src="https://cdn.bootcss.com/mermaid/8.0.0-rc.8/mermaid.min.js"></script>

shortcodes目录下新建mermaid.html文件

1
2
3
4
5
6
7
8
<!--mermaid.html-->
<div class="mermaid" align="{{ if .Get "align" }}
                                {{ .Get "align" }}
                            {{ else }} 
                                center
                            {{ end }}"> 
    {{ safeHTML .Inner }}
</div>

ojbk,测试一下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{{< mermaid >}}
sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
{{< /mermaid >}}

文档参考

mermaid文档

hugo文档