Types of Components

Te határozod meg a komponenseket. A komponensek jelentik azt az adatréteget, amely a felhasználói felülettel kapcsolódik.

Egyéni komponensek lehetnek például blogbejegyzések, szerzők, címek, egyedi nyers adatok stb.

UI komponensek mindössze olyan egyéni komponensek, amelyeket felhasználói felületi elemként jelölsz meg, például lábléc, fejléc, hero stb.

Rendszerkomponenseket a CMS előre meghatározza, mint például az országot vagy a nyelvet.

Mik azok a UI komponensek?

Az oldalak egynél több UI komponensből állnak.

Példák:

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

Minden UI komponens az oldal egy szakaszát képviseli.

UI komponens munkafolyamat

1. Határozd meg a komponenst (a blokk szerkezetét) a komponenskészítőben
2. Hozd létre a UI komponenst
3. Rendeld a UI komponenst egy oldalhoz
4. Rendereld kliensoldalon a megfelelő blokkal a blokk-regiszterben és a renderelő beállításban

Példa: hero blokk sémája

Egy hero blokk a következőket tartalmazhatja:

• Kép
• Címsor
• Alcím

JSON-séma a szerkesztőben

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

Admin felület beállítása

• Hozz létre egy új blokkot
• Csatold a sémát (HeroSchema)
• Nevezd el a blokkot (pl. hero-block)

Blokk hozzárendelése az oldalhoz

• Lépj az admin felület egyik útvonalára
• Kattints a Assign Page (Oldal hozzárendelése) gombra
• Add hozzá az újonnan létrehozott blokkot

Renderelés kliensoldalon

Miután hozzárendelted, a blokk lekérhető és renderelhető kliensoldalon a renderelő beállításaid segítségével.

Összefoglalás

• A sémák határozzák meg a blokkok szerkezetét
• A blokkok az oldal egyes szakaszait határozzák meg
• Az oldalak több blokkból épülnek fel
• Teljes mértékben testreszabható és újrahasznosítható