给hexo增加绘甘特图的功能,采用mermaid插件
一 安装加mermaid插件
1 | ## https://github.com/webappdevelp/hexo-filter-mermaid-diagrams |
二 修改博客根目录下的 _config.yml文件,增加
1 | ### 这个己验证 |
三 修改脚本
- 修改 blog/themes/landcape-plus/layout/_partial/footer.ejs文件,最后一行增加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!-- 增加mermaid 配置 -->
{% if theme.mermaid.enable %}
<script type="text/javascript" src='https://unpkg.com/mermaid@9.4.3/dist/mermaid.min.js'></script>
<script>
if (window.mermaid) {
var mermaid_config = {
startOnLoad: true,
theme: '{{theme.mermaid.theme}}',
flowchart:{
useMaxWidth: false,
htmlLabels: true
}
}
mermaid.initialize(mermaid_config);
}
</script>
{% endif %} - 修改 blog/themes/next/_partial/footer.swig文件 增加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17{% if theme.mermaid.enable %}
<script type="text/javascript" src='https://unpkg.com/mermaid@9.4.3/dist/mermaid.min.js'></script>
<script>
if (window.mermaid) {
var mermaid_config = {
startOnLoad: true,
theme: '{{theme.mermaid.theme}}',
flowchart:{
useMaxWidth: false,
htmlLabels: true
}
}
mermaid.initialize(mermaid_config);
}
</script>
{% endif %}
四 验证,增加.md文件,语句写
1 | <pre class="mermaid"> gantt |