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

至此 配置完毕

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

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

0%