在Vitepress/dumi/rspack/docsify等基于markdown静态网站生成中渲染显示树的最佳方式

发现频道
1

在使用Vitepress/dumi/rspack/docsify等静态网站生成时，一般均支持直接在Markdown中渲染显示Vue/React组件，这给个网站非常丰富极致的表现力，我们在创建静态网站时开心的使用各种Vue/React组件，但是在输出树结构时，实际场景中存在几个问题：

  • 现有的树组件一般均属于某个UI套件的一部分，比较重
  • 树组件的数据一般使用JSON进行描述，冗余很多， 对于在网站输出场景比较交麻烦.

因此，隆重推荐LiteTree这个适用于React/Vue的树组件，专用MarkDown场景准备，具有：

  • 轻量小巧，无任何外部依赖
  • 采用Lite格式描述树，采用类似YAML的缩进来表示层级，数据简洁
  • 支持标识，样式定制，注释，图标等丰富的表现形式

访问官网

例如下面声明一个树：

<LiteTree>
- A公司
    行政中心
        总裁办              //   {color:red}important
        人力资源部
        财务部              //+
        行政部              //+
        法务部
        审计部              //-
        信息中心            //-
    + 市场中心
        市场部
        销售部
        客服部
        品牌部
        市场策划部
        市场营销部
    研发中心
        移动研发部(java,python,go)    //!
        平台研发部
        测试部              //*
        运维部              //*
        产品部
        设计部
</LiteTree>

渲染效果如下：

可以看到，在markdown里面，非常简洁，没有了json那么多的冗余数据。