如何在Directus中实现类似Strapi的动态zones功能？

前置准备：创建各组件对应的独立集合 #

Directus的Many to Any (Poly)多态多对多关系需要关联不同的集合，因此首先要将你需要用到的动态组件各自创建为非单例集合：

• 标题组件集合（命名示例：comp_heading）：添加业务所需字段，比如存储标题文本的content（字符串类型）、存储标题等级的level（整数类型）
• 图片组件集合（命名示例：comp_image）：添加业务所需字段，比如关联系统文件库的image（文件关联类型）、存储图片说明文本的alt_text（字符串类型）
• Markdown组件集合（命名示例：comp_markdown）：添加业务所需字段，比如存储富文本内容的content（Markdown类型）

步骤1：为目标集合添加多态多对多关系字段 #

找到你需要挂载动态组件的目标集合（比如文章集合articles、单页集合pages），添加新字段：

1. 字段类型选择关系(Relationship)
2. 关系类型选择Many to Any (Poly)
3. 允许关联的集合勾选之前创建的三个组件集合：comp_heading、comp_image、comp_markdown
4. 开启配置项中的允许排序开关，该配置是实现组件自定义排列顺序的核心
5. 字段命名示例：dynamic_components，保存字段配置

步骤2：后台内容编辑操作 #

新建/编辑目标集合的内容条目时，找到dynamic_components字段的操作区域即可实现自定义组件组合：

1. 点击添加按钮，选择你需要的组件类型，填写对应组件的内容后保存该组件条目
2. 重复添加操作，按你需要的顺序依次添加不同类型的组件即可得到自定义排列的组件组，比如先加标题、再加Markdown、最后加图片，即可得到A/C/B的排列
3. 若需调整顺序，直接拖动组件条目上下移动即可，排序结果会自动同步
4. 不同的内容条目可独立设置各自的组件类型、内容、排列顺序，互不干扰

步骤3：API调用获取动态组件数据 #

调用目标集合的详情接口时，添加字段参数关联查询dynamic_components即可按排序返回所有组件数据，示例返回结构如下：

{
  "id": 1,
  "title": "测试文章",
  "dynamic_components": [
    {
      "collection": "comp_heading",
      "item": {
        "id": 10,
        "content": "文章主标题",
        "level": 1
      },
      "sort": 1
    },
    {
      "collection": "comp_markdown",
      "item": {
        "id": 22,
        "content": "### 二级标题\n这是正文内容"
      },
      "sort": 2
    },
    {
      "collection": "comp_image",
      "item": {
        "id": 35,
        "alt_text": "封面图",
        "image": { "id": "f98d2c1a", "url": "/assets/cover.png" }
      },
      "sort": 3
    }
  ]
}

前端根据返回数据中collection字段判断组件类型，匹配对应前端组件渲染即可。

内容的提问来源于stack exchange，提问作者Alwaz Shahid