Types of Components

Você define Componentes. Componentes são a camada de dados que se conecta com a interface do usuário (UI).

Componentes Personalizados são Posts de Blog, Autores, endereços, dados brutos personalizados etc.

Componentes de UI são apenas Componentes Personalizados marcados como Elementos de UI, rodapé, cabeçalho, hero etc.

Componentes de Sistema são predefinidos pelo CMS como País e Idioma.

O que são Componentes de UI?

As páginas são compostas por mais de um Componente de UI.

Exemplos:

• hero-block
• feature-block
• image-carousel
• cabeçalho/rodapé

Cada Componente de UI representa uma seção da sua página.

Fluxo de Trabalho do Componente de UI

1. Defina um componente (estrutura do bloco) no construtor de componentes
2. Crie o componente de UI
3. Atribua o Componente de UI a uma página
4. Renderize-o no cliente com o bloco apropriado no registro de blocos e na configuração do renderizador

Exemplo: Esquema do Bloco Hero

Um bloco hero pode conter:

• Imagem
• Título
• Subtítulo

Json Schema no editor

[
  {
    "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"
  }
]

Configuração do Painel de Administração

• Crie um novo bloco
• Associe o esquema (HeroSchema)
• Nomeie o bloco (por exemplo, hero-block)

Atribuir o Bloco à Página

• Vá para uma rota no painel de administração
• Clique em Assign Page
• Adicione o bloco recém-criado

Renderização no Cliente

Uma vez atribuído, o bloco pode ser buscado e renderizado no lado do cliente usando a sua configuração de renderizador.

Resumo

• Esquemas definem a estrutura dos blocos
• Blocos definem seções de uma página
• Páginas são compostas por vários blocos
• Totalmente personalizáveis e reutilizáveis