在使用Vitepress/dumi/Rspress/docsify等基于markdown的静态网站生成器如何更好地渲染树组件一直是个问题。现在的静态网站生成器功能均非常强大，一般均会支持直接在Markdown中直接写Vue或React组件，按理说，要渲染树组件应该容易才对，但是很不幸的是现有的组件均不是为Markdown场景准备，实际使用非常不方便。为什么这样说呢？一般在要显示树时，我们会使用JSON或HTML来描述树，比如我们要显示一棵组织架构树，采用JSON````json{ "name": "A公司", "children": [ { "name": "行政中心", "children": [ { "name": "总裁办", }, { "name": "人力资源部", "checked": true }, { "name": "财务部", "unchecked": true, }, { "name": "行政部", "comment": "负责行政管理" }, { "name": "法务部", "comment": "打官司等" }, { "name": "审计部", "attributes": { "icon": "airplane" }, "comment": "审计财务", }, { "name": "信息中心", "comment": "重点", }, { "name": "安全保卫部", "comment": "保密工作", } ] }, { "name": "市场中心", "collapsed": true, "children": [ { "name": "市场部" }, { "name": "销售部", "collapsed": true }, { "name": "客服部", "collapsed": true }, { "name": "品牌部", "comment": "this is cool" }, { "name": "市场策划部", }, { "name": "市场营销部", } ] }, .... ]}````JSON或者HTML采用JSON或者HTML来描述树的最在问题在于:- 太多冗余数据了- 最要命的是很容易出错，少一个标点符号均可以导至解析失败，对于稍复杂的树就有点抓瞎了。这在源码编辑场景时，有IDE加持不是太大的问题。但是在markdown中就很成问题了。LiteTree是一款专为Markdown场景准备的树组件，其采用的是用类似YAML的方式，由4个空格或1个TAB来描述树，所以在Markdown中来描述树就非常简洁。以Vitepress为例：- 第1步： 安装shellnpm install @lite-tree/vue// oryarn add @lite-tree/vue// orpnpm add @lite-tree/vue- 第2步： 配置ts// ./vitepress/config.mtsimport { defineConfig } from 'vitepress'export default defineConfig({ vue:{ template: { compilerOptions: { whitespace: 'preserve' } } }})- 第3步： 全局导入diff// .vitepress/theme/index.jsimport DefaultTheme from 'vitepress/theme'+ import { LiteTree } from '@lite-tree/vue'/** @type {import('vitepress').Theme} */export default { extends: DefaultTheme, enhanceApp({ app }) { // 注册自定义全局组件+ app.component('LiteTree'，LiteTree) }}- 第4步： 创建树LiteTree最大的特点是支持使用4个空格或1个TAB代表树的一个层级缩进，这使得在 Markdown中创建树非常简洁直观，这才是在Markddown中渲染树的正确打开方式。****直接在任意markdown中按如下方式声明树：<LiteTree>- [airplane]A公司({color:red;}重点,{#blue}紧急) // 企业名称 行政中心 {color:red;font-weight:bold;background:#ffeaea}总裁办 [checked]人力资源部 [unchecked]{.blue}财务部 行政部 //+ 负责行政管理 法务部 //+ 打官司等 [airplane]审计部 //+ 审计财务[保存:tag](sss) [连接](sss) 信息中心 // 重点[保存](www.baidu.com)[tag][连接:tag](www.baidu.com) [star]安[star]全[star]保[star]卫[star]部[star] //{color:red} 保密工作 + 市场中心 市场部({#error}出错,"{#warning}警告") 销售部 //- 客服部 //- {#blue}品牌部 // this is cool 市场策划部 //! 重点 市场营销部 // {.blue}this is cool 研发中心 移动研发部 //! 平台研发部({success}Java,{error}Go) {.success}测试部 运维部 产品部 //* 设计部 //* 项目管理部 //*</LiteTree>渲染效果如下：- 小结LiteTree包含@lite-tree/vue、@lite-tree/react、@lite-tree/webcomponent三个版本，基本覆盖了所有的Markdown场景。支持在Vitepress/dumi/Rspress/docsify等静态网站生成器中生成树。开源地址