Shortcode：MindMap

之前检索到一些基于百度的 kityminder 的插件，但是 kity 默认的脑图有点丑。

由于本人都是基于 Vscode 的 Markmap 插件来预览 MindMap，所以就想着能不能在 Hugo 中使用 Markmap。后面发现可以使用 markmap 来实现，基于markmap-autoloader。下面为具体实现步骤：

Shortcode：MindMap实现

之前的纯 MindMap 实现主要是为了懒，开一个参数就整个页面变为 MindMap，但是有可能需要在某个模块中使用思维导图，而不影响之前的 Markdown 语法，遂加入到 Shortcode 中，具体实现如下：

1. 在根目录的 layouts/shortcodes 下新建文件 mindmap.html，添加如下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<div class="markmap">
    <script type="text/template">
    {{ .Inner }}
    </script>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<style>
    svg.markmap {
        width: 100%;
        height: 100vh;
    }
</style>

这个 shortcodes 非常简单，就是将其中的内容渲染出来套个 div 的壳子，然后利用 markmap 来渲染。

1
2
3
4
5
6
7

{{\< mindmap >}}
# 根目录
- 一级目录1
  - 二级目录1
  - 二级目录2
- 一级目录2
{{\<  /mindmap >}}

记得去掉 \。

Markmap 语法结构如下：

效果如下：