一个为 FixIt 主题提供 markmap 思维导图支持的 Hugo 组件。
简体中文 | 繁體中文 | English | Français | Русский язык | Español | हिन्दी | Deutsch | 한국어 | 日本語- 支持在任意 Markdown 文件中通过代码块嵌入 markmap 思维导图,可自定义高度
- 提供专属
markmap页面布局,左侧显示文章内容,右侧展示思维导图,可拖拽调整面板宽度 - 自定义工具栏,支持全屏模式
- 与 FixIt 主题深色模式无缝集成
- FixIt v1.0.0 或更高版本
Note
依赖 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.toml 配置文件中:
[module]
[[module.imports]]
path = "github.com/hugo-fixit/FixIt"
[[module.imports]]
path = "github.com/hugo-fixit/cmpt-markmap"在 Hugo 的第一次启动时,它将下载所需的文件。
要更新到模块的最新版本,请运行:
hugo mod get -u
hugo mod tidy将 FixIt 和此 git 存储库克隆到你的主题文件夹中,并将其作为网站目录的子模块添加。
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 并将此主题组件添加到你的主题中:
theme = ["FixIt", "cmpt-markmap"]为了通过 FixIt 主题开放的 自定义块 将 cmpt-markmap.fixit.html 注入到 custom-assets 中,你需要填写以下必要配置:
[params]
[params.customPartials]
# ... other partials
assets = [
"inject/cmpt-markmap.fixit.html",
]
# ... other partials- 主题配置文件和页面 Front Matter 中使用
snake_case。 - 扩展
markmap代码块内的 Front Matter 使用camelCase(与 markmap 官方文档一致)。
全局默认配置:
[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):
```markmap
# 根节点
## 分支一
## 分支二
```或者带有 Front Matter 配置:
```markmap {height="400px"}
---
title: 根节点
markmap:
colorFreezeLevel: 2
---
## 分支一
## 分支二
```在页面 Front Matter 中设置 layout: markmap,即可启用专属的分栏思维导图页面布局:
---
title: 我的思维导图
layout: markmap
markmap:
color_freeze_level: 2
---
## 分支一
## 分支二