In questo tutorial effettuiamo un esempio pratico per dimostrare il funzionamento dell’override (sovrascrittura) dei modelli node.html.twig applicato ad un subtheme realizzato con bootstrap e Drupal 9.
In un precedente articolo abbiamo attivato il “debug twig” di Drupal condizione essenziale per visualizzare quale è il modello twig che sta lavorando nel punto del tema che desideriamo modificare. In particolare qui vogliano eseguire un override del modello nodo sia a livello del tipo di contenuto “Pagina base” che “Articolo”. La stessa procedura può essere effettuata per ogni altro tipo di contenuto di Drupal.
Per eseguire il nostro esercizio sono stati creati alcuni contenuti sia di tipo “Pagina base” che “Articolo” come mostrato nell’immagine successiva. Per gli articoli abbiamo disattivato il blocco dei commenti per rendere più semplice il nostro lavoro di individuazione del modello twig in azione.
A questo punto eseguiamo l’override del tema. Dal tema principale “bootstrap” che si trova nella cartella themes copiamo il file twig che ci interessa modificare (in questo caso vogliamo modificare il modello nodo) e portiamolo nel subtheme ricostruendo tutti gli i livelli di directory del tema padre. Ricordiamo che Drupal va a considerare prima i modelli che trovano nella directory del subtheme e successivamente va a leggere sulla directory del tema padre.
Per individuare precisamente il modello twig in oggetto utilizziamo il “debug twig” da visualizzazione sorgente codice del nostro browser.
Analizziamo la parte in verde del codice che vediamo dopo aver attivato il “debug twig” in particolare ci siamo posizionati con il selettore dello strumento ispeziona nel nodo del nostro contenuto e questi sono i dati che ci vengono mostrati.
In particolare notiamo che il modello twig che sta operando nel nodo è quello contrassegnato dalla lettera “x” e dunque “node.html.twig” questo modello va ad agire su tutte le impostazione dei nodi del nostro tema a prescindere dai tipi di contenuto e dunque sono impostati tutti allo stesso modo. Tutti gli altri elementi contrassegnati dal simbolo dell’asterisco (tecnicamente – Theme hook suggestions) sono dei suggerimenti che possiamo adottare per sovrascrivere il modello twig dei nodi in modo più particolare.
A questo punto rechiamoci sul file “node.html.twig” che abbiamo copiato nel nostro subtheme e iniziamo ad apportare le prime modifiche.
Eseguiamo una semplicissima modifica in corrispondenza del titolo del nodo contrassegnata dal codice twig “{{ title_prefix }}” sotto questo codice che visualizza il titolo del nostro nodo inseriamo una semplice istruzione html: <h1> IO SONO UN NODO </h1>
Ricordiamo sempre di pulire la cache prima di visualizzare le nostre modifiche. Noteremo che la nostra modifica è stata apportata a tutti i nodi del nostro tema a a prescindere dal tipo di contenuto “pagina base” o “articolo”. Questo completa la prima fase del nostro tutorial.
Lo scopo successivo del nostro lavoro è adesso impostare l’override del modello twig in base al tipo di contenuto. Ad esempio una diversa sovrascrittura del modello in base al tipo di contenuto “articolo”.
Copiamo il file “node.html.twig” e rinominiamolo in “node–article.html.twig” (questo è il modo per far sapere a drupal di modificare solo i nodi di tipo articolo.
All’interno di questo file modifichiamo il testo html precedente in “IO SONO UN ARTICOLO”
Se visualizziamo di nuovo il codice sorgente della pagina in corrispondenza del nodo articolo (o con il selettore ispeziona del browser) vedremo che il modello twig che agisce è quello da noi impostato nel subtheme:
Possiamo lavorare in questo modo per tutti gli altri tipi di contenuto del sito oppure è possibile modificare anche un solo nodo operando ad esempio su: node–4.html.twig
