组件类型

您定义组件。组件是与 UI 连接的数据层。

**自定义组件 **是博客文章、作者、地址、自定义原始数据等。 **UI 组件 **只是标记为 UI 元素的自定义组件，例如页脚、页眉、首屏等。 **系统组件 **由 CMS 预定义，如国家和语言。

什么是 UI 组件？

页面由多个 UI 组件组成。

示例：

• hero-block
• feature-block
• image-carousel
• header/footer

每个 UI 组件代表页面的一个部分。

UI 组件工作流程

1. 在组件构建器中定义一个组件（块的结构）
2. 创建 UI 组件
3. 将 UI 组件分配给页面
4. 在客户端使用块注册表和渲染器设置中的相应块来渲染它

示例：Hero 块架构

一个 Hero 块可能包含：

• 图像
• 标题
• 副标题

编辑器中的 JSON 架构

[
  {
    "name": "heading",
    "type": "string",
    "required": false,
    "displayName": "heading"
  },
  {
    "name": "subtitle",
    "type": "string",
    "required": false,
    "displayName": "subtitle"
  },
  {
    "name": "hero_img",
    "type": "image",
    "required": false,
    "displayName": "hero_img"
  }
]

管理面板设置

• 创建一个新块
• 附加架构（HeroSchema）
• 为块命名（例如，hero-block）

将块分配给页面

• 在管理面板中进入某个路由
• 点击 Assign Page
• 添加新创建的块

在客户端渲染

分配完成后，可以使用渲染器设置在客户端获取并渲染该块。

总结

• 架构定义块的结构
• 块定义页面的各个部分
• 页面由多个块组成
• 完全可自定义且可重用