hexo ocean 主题集成 mermaid

2023-02-08

mermaid 是一款可以使用文本来绘图的工具，支持流程图、时序图、类图、饼状图等等，更多看这里。它可以支持在 markdown 中使用，这对于我这种程序员非常的好用，可以代替一些插图，hexo 对插图是一大痛点（上传图片，然后在 markdown 中插入链接，重要的是要考虑储存位置、空间和后期的维护），本人习惯使用代码块或文字的方式代替，所以这是一篇 hexo ocean 集成 mermaid 的文档。

先做个展示如下

flowchart LR
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

安装插件

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

添加配置

方式一：远程加载 mermaid

添加配置
到 themes/ocean 的 _config.yml 文件中添加以下配置

1
2
3

mermaid: 
  enable: true
  version: "9.0.0" # 远程加载

进入 themes/ocean/layout/_partial 目录找到 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>
<% } %>

方式二：本地加载 marmaid（推荐）

本地加载 js 比远程访问速度快，所以推荐。配置跟第一种差不多，只是源码文件下载到本地。

添加配置
到 themes/ocean 的 _config.yml 文件中添加以下配置

1 2	mermaid: enable: true

下载 mermaid 源码，@后面的是版本，可以挑选自己想要的版本，版本信息看这里
地址：https://unpkg.com/mermaid@9.0.0/dist/mermaid.min.js
下载后放到 themes/ocean/source/js 目录下，文件名可以叫做 mermaid.min.js，名字可以自定义。
进入 themes/ocean/layout/_partial 目录找到 after-footer.ejs 加入以下代码：

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

OK，到此配置结束。

参考：https://github.com/webappdevelp/hexo-filter-mermaid-diagrams