想要在 blog 中插入脑图，之前一直都在使用插入图片的方法，这样非常不优雅，为了解决这个问题，我搜了不少文章。

一、寻找解决方案

然而 hugo + mindmap 搜不出来什么有用的结果，我转而搜索 hexo + mindmap 找到了几篇文章。

里面是讲怎么在 hexo 中插入脑图的，简单看了一下，是通过 hexo 的 pullquote 功能来插入渲染好的 html 到页面中。

靠谱，我觉得可以！

二、导入相关的库

核心渲染的库是百度的 kityminder ，所以需要导入一些文件：

js 部分

• kity.min.js：核心 svg 渲染库，放入 hugo 目录的 static/js/ 中
• kityminder.core.min.js：脑图渲染库，放入 hugo 目录的 static/js/ 中
• mindmap.min.js：来自 @HunterXuan 开发的，用来将 li 结构转换成脑图需要的 json 的文件，放入 hugo 目录的 static/js/ 中
• jquery.slim.min.js：由于上一个 js 使用了 jquery 的 each 和 find 函数，所以需要放入 hugo 目录的 static/js/ 中，btw 我还蛮讨厌 jq 的，但是懒得用原生方法重新写一遍了。

css 部分

• kityminder.core.css：核心 svg 渲染库，放入 hugo 目录的 static/css/ 中
• mindmap.css：脑图渲染库，放入 hugo 目录的 static/css/ 中

以上的这些文件，你都可以在这里找到。

引入文件

在模板的 header 里一股脑的放入这些文本：

<link href="{{.Site.BaseURL}}css/kityminder.core.css" rel="stylesheet">
<link href="{{.Site.BaseURL}}css/mindmap.css" rel="stylesheet">
<script src="{{.Site.BaseURL}}js/kity.min.js"></script>
<script src="{{.Site.BaseURL}}js/kityminder.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="{{.Site.BaseURL}}js/mindmap.js"></script>

就完成了引用工作，当然你可以选择更规范的引入方法，这里只是为了简单。

三、将 markdown 渲染为 html

前面 hexo 的文章中提到用 pullquote 来渲染 html，hugo 中有没有类似的功能呢？

有的，那就是 shortcodes！

首先在 hugo 目录 /layouts/shortcodes/ 下新建一个 html，我这里起名叫 mind.html，内容如下

<div id="{{ .Get 0 }}" class="mindmap">
    {{- .Inner -}}
</div>

这个 shortcodes 非常简单，就是将其中的内容渲染出来套个 div 的壳子，加上 mindmap 的类名。

然后在 markdwon 中加入这样的文本

{{% mind mindid %}}
- 根目录
    - 一级目录1
        - 二级目录1
        - 二级目录2
    - 一级目录2
{{% /mind %}}

BTW：这里插一句，我才发现如果要阻止 hugo 渲染 short code,要增加注释符号 {{%/* mind mindid */%}}

效果如下：

{{% mind mindid %}}

• 根目录
  • 一级目录1
    • 二级目录1
    • 二级目录2
  • 一级目录2 {{% /mind %}}

原理如下：

1. mindmap.js 解析了渲染出来的 ul-li 结构
2. 遍历生成了一个 json 对象
3. 用这个对象渲染了一个脑图
4. 然后替换了 div.mindmap 这个 dom。

如果需要插入多个脑图，建议修改 mindid ，已作区分。

四、还可以提高的地方

1. kity 默认的脑图还是有点丑，这里后续要调整。
2. 我讨厌 jquery，希望可以原生的实现 mindmap.js

最后感谢一下文章：

1. 在 Hexo 中使用思维导图
2. Hexo中使用markdown来绘制脑图（mind map）