博客与建站

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 %}
  2. 修改 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
<pre class="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</pre>