Ados

a fullstack game worker

0%

Hexo添加Mermaid支持

Preface

Mermaid 是一个支持Markdown的流行的js图标库。

让你可以直接在Markdown中画流程图,支持流程图,甘特图,序列图等等。

之前的笔记中已经有写了一个流程图,但是一直没有渲染出来。

搁置今日去解决了一下

Steps

1. 安装Mermaid插件

在当前文件夹下面运行如下命令:

1
npm i hexo-filter-mermaid-diagrams

2. 修改 _config.yml

theme/hexo-theme-next-7.1.1*下面有一个 *_config.ymlhexo支持的样式和配置都在这里找的。

找到mermaid相关:

1
2
3
4
5
6
7
# Mermaid tag
mermaid:
enable: true
# Available themes: default | dark | forest | neutral
theme: forest
cdn: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
#cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js

复制到项目项目的 _config.yml 中去,然后修改为如下:

1
2
3
4
5
6
7
8
9
mermaid:
enable: true
# Available themes: default | dark | forest | neutral
version: "7.1.2"
options:
theme: forest
startOnLoad: true
# cdn: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
#cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js

3. 添加Mermaid页面嵌入

进入 theme/hexo-theme-next-7.1.1/layout/ 中,打开footer.swig,在最后面添加如下代码:

1
2
3
4
5
6
7
8
{% if mermaid.enable %}
<script src='https://unpkg.com/mermaid@{{ mermaid.version }}/dist/mermaid.min.js'></script>
<script>
if (window.mermaid) {
mermaid.initialize({{ JSON.stringify( mermaid.options) }});
}
</script>
{% endif %}

4. 重启

运行

1
hexo g

此时,可以在页面上看到图表正常渲染出来了。

Tips

遇到问题可以查看Terminal和浏览器的console看是否有异常。

其他

Hexo多tags格式是

1
tags: [tag1,tag2]

已测

或者

1
2
3
tags:
- tag1
- tag2

未测

Reference

Mermaid

Hexo Mermaid插件