Hexo博客在matery主题下插入mermaid流程图

本文解决hexo本身无法渲染mermaid流程图的问题,本质是加载对应的js文件

其他主题可以直接参考https://github.com/webappdevelp/hexo-filter-mermaid-diagrams

官方指定在after-footer.ejs文件中插入以下代码

<% 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>
<% } %>

而实际上在matery主题中没有该文件

解决方法

第一步 增加js代码

在matery主题路径themes/hexo-theme-matery/layout/_partial下找到footer.ejs

直接在该文件的最后添加如下代码

<% if (theme.mermaid.enable) { %>
  <script src='https://unpkg.com/mermaid/dist/mermaid.min.js'></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({theme: 'forest'});
    }
  </script>
<% } %>

注意到去掉了原本中间的版本控制, 因为版本选择可能会导致加载的js不能正常显示typora中的mermaid图

• 如果想要修改主题则直接在这里修改theme后的内容为如下: default | dark | forest | neutral

第二步 增加yml文本

在主题的配置文件下themes/hexo-theme-matery/_config.yml增加文本

mermaid:
  enable: true

结语

不出意外到这里进行测试就可以见到hexo能够加载出来mermaid图了(撒花)

如果没能成功加载, 可以查看源代码查找mermaid, 看看增加的ejs代码是否成功渲染