【开源自荐】在Vitepress/dumi/Rspress/docsify等场景中渲染树的正确打开方式

[zhangfisher]

在使用Vitepress/dumi/Rspress/docsify等基于markdown的静态网站生成器如何更好地渲染树组件一直是个问题。

现在的静态网站生成器功能均非常强大，一般均会支持直接在Markdown中直接写Vue或React组件，按理说，要渲染树组件应该容易才对，但是很不幸的是现有的组件均不是为Markdown场景准备，实际使用非常不方便。

为什么这样说呢？

一般在要显示树时，我们会使用JSON或HTML来描述树，比如我们要显示一棵组织架构树，采用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步： 安装

npm install @lite-tree/vue
// or
yarn add @lite-tree/vue
// or
pnpm add @lite-tree/vue

• 第2步： 配置

// ./vitepress/config.mts
import { defineConfig } from 'vitepress'

export default defineConfig({
  vue:{
    template: {                      
      compilerOptions: {
        whitespace: 'preserve'
      }
    }
  }
})

• 第3步： 全局导入

// .vitepress/theme/index.js
import 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等静态网站生成器中生成树。

开源地址