cmpt-markmap | FixIt
特性
- 支持在任意 Markdown 文件中通过代码块嵌入 markmap 思维导图，可自定义高度
- 提供专属
markmap 页面布局，左侧显示文章内容，右侧展示思维导图，可拖拽调整面板宽度 - 自定义工具栏，支持全屏模式
- 与 FixIt 主题深色模式无缝集成
要求
注意
依赖 FixIt v1.0.0 是因为用到了 function/snake2camel.html，用于将主题配置文件 / 页面 Front Matter 中的 snake_case 选项转换为 markmap 所需的 camelCase。若你使用的是 FixIt v0.4.5，也可以通过将 FixIt 中的 layouts/_partials/function/snake2camel.html 复制到自己的项目中来使用本组件。
安装组件
安装方式与 安装主题 相同，有多种安装方式，任选一种即可，这里介绍两种主流方式。
作为 Hugo 模块安装
首先确保你的项目本身是一个 Hugo 模块。
然后将此主题组件添加到你的 hugo.toml 配置文件中：
1
2
3
4
5
6
7
| [module]
[[module.imports]]
path = "github.com/hugo-fixit/FixIt"
[[module.imports]]
path = "github.com/hugo-fixit/cmpt-markmap"
|
在 Hugo 的第一次启动时，它将下载所需的文件。
要更新到模块的最新版本，请运行：
1
2
| hugo mod get -u
hugo mod tidy
|
作为 Git 子模块安装
将 FixIt 和此 git 存储库克隆到你的主题文件夹中，并将其作为网站目录的子模块添加。
1
2
| git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt
git submodule add https://github.com/hugo-fixit/cmpt-markmap.git themes/cmpt-markmap
|
接下来编辑项目的 hugo.toml 并将此主题组件添加到你的主题中：
1
| theme = ["FixIt", "cmpt-markmap"]
|
配置
为了通过 FixIt 主题开放的 自定义块 将 cmpt-markmap.fixit.html 注入到 custom-assets 中，你需要填写以下必要配置：
1
2
3
4
5
6
7
8
| [params]
[params.customPartials]
# ... other partials
assets = [
"inject/cmpt-markmap.fixit.html",
]
# ... other partials
|
markmap 选项
- 主题配置文件和页面 Front Matter 中使用
snake_case。 - 扩展
markmap 代码块内的 Front Matter 使用 camelCase（与 markmap 官方文档一致）。
全局默认配置：
1
2
3
4
5
6
| [params]
# Markmap configuration for layout (in snake_case)
# https://markmap.js.org/docs/json-options#option-list
[params.markmap]
color_freeze_level = 0
|
用法
扩展代码块
在任意 Markdown 文件中，以 markmap 为语言标识使用围栏代码块，支持 height 属性（默认 24rem）：
1
2
3
4
5
6
7
| ```markmap
# 根节点
## 分支一
## 分支二
```
|
或者带有 Front Matter 配置：
1
2
3
4
5
6
7
8
9
10
11
| ```markmap {height="400px"}
---
title: 根节点
markmap:
colorFreezeLevel: 2
---
## 分支一
## 分支二
```
|
页面布局
在页面 Front Matter 中设置 layout: markmap，即可启用专属的分栏思维导图页面布局：
1
2
3
4
5
6
7
8
9
10
| ---
title: 我的思维导图
layout: markmap
markmap:
color_freeze_level: 2
---
## 分支一
## 分支二
|
参考
FixItHugo 主题