Hexo NexT 主题渲染 Mermaid 绘图

发表于 |

前言

由于我的Hexo博客中的Next主题是旧版, 并不支持mermaid, 因此需要手动配置, 步骤如下

配置步骤

第一步 安装 mermaid 插件

在博客的根目录下，执行以下命令安装 hexo-filter-mermaid-diagrams 插件

1
$ npm install hexo-filter-mermaid-diagrams --save
第二步 NexT 启用 Mermaid

打开 NexT 主题的 _config.yml 配置文件，添加以下代码：

1
2
3
4
5
# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: default
第三步 添加script脚本

打开next/layout/_partials/footer.swig文件, 添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if theme.mermaid.enable %}
  <script type="text/javascript" src='https://unpkg.com/mermaid@9.0.0/dist/mermaid.min.js'></script>
  <script>
  if (window.mermaid) {
        var mermaid_config = {
            startOnLoad: true,
            theme: '{{theme.mermaid.theme}}',
            flowchart:{
                useMaxWidth: false,
                htmlLabels: true
            }                
        }
        mermaid.initialize(mermaid_config);
  }
  </script>
  {% endif %}

至此 配置完毕

js本地引用

如果你打算将js文件存放在本地, 可以将js文件放置到next/source/js/src目录下, 那么script脚本改成如下即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if theme.mermaid.enable %}
  <script type="text/javascript" async  src='js/src/mermaid.min.js'></script>
  <script>
  if (window.mermaid) {
        var mermaid_config = {
            startOnLoad: true,
            theme: '{{theme.mermaid.theme}}',
            flowchart:{
                useMaxWidth: false,
                htmlLabels: true
            }                
        }
        mermaid.initialize(mermaid_config);
  }
  </script>
  {% endif %}

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

0%