hexo-theme-Wikitten增加支持mermaid图


最近使用hexo的Wikitten主题搭建了一个类似wiki的标准化基础标库,遇到了Mermaid无法渲染的问题,解决办法总结如下:

1. 安装mermaid支持

切换到博客目录,执行以下指令:

npm install --save hexo-filter-mermaid-diagrams

这个库的GitHub地址是:https://github.com/webappdevelp/hexo-filter-mermaid-diagrams

2. 配置主题

在主题的themes\Wikitten\cofig.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,而不是blog的_config.yml。

3. 修改主题文件

修改主题themes\Wikitten\layout\common路径下的footer.ejs文件,在第2行,即<footer id="footer">之后,<div class="outer">之前,插入如下:

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

4. 其他

  1. 渲染效果:https://basestd.stdfirm.com/wiki/03-biao-zhun-hua-biao-zhun-ti-xi-xue-xi-zhi-shi-tu-pu-biao-zhun-ti-xi/
  2. mermaid的教程,网上很多,推荐一个imooc的教程:https://www.imooc.com/wiki/markdownlesson/markdownflowchart.html

好了,就到这里吧,祝玩的开心~


文章作者: 小酌笔墨
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 小酌笔墨 !
  目录