使用hexo-markmap插件

  1. 安装hexo-markmap插件

    在博客根目录下运行如下命令安装hexo-markmap插件：

    1
    npm install hexo-markmap --save

  2. 配置插件

    打开根目录下的_config.yaml文件，在合适的位置添加如下配置：

    1
    2
    3
    hexo_markmap:
      pjax: true
      katex: true

    打开根目录下的_config_butterfly.yaml文件，打开pjax和katex选项：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    #pjax
    pjax:
      enable: true
      
    # KaTeX
    katex:
      enable: true
      per_page: false
      hide_scrollbar: true

  3. 在文章的中添加

    1
    2
    3
    4
    5
    6
    7
    8
    title: 在博客中插入思维导图
    tags:
      - 建站
      - 思维导图
    abbrlink: fcc911f
    date: 2023-04-24 09:09:47
    katex: true
    ---

  4. 用法

    1
    2
    3
    4
    {% markmap height [depth] %}
    - Markdown
    - Syntax
    {% endmarkmap %}

  5. 示例一

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {% markmap 400px %}

    - links
    - **inline** ~~text~~ *styles*
      - 分支A
      - 分支B
    - multiline
      text
    - `inline code`
    - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

    {% endmarkmap %}

  6. 示例二

    1
    2
    3
    4
    5
    6
    7
    8
    {% markmap 300px %}
    # Testa
    ## test1
    ## test2
    # Testb
    ## test1
    ## test2
    {% endmarkmap %}

【注意】在思维导图中尽量避免使用代码块，以免引起排版混乱。推荐使用示例一中的语法，以免在Markdown编辑器中被渲染，影响美观。

使用hexo-simple-mindmap插件

使用方法

使用方法可查看博客Hexo 的思维导图插件。

示例

hexo中绘制思维导图的方式

使用hexo-tag-plugins插件

使用方法及示例请查看原文Hexo Butterfly 的标签外挂。

参考链接

  1. 如何在 Hexo 中较为优雅的插入思维导图？hexo-markmap 演示
  2. Hexo 的思维导图插件
  3. Hexo Butterfly 的标签外挂