在 Hexo 中使用思维导图 | 猎人杂货铺

在 Hexo 中使用思维导图

前言

最近一直想把一些思维导图放在博客上,然而找了很久没有发现可以用的 Hexo 插件。无意间发现百度脑图的开源库 kityminder 很不错,研究了一段时间最终实现了想要的效果。

更新

操作指南

准备需要的文件

  • jquery.min.js:通常情况下不需要另外准备
  • kity.min.js:官方库
  • kityminder.core.min.js:官方库
  • mindmap.css & mindmap.min.js:我已经放到 GitHub

为主题添加 CSS/JS 文件

以 Next 主题为例:

  • 将 JS 文件放入 themes\next\source\js\src 目录下
  • 更改 mindmap.cssmindmap.styl,放入 themes\next\source\css\_custom
  • 编辑 themes\next\source\css\_custom\custom.styl,添加 @import "mindmap"
  • 编辑themes\next\layout\_scripts\commons.swig 中的 js_commons ,添加所需的 JS 文件

简单测试

使用 hexo s ,然后访问 localhost:4000 并打开开发者工具,如果没有报错信息,基本说明操作成功。

使用方法

使用 Hexo 的 pullquote 将思维导图的内容包裹起来,mindmap 是思维导图渲染的标志,尺寸有三种规格:mindmap-smmindmap-mdmindmap-lg

思维导图的内容和层级关系通过无序列表表示,支持基本的文字和超链接。举个例子,撰写文章时在需要的位置添加如下内容。

1
2
3
4
5
6
7
8
{% pullquote mindmap mindmap-md %}
- [在 Hexo 中使用思维导图](https://hunterx.xyz/use-mindmap-in-hexo.html)
- 前言
- 操作指南
- 准备需要的文件
- 为主题添加 CSS/JS 文件
- 使用方法
{% endpullquote %}

会得到如下的思维导图,尽管功能还比较简陋,但是满足了我的使用需求——将知识点以脑图的形式记录在博文中。如果有时间,后续会考虑思维导图的美化和实现缩放操作等等。

当我做完这个,我发现和「幕布」的核心功能神吻合——将无序列表渲染成思维导图。或许我也可以改进下代码,然后搞一个完全免费版的「幕布」,岂不是美滋滋?

『猎人杂货铺 • 微信公众号』