想要在 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 */%}}

效果如下:

  • 根目录
    • 一级目录1
      • 二级目录1
      • 二级目录2
    • 一级目录2

原理如下:

  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)