Typy komponentów

Definiujesz komponenty. Komponenty stanowią warstwę danych, która łączy się z interfejsem użytkownika.

Niestandardowe komponenty to wpisy na blogu, autorzy, adresy, niestandardowe dane surowe itd.

Komponenty UI to po prostu niestandardowe komponenty oznaczone jako elementy interfejsu użytkownika, np. stopka, nagłówek, sekcja hero itp.

Komponenty systemowe są zdefiniowane przez CMS, jak kraj i język.

Czym są komponenty UI?

Strony składają się z więcej niż jednego komponentu UI.

Przykłady:

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

Każdy komponent UI reprezentuje sekcję Twojej strony.

Przepływ pracy z komponentami UI

1. Zdefiniuj komponent (strukturę bloku) w kreatorze komponentów
2. Utwórz komponent UI
3. Przypisz komponent UI do strony
4. Renderuj go po stronie klienta przy użyciu odpowiedniego bloku w rejestrze bloków i konfiguracji renderera

Przykład: Schemat bloku Hero

Blok hero może zawierać:

• Obraz
• Nagłówek
• Podtytuł

Schemat JSON w edytorze

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

Konfiguracja panelu administracyjnego

• Utwórz nowy blok
• Dołącz schemat (HeroSchema)
• Nazwij blok (np. hero-block)

Przypisz blok do strony

• Przejdź do trasy w panelu administracyjnym
• Kliknij Assign Page
• Dodaj nowo utworzony blok

Renderowanie po stronie klienta

Po przypisaniu blok można pobrać i wyrenderować po stronie klienta za pomocą konfiguracji renderera.

Podsumowanie

• Schematy definiują strukturę bloków
• Bloki definiują sekcje strony
• Strony składają się z wielu bloków
• W pełni konfigurowalne i wielokrotnego użytku