Types of Components

Tú defines componentes. Los componentes son la capa de datos que se conecta con la interfaz de usuario (UI).

Los componentes personalizados son entradas de blog, autores, direcciones, datos sin procesar personalizados, etc.

Los componentes de UI son simplemente componentes personalizados marcados como elementos de UI, pie de página, encabezado, hero, etc.

Los componentes del sistema están predefinidos por el CMS como País e Idioma.

¿Qué son los componentes de UI?

Las páginas se componen de más de un componente de UI

Ejemplos:

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

Cada componente de UI representa una sección de tu página.

Flujo de trabajo de los componentes de UI

1. Define un componente (estructura del bloque) en el creador de componentes
2. Crea el componente de UI
3. Asigna el componente de UI a una página
4. Renderízalo en el cliente con el bloque apropiado en el registro de bloques y la configuración del renderizador

Ejemplo: Esquema del bloque hero

Un bloque hero puede contener:

• Imagen
• Encabezado
• Subtítulo

Esquema JSON en el 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"
  }
]

Configuración del panel de administración

• Crea un bloque nuevo
• Asocia el esquema (HeroSchema)
• Nombra el bloque (p. ej., hero-block)

Asignar el bloque a la página

• Ve a una ruta en el panel de administración
• Haz clic en Assign Page
• Añade el bloque recién creado

Renderizado en el cliente

Una vez asignado, se puede obtener el bloque y renderizarlo en el lado del cliente utilizando tu configuración del renderizador.

Resumen

• Los esquemas definen la estructura de los bloques
• Los bloques definen las secciones de una página
• Las páginas se componen de varios bloques
• Totalmente personalizables y reutilizables