hexo中如何支持mermaid图表

hexo中如何支持mermaid图表

听风知秋雨 527 2020-03-15

一、首先想要HEXO支持 mermaid 图表需要安装一个插件:

  • 执行npm命令
npm install hexo-filter-mermaid-diagrams

二、 编辑*_config.yml* 配置文件

  • _config.yml配置文件中(根目录下的 )的最后加上以下内容
# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "7.1.2" # default v7.1.2
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true
  • 需要注意的是检查主题中的*_config.yml*配置文件是否有mermaid的配置(next主题)
  • 如果有的话默认是一下配置,需要把enable改为true,否则插件不会被启用
# Mermaid tag
mermaid:
  enable: false 
  # Available themes: default | dark | forest | neutral
  theme: forest

三、 引入相关的js文件

  • 找到主题里面的页脚文件, themes/next/layout/_partials/footer.swig ,在文件最末尾加入以下内容
{% if (theme.mermaid.enable)  %}
  <script src='https://unpkg.com/mermaid@{{ theme.mermaid.version }}/dist/mermaid.min.js'></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({theme: 'forest'});
    }
  </script>
{% endif %}

四、配置完成之后执行三部曲:

hexo clean # 清理
hexo g	   # 构建
hexo s     # 运行

五、最后献上几个链接供参考:

官网:

https://github.com/webappdevelp/hexo-filter-mermaid-diagrams

参考文献:

https://tyloafer.github.io/posts/7790/

https://rogersnowing.cn/post/38b5106c.html


 hexo