hexo 新增mermaid支持

博客搭建
留言

趁着博客整合，修理一下mermaid不支持的问题。

从网上找到了一些教程，但是配置过程中也发现了一些问题，所以在这里记录一下。

一、安装

安装插件：

1
npm install hexo-filter-mermaid-diagrams

添加配置。在主题目录下的_config.yml文件中新增配置：

1
2
3
4
5
6
# 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

添加支持。我使用的BuleLake主题js后缀是.ejs（其它类型（.pug、.swig）参考Github说明），在themes\bluelake\layout\_partial\**after-footer.ejs**中添加如下内容

1
2
3
4
5
6
7
8
<% 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>
<% } %>

二、使用

主题类型：（在上面修改文件时配置）：

  • default - This is the default theme for all diagrams.
  • neutral - This theme is great for black and white documents that will be printed.
  • dark - This theme goes well with dark-colored elements or dark-mode.
  • forest - This theme contains shades of green.
  • base - This is the only theme that can be modified. Use this theme as the base for customizations.

三、注意

  • mermaid新增配置是修改的主题目录下的文件
  • 需要将根目录配置_config.yml中highlight下的auto_detect设置为true