在 Hexo 中使用思维导图

发表于 分类于 阅读次数： Valine： 本文字数： 1.1k 阅读时长 ≈ 1 分钟

前言

最近一直想把一些思维导图放在博客上，然而找了很久没有发现可以用的 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.css 为 mindmap.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-sm、mindmap-md 和 mindmap-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 %}

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

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