Come Creare Layout Drupal Personalizzati per Layout Builder Tramite Codice

Oggi esploriamo Come Creare Layout Drupal Personalizzati per Layout Builder Tramite Codice.

Layout Builder di Drupal offre un modo potente e intuitivo per progettare layout di pagina flessibili senza addentrarsi troppo nel codice. Consente agli editor di contenuti di disporre i contenuti in strutture visivamente accattivanti utilizzando un'interfaccia drag-and-drop. In questo post del blog, esploreremo cos'è Layout Builder, come abilitarlo e dimostreremo come creare modelli personalizzati per un controllo ancora maggiore.

Cos'è Layout Builder?

Fondamentalmente, Layout Builder è un modulo Drupal che ti permette di costruire visivamente il layout delle pagine. Invece di essere confinato alla struttura rigida di un tema, ottieni la libertà di:

• Definire Regioni: Designa sezioni all'interno della tua pagina (ad es. intestazione, piè di pagina, contenuto principale, barra laterale).
• Assemblare Layout con Blocchi: Posiziona e organizza diversi blocchi di contenuto (testo, immagini, menu, ecc.) all'interno di queste regioni utilizzando il drag-and-drop.
• Creare Modelli Personalizzati: Crea file di modello per layout specifici per avere un controllo preciso sull'HTML e sul posizionamento delle regioni.

Abilitare Layout Builder per un Tipo di Contenuto

Supponiamo che tu voglia utilizzare Layout Builder sul tipo di contenuto 'Articolo'. Ecco come abilitarlo:

1. Installare Moduli: Assicurati che il modulo Layout Builder principale sia abilitato (solitamente predefinito).
2. Gestisci Visualizzazione: Naviga su / admin / structure / types / manage / article / display (sostituisci 'article' con il nome macchina del tuo tipo di contenuto).
3. Abilita Layout Builder: Nella sezione 'Opzioni layout', seleziona la casella “Usa Layout Builder”.
4. Salva le Modifiche: Fai clic su 'Salva'.

Puoi anche scegliere di consentire ai singoli nodi (articoli, in questo contesto) di avere le proprie sovrapposizioni di layout uniche. Ciò significa che ogni articolo può avere un layout distinto diverso dal layout predefinito che hai impostato per il tipo di contenuto 'Articolo'.

Come Creare Layout Drupal Personalizzati

Mentre il tuo tema Drupal e alcuni moduli potrebbero offrire alcuni layout predefiniti, la creazione di modelli personalizzati offre un controllo e una flessibilità ancora maggiori. Ecco perché potresti aver bisogno di layout personalizzati:

• Design di Pagine Su Misura: Crea layout che si adattano perfettamente al tuo contenuto, invece di essere limitato a layout generici del tema o del modulo.
• Modifica Facile: Fornisci layout pronti all'uso che corrispondono allo stile del tuo sito web, semplificando la vita ai tuoi editor di contenuti.
• Aspetto Coerente: Assicurati che il tuo sito web abbia un bell'aspetto su ogni pagina, anche quando utilizzi layout che non erano inclusi nel tuo tema.

Per creare layout personalizzati, segui questi passaggi:

1. File THEME.layouts.yml:
   • Crea un file denominato THEME.layouts.yml nella directory principale del tuo tema (sostituisci THEME con il nome effettivo del tuo tema).
   • Utilizziamo un rapido esempio per un layout con una barra laterale destra. Aggiungi il seguente codice e ricorda di sostituire 'EXAMPLE' con un prefisso adatto al tuo progetto:

example_layout_right_sidebar:
  label: 'EXAMPLE: Contenuto con Barra Laterale Destra'
  path: templates/layout/example/sidebar
  template: layout--right-sidebar
  category: 'Colonne di Esempio: 2'
  default_region: first
  icon_map: 
    - [top] 
    - [first, first, second]  
    - [bottom, bottom, bottom] 
  regions: 
    top:
      label: Top 
    first:
      label: Primo 
    second:
      label: Secondo 
    bottom:
      label: Fondo 

Spiegazione del codice:

• example_layout_right_sidebar: Nome univoco per il layout.
• label: Il nome user-friendly per questo layout in Layout Builder.
• path: Dove si trovano i file di modello del tuo layout.
• template: Il file di modello principale che definisce la struttura HTML del tuo layout.
  • Avrai bisogno di un file layout--right-sidebar.html.twig corrispondente nel percorso specificato.
• category: Aiuta a raggruppare i layout nell'interfaccia di Layout Builder.
• default_region: Specifica dove verranno inizialmente posizionati i blocchi di contenuto (in questo caso, la regione 'first').
• icon_map:
  • Questo mostra un'anteprima visiva di base in Layout Builder:
    • Una riga in alto ([top])
    • Riga con tre colonne: due colonne 'first' più larghe e una colonna 'second' più stretta.
    • Una riga in basso ([bottom, bottom, bottom])
• regions:
  • Definisce le aree nominate in cui puoi posizionare il contenuto:
    • top: Una regione che attraversa la parte superiore del layout.
    • first: La regione di contenuto principale (probabilmente la colonna di sinistra).
    • second: La regione della barra laterale (probabilmente la colonna di destra).
    • bottom: Una regione che attraversa la parte inferiore del layout.
  • Utilizzerai {{ content.top }}, {{ content.first }}, e {{ content.second }} per posizionare il tuo contenuto nel modello twig.

2. File di Modello:
   • Nella cartella specificata nel path nel tuo file .layouts.yml (ad es. templates / layout / example / sidebar), crea i file di modello Twig come layout--right-sidebar.html.twig.
   • Ecco l'esempio di modello:

{#
/**
 * @file
 * Implementazione del tema predefinito per un layout multimediale.
 *
 * Variabili disponibili:
 * - content: Il contenuto per questo layout.
 * - attributes: Attributi HTML per la <div> del layout.
 *
 * @ingroup themeable
 #}
{% if content %}
 <div{{ attributes.addClass('row example-sidebar-layout example-right-sidebar') }}>

  <div class="example-container">

   {% if content.top %}
    <div {{ region_attributes.top.addClass('region--top example-sidebar-layout-top') }}>
     {{ content.top }}
    </div>
   {% endif %}

   <div class="example-sidebar-layout-middle">

    <div{{ region_attributes.first.addClass('col-sm-9 example-sidebar-column-left') }}>
     {{ content.first }}
    </div>

    <div{{ region_attributes.second.addClass('col-sm-3 example-sidebar-column-right') }}>
     {{ content.second }}
    </div>

    </div>

   {% if content.bottom %}
    <div {{ region_attributes.bottom.addClass('region--bottom example-sidebar-layout-bottom') }}>
     {{ content.bottom }}
    </div>
   {% endif %}

  </div>

 </div>
{% endif %}

2. Svuota la Cache: Svuota le cache di Drupal per registrare i tuoi nuovi modelli.

Utilizzo dei Tuoi Modelli Personalizzati

1. Quando modifichi un nodo 'Articolo' (o il tipo di contenuto scelto), passa alla scheda 'Layout'.
2. I tuoi layout personalizzati dovrebbero ora essere disponibili per la selezione.
3. Una volta scelto un layout, puoi iniziare ad aggiungere blocchi di contenuto nelle sue regioni designate.

Considerazioni Finali

Layout Builder e i modelli personalizzati ti offrono maggiore flessibilità per progettare il tuo sito Drupal nel modo desiderato. Potrebbe essere necessaria un po' di pratica per abituarsi, ma la capacità di creare layout che soddisfano perfettamente le tue esigenze vale lo sforzo. Sperimenta e vedi cosa riesci a creare. Buona debug!