Types of Components

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

自定义组件是博客文章、作者、地址、自定义原始数据等。

UI 组件只是被标记为 UI 元素的自定义组件，例如页脚、页眉、hero 等。

系统组件由 CMS 预定义，例如国家和语言。

什么是 UI 组件？

页面由多个 UI 组件组成。

示例：

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

每个 UI 组件代表页面的一个区域。

UI 组件工作流程

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

示例：Hero 区块模式

Hero 区块可能包含：

• 图像
• 标题
• 副标题

编辑器中的 JSON Schema

[
  {
    "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
• 添加新创建的区块

在客户端渲染

一旦分配，该区块可以通过你的渲染器设置在客户端获取并渲染。

总结

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