English

> [!WARNING]
> 这是 hexo-markmap@2 的文档。如果你正在使用 hexo-markmap@1，请查看 这里。
>
> 如果你想升级到 hexo-markmap@2，请查看 这里。

hexo-markmap

在你的 Hexo 博客中插入思维导图，使用 markmap。

安装

``
pnpm add hexo-markmap -D
`

`
npm install hexo-markmap --save-dev
`

`
yarn add hexo-markmap -D
`

> [!TIP]
> 试试我们的新 VS Code 扩展 markmap-universe，直接预览你的 hexo-markmap 思维导图。

使用

`markdown
{% markmap %}
---
markmap:
colorFreezeLevel: 2
---


Markdown

Syntax

{% endmarkmap %}
`

$3

你可以在 markmap 标签（{% markmap %} ... {% endmarkmap %}）中自定义每个思维导图。

#### Frontmatter 选项

就像你在 Hexo 中的 Markdown 文件中使用 frontmatter 一样，你可以在 markmap 标签中使用 frontmatter 来自定义你的思维导图！

所有 frontmatter 选项都是可选的。

- id：用于定义 markmap-wrap 元素的 ID。

- markmap：对应 markmap 项目中的 IMarkmapJSONOptions。有关更多详细信息，请参考 jsonOptions。

#### 标签选项

你还可以直接在标签中指定思维导图的高度，默认情况下会根据内容进行计算。

`markdown
{% markmap 300px %}


Markdown

Syntax

{% endmarkmap %}
`

- height : 用于指定思维导图的高度。

$3

将相应内容追加到 config.yml 中。

约定大于配置，如果你不需要以下某个功能，那么无需添加该配置项。

默认情况下即可正常工作。每个选项都有默认值。

#### 默认配置

`yaml
hexo_markmap:
darkThemeCssSelector: '.dark'
CDN: 'fastly'
`

- darkThemeCssSelector : 用于指定暗黑主题的CSS选择器。
- CDN : 用于指定 Markmap 的 CDN。目前支持的值有 fastly 、 jsdelivr、 unpkg。
- 如果设置为 custom，则 customCDN 的值将被用作 CDN 的前缀。
- customCDN : 为 Markmap 定义自定义 CDN URL。这必须是一个有效的 URL。
- globalOptions : 用于为所有思维导图定义全局选项。
- 对应上面的 Frontmatter 选项。

升级到 hexo-markmap@2

hexo-markmap@2 是由 @coderxi1 与 @maxchang3 全新重构的版本。该版本升级至最新的 Markmap，引入了更多自定义选项，具体改进包括：

- 可在单个 Markmap 标签中，通过 frontmatter 自定义：
- CSS 样式（实现自定义高度、宽度、响应式布局等）
- 自 v2.0.5 起，不再支持在 frontmatter 中设置样式。但你可以结合 id 选项直接在