目录

思维导图

hugo思维导图方案概览

根测试

  • 根测试
    • 测试1
      • 测试11
      • 测试12
    • 测试2
      • 测试21
      • 测试22

hugo支持思维导图

FrontMatter设置mindmap

目的：避免所有页面或所有文章无脑加载思维导图相关的js、css等资源文件。

---
title: "hugo支持思维导图"
isCJKLanguage: true
date: 2020-01-01 22:24:53
categories: 
...
mindmap: true
---

资源文件引入

我们是在jquery的基础上实现的，jquery相关以下不再提及。

在layout/partials/下的script.html或其他文章模板html文件适当位置引入以下资源：

<script src="{{.Site.BaseURL}}js/kity.min.js"></script>
<script src="{{.Site.BaseURL}}js/kityminder.core.min.js"></script>
<script src="{{.Site.BaseURL}}js/mindmap.js"></script>
<link href="{{.Site.BaseURL}}css/kityminder.core.css" rel="stylesheet">
<link href="{{.Site.BaseURL}}css/mindmap.css" rel="stylesheet">

kity.min.js：核心 svg 渲染库

kityminder.core.min.js：脑图渲染库

mindmap.min.js：来自 @HunterXuan 开发的，用来将 li 结构转换成脑图需要的 json 的文件

kityminder.core.css：核心 svg 渲染库

mindmap.css：脑图渲染库

【在这里找到这些资源文件】

将markdown格式渲染为html

在/layouts/shortcodes/ 下新建一个 html，先创建 mind-md.html，内容如下：

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

相应的创建mind-lg.html文件

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

最后创建mind-sm.html文件。

总共三个关于mindmap的shortcodes。

markdown思维导图格式

- 根测试
    - 测试1
        - 测试11
        - 测试12
    - 测试2
        - 测试21
        - 测试22

效果：根测试

原理

  • mindmap.js 解析了渲染出来的 ul-li 结构
  • 遍历生成了一个 json 对象
  • 用这个对象渲染了一个脑图
  • 然后替换了 div.mindmap 这个 dom结构
  • 如果需要插入多个脑图，建议修改 mindid ，已作区分