Hexo 博客添加思维导图渲染

Hexo

发布日期: 2020-07-20

作者: Small-Rose / 张小菜

更新日期: 2020-07-20

文章字数: 975

阅读时长: 4 分

阅读次数:

Hexo 博客添加思维导图渲染

理论上是不分主题的。

使用这个是因为群里的一位小伙伴希望有个思维导图的分类。我尝试了一下，这个插件是 markdown 页面渲染支持，无法直接放入 ejs 页面来循环分类数据。这个后续再研究研究。

这个插件是大神 HunterXuan 完成的 hexo-simple-mindmap

一、安装插件与使用

1、安装插件

npm install hexo-simple-mindmap

2、直接在文章中使用

在你的文章页面直接使用即可，官方 Demo :

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

效果如下，有画布，可以自由拖拽。

在 Hexo 中使用思维导图
前言
操作指南
准备需要的文件
为主题添加 CSS/JS 文件
使用方法

搞个自己例子：

我的写作博客
公子钺桉
古诗词
烟火人间
梦
第七年的梦
第七年之梦
梦里的故事
白话江湖
功名厄
双生梅
晓风残月
拈花盗
门清
人间悲剧
十八堤
西坡寺
望桥
呜咽河

二、分类思维导图

1、目前需要自己手工维护

自动方式还在摸索中。如果嫌麻烦可以跳过第二部分。

如果你想用思维导图展示，可以在 /soure/categoties/index.md 中按上面的格式添加自己的分类。

{% pullquote mindmap mindmap-md %}
- [小菜苔博客](https://hut.zhangxiaocai.cn)
  - Hexo
  - Hexo系统
  - Matery主题系统
  - Matery常见问题
  - Hexo插件
    - valine
    - Valine-Admin
    - 客服与推送
    - 思维导图插件  
  - Java
  - Jdk
    - Jdk8 日期时间API
    - Jdk8 Optional API
    - Jdk 变化补充学习
    - 定时任务
      - Java Timer
      - Spring Task
      - Quartz
    - Jvm
      - 内存结构
      - GC回收算法
      - GC收集器
      - 调试工具
  - Mybatis
    - 主要组件
    - Mybatis配置
    - 动态SQL
    - 工作原理
    - Mapper映射器
    - Mapper级联
    - Mybatis模糊查询 
  - 数据库
  - SQL
    - SQL查询前N条级联
    - SQL模糊查询 
    - SQL分页N种玩法
  - DB2
      - DB2常用命令
      - DB2常见错误码
    - DB2常用函数 
  - Mysql
    - Mysql常用命令
    - Mysql登录异常
{% endpullquote %}

2、新建 category-mindmap.ejs

在主题目录 /layout/_widget/目录下新建 category-mindmap.ejs 文件。内容如下：

<div class="container" data-aos="fade-up">
    <div class="card">
        <div id="category-map" class="card-content">
    <%- page.content %>

    </div>
    </div>
</div>

2、引入支持

找到主题目录下 /layout/mindmap.ejs , 添加以下代码：

 <%- partial('_widget/category-mindmap') %>

加了之后，大概是这样子：

<%- partial('_partial/bg-cover') %>

<main class="content">

    <%- partial('_widget/category-cloud') %>

    <% if (site.categories && site.categories.length > 0) { %>
    <%- partial('_widget/category-radar') %>
    <% } %>


    <%- partial('_widget/category-mindmap') %>
</main>

如果你使用了多级分类，加了之后，大概是这样子：

<%- partial('_partial/bg-cover') %>

<main class="content">

    <%- partial('_widget/category-cloud') %>

    <% if (site.categories && site.categories.length > 0) { %>
    <%- partial('_widget/category-radar') %>
    <% } %>

    <%- partial('_widget/category-list') %>

    <%- partial('_widget/category-mindmap') %>
</main>

相关文章