Costruire un'intestazione come Shared Slot

Obiettivo: avere un'unica intestazione usata da ogni pagina, invece di una copia per pagina.
Tempo: 5 minuti
Serve: accesso a Shared Slots e un menu di navigazione con qualche link

Passaggi

  1. Selezionate Shared Slots nella barra laterale. Qui sono elencate le aree riutilizzabili del sito corrente, con le pagine servite da ciascuna.
  2. Aprite lo Shared Slot dell'intestazione e selezionate Edit Blocks. Uno Shared Slot contiene blocchi esattamente come uno slot di pagina.
  3. Un'intestazione funzionante è un Navbar che contiene un Container, che contiene un Cluster, che contiene un Navbar Brand, un Navbar Navigation legato a una chiave di menu e Header Actions.
  4. Per metterla su una pagina, aprite la pagina, trovate lo slot nella card Slots e selezionate Manage Source.
  5. Scegliete Shared Slot, selezionate quello che avete costruito e premete Save Source.
Shared Slots screen listing reusable areas and their usage.
Shared slot block list showing a navbar with brand, navigation, and header actions nested inside.
Manage source dialog offering page content, shared slot, or disabled for a slot.

Le tre fonti

Ogni slot di pagina renderizza una di tre cose, e Manage Source è dove si sceglie:

  • Page Content: i blocchi propri di questa pagina. L'impostazione predefinita.
  • Shared Slot: blocchi che vivono altrove e sono condivisi con altre pagine.
  • Disabled: su questa pagina qui non viene reso nulla.

Cambiare fonte conserva i blocchi propri della pagina. Puntate uno slot a uno Shared Slot, cambiate idea, tornate indietro: i vostri blocchi sono ancora lì.

Note

  • Navbar Brand e Navbar Navigation funzionano solo dentro un navbar. Fuori non vengono offerti: è il CMS che vi impedisce di costruire un'intestazione che non può essere renderizzata.
  • Navbar Navigation non contiene link: punta a una chiave di menu e rende quello che quel menu contiene.
  • Uno Shared Slot serve un solo tipo di slot. Uno costruito per header non può essere assegnato a un piè di pagina.
  • Header Actions porta i controlli di ricerca, tema e lingua. I suoi interruttori sono impostazioni del blocco, non blocchi separati.
Avanti: costruire un piè di pagina come Shared Slot