如何让 hexo 显示 Typora 的流程图

官方github地址

博客框架: hexo 博客主题: next MarkDown 工具: Typora

hexo 不能直接显示流程图, 平时是没多大关系, 但总会有要用到的时候

1. 首先安装 yarn ( 如果你在安装前就打开了 powershell, 那么得重新打开 powershell 才能用 yarn )
2. 在博客文件夹里安装:

yarn add hexo-filter-mermaid-diagrams

注意: 这里是博客文件夹, 即~\source_posts 而不是 hexo 根目录

3. 站点配置文件: _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

我是 next 主题就只讲 next 主题的下一个设置方法, 其他主题请参考 官方github

4. 打开 ~\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({{ JSON.stringify(theme.mermaid.options) }});
    }
  </script>
{% endif %}

最后重启一下, 就可以看到啦

详细效果请见:

微信小程序登录流程控制

MarkDown 简介 如你所见, 只能展示 mermaid 的~ 唉 暂时先这样把

TODO+1