Types of Components

Ви визначаєте компоненти. Компоненти — це шар даних, який з'єднується з інтерфейсом користувача.

Користувацькі компоненти — це публікації блогу, автори, адреси, власні сирі дані тощо.

UI-компоненти — це просто користувацькі компоненти, позначені як елементи інтерфейсу, footer, header, 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)

Призначення блоку сторінці

• Перейдіть до маршруту в адмін-панелі
• Натисніть Assign Page
• Додайте щойно створений блок

Рендеринг на клієнті

Після призначення блок можна отримати та відрендерити на стороні клієнта, використовуючи вашу конфігурацію рендера.

Підсумок

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