Come creare un generatore di layout personalizzato in Drupal 8

Pubblicato: 2019-10-15

Drupal 8 sta rendendo le cose molto più semplici per gli autori di contenuti. Uno dei motivi più importanti è l'aggiunta del modulo Layout Builder nel core Drupal 8. Con un'interfaccia di trascinamento della selezione semplice, capacità di anteprima e personalizzazione, il layout builder sta presto diventando uno strumento preferito per la creazione di pagine e la progettazione.

Nel mio articolo precedente, ho scritto su come iniziare a installare e utilizzare il generatore di layout di Drupal 8. Qui, voglio condividere le mie conoscenze sulla personalizzazione di un generatore di layout per requisiti unici.

Se il tuo sito Web Drupal necessita di più sezioni con più blocchi, non puoi utilizzare le sezioni predefinite fornite da Drupal. Per questo, puoi creare il tuo layout personalizzato.

Introduzione a Layout Builder:

Per prima cosa creeremo un modulo generatore di layout personalizzato per il nostro generatore di layout personalizzato Chiameremo la cartella come custom_layout. Successivamente, creeremo un file info.yml. Dovremmo specificare le chiavi di base per esso. Il generatore di layout personalizzato in drupal 8 avrà una dipendenza dal modulo generatore di layout. Specifichiamolo qui.

layout personalizzato
 Codice:
nome: 'Layout personalizzato'
tipo: modulo
descrizione: 'Fornisce un modo per costruire il layout'
nucleo: 8.x
pacchetto: 'Personalizzato'
dipendenze:
 - layout_builder:layout_builder

Successivamente creeremo il file layouts.yml per specificare le regioni per il nostro layout personalizzato.

  • custom_layout: chiave per il nostro layout generatore di layout personalizzato.
  • etichetta: etichetta per il nostro layout generatore di layout personalizzato.
  • categoria: Categoria per il nostro layout personalizzato per la creazione di layout.
  • default_region: le regioni predefinite sono le regioni predefinite in tutti i tipi di layout.
  • icon_map: Icona che verrà mostrata mentre scegliamo il nostro layout.

Per esempio:

layout personalizzato

Per creare la mappa delle icone sopra, dobbiamo seguire i passaggi seguenti.

1. La prima riga è "Intestazione sinistra" e "Intestazione destra"
Abbiamo specificato - [ intestazione_sinistra, intestazione_sinistra, intestazione_destra ] - intestazione_sinistra è
definito 2 volte, quindi ci vorranno 2 parti della larghezza totale dello schermo, quindi header_right prenderà il resto della porzione, quindi il rapporto sarà "75%/25%".
2. La seconda riga è "Contenuto" e "Barra laterale"
Abbiamo specificato - [ contenuto, contenuto, barra laterale ] la stessa logica sopra applicata qui.
3. La terza riga è "Piè di pagina a sinistra" e "Piè di pagina a destra"
Abbiamo specificato - [ footer_left, footer_right] - poiché ci sono solo 2 regioni, ci vorrà il 50% ciascuna.

  • regioni: regioni di cui abbiamo bisogno per il nostro layout. Abbiamo header_left, header_right, sidebar, content, footer_left, footer_right.
generatore di layout personalizzato

Codice:

 layout_personalizzato:
 etichetta: 'Layout personalizzato'
 categoria: 'Layout personalizzati'
 default_region: contenuto
 mappa_icona:
   - [intestazione_sinistra, intestazione_sinistra, intestazione_destra]
   - [contenuto, contenuto, barra laterale]
   - [contenuto, contenuto, barra laterale]
   - [contenuto, contenuto, barra laterale]
   - [footer_left, footer_right]

 regioni:
   header_left:
     etichetta: Intestazione sinistra
   header_right:
     etichetta: Intestazione a destra
   barra laterale:
     etichetta: barra laterale
   contenuto:
     etichetta: Contenuto
   footer_left:
     etichetta: piè di pagina a sinistra
   footer_right:
     etichetta: piè di pagina a destra

Quindi, creiamo una struttura html per il nostro layout. Creeremo una cartella denominata "layout" all'interno del nostro modulo. Nella cartella creeremo un'altra cartella denominata “custom_layout”

E all'interno di quella cartella, creeremo un file ramoscello chiamato "custom-layout.html.twig"

generatore di layout personalizzato


Dobbiamo specificare il file ramoscello in layouts.yml

  • percorso: specifica in quale cartella verrà scritta la tua struttura html
  • template: specifica quale template di ramoscello usare per questo layout sotto il percorso.

layout personalizzato
 Codice:

