博客与建站

Hexo结合mermaid增加甘特图功能，在lanscape-plus主题现实现

给hexo增加绘甘特图的功能，采用mermaid插件

一 安装加mermaid插件
1
2
## https://github.com/webappdevelp/hexo-filter-mermaid-diagrams
 $ npm install hexo-filter-mermaid-diagrams --save
二 修改博客根目录下的 _config.yml文件，增加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
### 这个己验证
# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "9.4.3" # default v9.0.0
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true
### 有的教程说增加如下，
# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: default

三 修改脚本
  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 %}
  1. 修改 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
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