Types of Components

Вы определяете компоненты. Компоненты — это слой данных, который соединяется с пользовательским интерфейсом.

Пользовательские компоненты — это записи блога, авторы, адреса, произвольные данные и т. д.

UI-компоненты — это просто пользовательские компоненты, помеченные как элементы интерфейса: подвал, шапка, hero и т. д.

Системные компоненты предопределены 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)

Назначение блока странице

• Перейдите к маршруту в панели администратора
• Нажмите Назначить страницу
• Добавьте вновь созданный блок

Отрисовка на клиенте

После назначения блок можно получить и отрисовать на стороне клиента с помощью вашей настройки рендера.

Итоги

• Схемы определяют структуру блоков
• Блоки определяют секции страницы
• Страницы состоят из нескольких блоков
• Полностью настраиваемые и повторно используемые