layout_personalizzato:
 etichetta: 'Layout personalizzato'
 percorso: layout/layout_personalizzato
 categoria: 'Layout personalizzati'
 modello: layout personalizzato
 default_region: contenuto
 mappa_icona:
   - [intestazione_sinistra, intestazione_sinistra, intestazione_destra]
   - [contenuto, contenuto, barra laterale]
   - [contenuto, contenuto, barra laterale]
   - [contenuto, contenuto, barra laterale]
   - [footer_left, footer_right]

 regioni:
   header_left:
     etichetta: Intestazione sinistra
   header_right:
     etichetta: Intestazione a destra
   barra laterale:
     etichetta: barra laterale
   contenuto:
     etichetta: Contenuto
   footer_left:
     etichetta: piè di pagina a sinistra
   footer_right:
     etichetta: piè di pagina a destra

Successivamente scriveremo la struttura html per le nostre regioni nel file "custom-layout.html.twig".
Imposteremo le classi con "layout" e "layout--custom-layout" e avvolgeremo l'intero contenuto al suo interno.
Specifichiamo le regioni che sono state definite in layouts.yml , possiamo accedere a quelle regioni come "{{ content.header_left }}"

costruttore di layout

Codice:

{% classi impostate = [
'disposizione',
'layout--layout-personalizzato',
] %}
{% se contenuto %}
<div{{ attributi.addClass(classi) }}>
{% if content.header_left %}
<div {{ region_attributes.header_left.addClass('layout__region', 'layout__region--header_left') }}>
{{ content.header_left }}
</div>
{% finisci se %}
{% if content.header_right %}
<div {{ region_attributes.header_right.addClass('layout__region', 'layout__region--header_right') }}>
{{ content.header_right }}
</div>
{% finisci se %}
{% if content.content %}
<div {{ region_attributes.content.addClass('layout__region', 'layout__region--content') }}>
{{ contenuto.contenuto }}
</div>
{% finisci se %}
{% if content.sidebar %}
<div {{ region_attributes.sidebar.addClass('layout__region', 'layout__region--sidebar') }}>
{{ content.sidebar }}
</div>
{% finisci se %}
{% if content.footer_left %}
<div {{ region_attributes.footer_left.addClass('layout__region', 'layout__region--footer_left') }}>
{{ content.footer_left }}
</div>
{% finisci se %}
{% if content.footer_right %}
<div {{ region_attributes.footer_right.addClass('layout__region', 'layout__region--footer_right') }}>
{{ content.footer_right }}
</div>
{% finisci se %}
</div>
{% finisci se %}

Dopo che la struttura html è stata scritta, dovremo scrivere css per ogni regione. Creeremo ora le librerie.yml nel nostro modulo personalizzato.

costruttore di layout

Codice:

 layout_personalizzato:
versione: VERSIONE
css:
   tema:
     css/layout_personalizzato.css: {}

Definiremo quella libreria in layouts.yml

costruttore di layout

Codice:

 layout_personalizzato:
 etichetta: 'Layout personalizzato'
 percorso: layout/layout_personalizzato
 categoria: 'Layout personalizzati'
 modello: layout personalizzato
 libreria: layout_personalizzato/layout_personalizzato
 default_region: contenuto
 mappa_icona:
   - [intestazione_sinistra, intestazione_sinistra, intestazione_destra]
   - [contenuto, contenuto, barra laterale]
   - [contenuto, contenuto, barra laterale]
   - [contenuto, contenuto, barra laterale]
   - [footer_left, footer_right]

 regioni:
   header_left:
     etichetta: Intestazione sinistra
   header_right:
     etichetta: Intestazione a destra
   barra laterale:
     etichetta: barra laterale
   contenuto:
     etichetta: Contenuto
   footer_left:
     etichetta: piè di pagina a sinistra
   footer_right:
     etichetta: piè di pagina a destra

Ora iniziamo con lo stile del nostro blocco di regioni. Specificheremo la struttura per ogni regione come di seguito-

costruttore di layout

Codice:

 .layout--layout-personalizzato {
 display: -webkit-box;
 mostra: -ms-flexbox;
 display: flessibile;
 -ms-flex-wrap: avvolgere;
 flex-wrap: avvolgere;
}

schermo @media e (larghezza minima: 40em) {
 .layout--layout-personalizzato .layout__region--header_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 70%;
   flessibilità: 0 1 70%;
 }

 .layout--layout-personalizzato .layout__region--header_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 30%;
   flessibilità: 0 1 30%;
 }

 .layout--layout-personalizzato .layout__region--content {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 70%;
   flessibilità: 0 1 70%;
 }

 .layout--layout-personalizzato .layout__region--sidebar {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 30%;
   flessibilità: 0 1 30%;
 }

 .layout--layout-personalizzato .layout__region--footer_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 50%;
   flessione: 0 1 50%;
 }

 .layout--layout-personalizzato .layout__region--footer_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 50%;
   flessione: 0 1 50%;
 }
}

Quindi, abilitiamo il nostro modulo personalizzato

modulo di creazione di layout

Andiamo su Struttura -> Tipi di contenuto e facciamo clic su " Gestisci visualizzazione " per qualsiasi tipo di contenuto. Per ora useremo il tipo di contenuto " articolo ".

modifica-layout-builder

Dopo aver scelto il nostro layout personalizzato-

layout personalizzato