Twig è il motore di template (template engine) predefinito per Drupal è un linguaggio creato per il framework Symfony con cui è estato costruito Drupal a partire dalla versione 8. In Drupal tutti i file del template che prima erano creati con il linguaggio PHP sono stati rimossi e sostituiti da TWIG (*.html.twig). In questo modo riusciamo a costruire template per Drupal in modo molto più semplice senza addentrarci nel linguaggio PHP. E’ in sintesi un linguaggio di Markup che sostituisce dei dati al posto di marcatori (tag).
Le basi del linguaggio Twig sono costituite da 3 sintassi:
Esempio:
Stampare il valore di una variabile chiamata “label” {{ label }}
Stampare la regione “highlighted” di una pagina Drupal {{ page.highlighted }}
Questo tag può essere considerato l’equivalente di: <?php echo $name ?>
Se la sintassi è racchiusa tra parentesi graffe e i simboli di % significa che si tratta di un tag logico: {% if name = ‘Luca’ %}ciao Luca{% endif %} ed è come se fosse l’equivalente in php L’equivalente, ad esempio, di <?php if ($name == 'Luca') { echo "ciao Luca"; }
Quando si stampano le variabili (per variabili di un nodo ad esempio si intendono gli elementi che compongono il nodo come ad esempio il titolo, immagine, contenuto, il valore di un campo etc. installando il modulo “Devel” è possibile analizzare quali sono le variabili che stanno operando nel punto del template in cui ci posizioniamo) utilizzando la sintassi della doppia parentesi graffa, è possibile applicare filtri alla variabile stessa, il risultato sarà ad esempio:
{{ name_of_variable|name_of_filter }} ad esempio {{ title | upper }} il filtro “upper” in questo caso converte il formato del titolo in maiuscolo. I filtri servono per modificare le variabili e possono avere argomenti facoltativi tra parentesi esempio:
{{ items|safe_join(“, “) }} il filtro “safe_join(“, “) permette in questo caso di stampare le variabili “items”, concatenate, con una virgola e uno spazio e dunque separa ogni elemento.
{{ items|safe_join(“, “)|lower }} gli argomenti possono essere anche concatenati tra di loro (in questo caso il filtro “lower” rende gli elementi concatenati in minuscolo.
Il codice successivo indica un esempio della sintassi logica twig in particolare la sintassi effettua un controllo sull’esistenza della regione footer_fifth se esiste la stampa (perfezionando la visualizzazione con del codice html).
Questa sintassi logica può essere utilizzata con istruzioni come if, for, else, set …etc
in particolare il codice set crea variabili ed assegna valori:
Quando si deve agire su un tema Drupal per apportare delle modifiche occorre sapere che:
- Tutti i file di un tema in Drupal (a partire dalla versione 8) hanno l’estensione .html.tiwig
- Per ogni pagina del sito vengono utilizzati contemporaneamente più file modello
- I modelli twig sono operativi dal più specifico a quello generale
- I modelli che sono a livello della directory “themes” vengono considerati per prima.
I modelli twig sono suddivisi in file che agiscono su aree diverse del tema e questo significa che per modificare una parte specifica del tema dobbiamo individuare il file twig che sta lavorando nel punto che desideriamo modificare. Di conseguenza dobbiamo sostituirli con i nostri modelli personalizzati che inseriremo nella cartella “themes” dove posizioneremo il nostro template.
Nell’immagine successiva sono rappresentatati una serie di modelli twig che più comunemente intervengono per riprodurre i contenuti di un sito
Drupal esegue il rendering dei modelli in modo specifico cioè esegue prima il modello twig più specifico che trova nel tema per arrivare al modello twig più generico secondo un esempio del tipo:
field.html.twig > node.html.twig > region.html.twig > page.html.twig > html.html.twig
La domanda che è naturale porsi a questo punto è la seguente: come facciamo ad individuare quale è il modello twig che sta lavorando nel punto del tema che desideriamo modificare?
Per conoscere questa importante informazione è utile attivare il “debug twig” e tutto questo allo scopo di individuare:
- quale è il modello interessato,
- eseguire una copia del modello,
- posizionare la copia del modello con le nostre modifiche al codice twig all’interno della cartella del tema che stiamo personalizzando.
Per attivare il Debug Twig in modo semplice senza l’ausilio di moduli andare sul seguente percorso:
sites/default/services.yml
se non esiste il file “services.yml“occorre copiare e rinominare il file default.services.yml e modificare il seguente codice:
twig.config:
debug: true
quindi eliminare “false”
Attivata questa modalità siamo in grado di leggere i dati dei modelli in azione e se clicchiamo con il tasto destro in corrispondenza del nostro sito su “visualizzazione sorgente codice html” noteremo una struttura di questo tipo con dei codici in verde che identificano i modelli html.twig del nostro tema:
