CREAZIONE DI TEMPLATE PERSONALIZZATI PER TYPO3

In questo articolo vedremo come impostare un layout personalizzato per la visualizzazione dei contenuti del sito da FrontEnd (FE). Pertanto, prima introdurremo il concetto di template in TYPO3, verrà presentato il linguaggio TypoScript e verrà infine realizzato un layout ex-novo. Verrà fatta solamente un’introduzione veloce a questo argomento, in quanto una trattazione esaustiva richiederebbe molto spazio e forse, data la sua vastità, non sarebbe addirittura possibile.

Abbiamo visto ora come creare un template d’esempio sfruttando quelli forniti da TYPO3. Ovviamente per i nostri siti è auspicabile l’utilizzo di template personalizzati, ovvero con un layout grafico da noi creato e assolutamente svincolato da quelli disponibili con TYPO3. Per ottenere questo risultato avremo bisogno di pensare ad un layout grafico da integrare ma, soprattutto, avremo anche bisogno di scrivere tutte quelle istruzioni che nell’esempio precedente abbiamo già trovato pronte. Esistono svariati metodi per realizzare quanto ci proponiamo, è mio parere che quanto proposto in [4] sia un ottimo metodo in quanto molto semplice e, allo stesso tempo, flessibile. Pertanto, in questo articolo, seguiremo tale strada.
Il primo passo è quindi l’ideazione del layout del nostro sito. In figura 3 è riportato il layout da integrare in TYPO3 nel corso di questo articolo.Quello successivo è di realizzare il codice XHTML e CSS che riproduce perfettamente il layout pensato. A questo punto dobbiamo individuare le aree dinamiche del template XHTML realizzato, ovvero dobbiamo definire quali sezioni di codice dovranno essere sostituite dall’output del CMS. Come si può vedere nel listato 1 sono state individuate 5 aree dinamiche: il titolo della pagina, il menu orizzontale, il sottomenu verticale, il contenuto della pagina e il footer del sito. Ciascuna di queste aree è stata delimitata da un tag particolare, il titolo, ad esempio, è stato racchiuso dal tag <!-- ###TITOLO### -->. In seguito istruiremo TYPO3 a sostituire ognuna di queste sezioni con il corretto contenuto dinamico.
Avrete sicuramente notato come sia presente un ulteriore tag: il tag <!-- ###BODY### -->. Questo tag servirà per indicare a TYPO3 dove inizia e dove ha fine il template da utilizzare. Quanto escluso da questi tag, infatti, verrà cancellato e sostituito da codice generato dal CMS: in questo modo tutti gli header, il titolo della pagina e il tag body verranno creati da TYPO3.

Passiamo ora all’integrazione del template XHTML. Questa fase consiste nella creazione di un nuovo record template, che andrà a sostituire quello precedentemente creato, senza però specificare un template base fra quelli forniti da TYPO3. Le impostazioni da definire sono le medesime dell’esempio precedente, con la differenza che ora dovremo inserire manualmente le istruzioni nel campo setup. Queste istruzioni, come detto, avranno lo scopo di definire il comportamento di TYPO3 in base al template che stiamo realizzando. Tutte queste istruzioni saranno scritte nel linguaggio TypoScript che, a discapito del nome, non è un linguaggio di scripting ma semplicemente un linguaggio dichiarativo di configurazione [1] (prestate molta attenzione mentre scrivete codice TypoScript in quanto è un linguaggio case sensitive!). Nel listato 2 potete trovare il codice da inserire nel campo setup del template creato e che integrerà il template XHTML realizzato. Per un introduzione a questo linguaggio vi rimando a [2], vi segnalo anche la reference, costantemente aggiornata, con tutte le opzioni disponibili [3].
Vediamo ora le parti più significative del codice TypoScript utilizzato. Per prima cosa definiamo il template da utilizzare:

template = TEMPLATE
template {

template = FILE

template.file = fileadmin/template/template.html

workOnSubpart = BODY

subparts.TITOLO < temp.titolo

subparts.MENU < temp.menu

subparts.SOTTOMENU < temp.sottomenu

subparts.CONTENUTO < temp.contenuto

subparts.FOOTER < temp.footer

}

Con questo codice diciamo a TYPO3 di utilizzare come template il file XHTML da noi realizzato, di lavorare solamente entro i tag <!-- ###BODY### --> e di sostituire ciascuna delle 5 aree precedentemente individuate mediante i tag con degli oggetti che fra poco andremo a creare. Prima di creare tali oggetti, però, dobbiamo creare un oggetto di tipo PAGE, il TopLevel Object (TLO), ovvero l’oggetto che includerà tutti gli altri oggetti e sulla base del quale TYPO3 costruirà l’output per il FE. A tale oggetto è sufficiente associare l’oggetto template sopra definito, in quanto proprio quest’ultimo oggetto include a sua volta tutti gli altri oggetti:

pagina = PAGE
pagina.10 < template

Se proviamo ora a visualizzare l’output del FE ci accorgeremo di come le aree dinamiche individuate contengano ancora i testi d’esempio inseriti nel codice XHTML (infatti non abbiamo ancora creato gli oggetti che dovranno sostituirli) e della mancanza del foglio di stile. Per inserire il CSS definito è sufficiente includere il seguente codice:

pagina.includeCSS {

file1 = fileadmin/template/style.css

file1.media = screen

}

Similmente è possibile associare più fogli di stile e per diversi media.
Non ci rimane che definire uno ad uno tutti gli oggetti delle cinque aree dinamiche. Tralasciando titolo e footer sufficientemente autoesplicativi, passiamo ad analizzare il codice per la creazione del menu orizzontale:

temp.menu = HMENU
temp.menu.1 = TMENU
temp.menu.1 {

NO = |

ACT = 1

ACT.allWrap = <span class="attiva">|</span>

ACT.doNotLinkIt = 1

}

L’oggetto viene definito come un menu gerarchico (HMENU) il cui primo livello è un menu testuale (TMENU). Per questo menu di primo livello sono definiti lo stato normale (NO), ovvero lo stato in cui si trovano i link normalmente, e lo stato attivo (ACT), ovvero lo stato in cui si trovano i link nel caso in cui si stia visualizzando la pagina da loro linkata o una sottopagina di questa. Da notare come lo stato attivo debba essere abilitato (ACT=1) mentre lo stato normale deve necessariamente esistere e quindi non richiede l’attivazione. Inoltre si può notare come le voci di menu attive vengano incluse all’interno di un tag aggiuntivo per definirne uno stile diverso e come non siano cliccabili (non viene cioè creato il tag A che racchiude tutte le singole voci di menu).
Per creare un menu di secondo livello si potrebbe aggiungerne la definizione direttamente nel menu gerarchico sopra descritto. In questo modo, però, il menu di primo livello e quello di secondo livello sarebbero stati fra loro legati e non sarebbe stato possibile creare un menu di secondo livello verticale nella posizione voluta. Pertanto la soluzione è la seguente:

temp.sottomenu = HMENU
temp.sottomenu.entryLevel = 1
temp.sottomenu.1 = TMENU
temp.sottomenu.1 {

wrap = <ul>|</ul>

NO.allWrap = <li>|</li>

CUR = 1

CUR.allWrap = <li class="attiva">|</li>

CUR.doNotLinkIt = 1

}

Anche in questo caso è necessario definire un menu gerarchico con l’accortezza, però, di definirne il punto di ingresso al livello 1 dell’albero delle pagine (di default il livello è 0 e coincide con la radice dell’albero). Altra particolarità è la presenza di un wrap generale, qui necessario per creare il tag UL che racchiude il menu (altrimenti si sarebbe potuto spostare i tag <!-- ###SOTTOMENU### --> all’interno del tag UL, come si può vedere nel listato 1). L’ultimo punto riguarda il nuovo stato definito: lo stato corrente (CUR). Una voce di menu viene a trovarsi in questo stato solamente nel caso in cui la pagina visualizzata sia quella collegata alla voce stessa e non una sua sotto-pagina, a differenza dello stato attivo.L’ultimo problema da risolvere è come visualizzare i contenuti delle pagine. Per far questo abbiamo due possibilità: scrivere tutto il codice TypoScript necessario al rendering dei contenuti (e vi assicuro essere veramente lungo e complesso) o includere un’estensione che si occupa di questo e che fornisce tutto il codice necessario. Ovviamente la soluzione scelta è la seconda e richiede l’installazione dell’estensione CSS Styled Content. Effettuata l’installazione è possibile includere il codice TypoScript, da questa fornita, nel nostro template (sfruttando il campo “Include static (from extensions)”. A questo punto per formattare correttamente i contenuti è sufficiente utilizzare un apposito oggetto fornitoci dall’estensione:temp.contenuto < styles.content.getSe proviamo a visualizzare ora il FE dovremmo aver ottenuto il template desiderato.

La soluzione qui proposta, come detto, è solamente una delle tante strade che si possono seguire per integrare un layout personalizzato nel CMS TYPO3. Nel manuale [2], una delle prime letture obbligate per chiunque volesse sviluppare con TYPO3, viene suggerito un metodo diverso, basato sull’estensione Template AutoParser. Questa soluzione, a mio avviso, risulta particolarmente complessa e non porta alcun vantaggio rispetto a quella proposta in questo articolo. Un altro metodo possibile di integrazione di layout personalizzati, si basa sull’estensione TemplaVoilà. Questo metodo è più complicato di quello qui presentato ma anche notevolmente più evoluto in quanto consente l'integrazione di layout molto complessi, permettendo di raggiungere risultati altrimenti difficilmente ottenibili. Questo metodo è infatti necessario per lo sviluppo di portali internet o, in generale, di siti con layout molto complessi.

[1] Kasper Skårhøj, “Getting started”, typo3.org/documentation/document-library/tutorials/doc_tut_quickstart/current/

[2] Kasper Skårhøj, “Modern Template Building, Part. 1”, typo3.org/documentation/document-library/tutorials/doc_tut_templselect/current/

[3] Kasper Skårhøj, “TSref”, typo3.org/documentation/document-library/references/doc_core_tsref/current/

[4] Kasper Skårhøj, “Tutorial: Golive template integration”, typo3.org/documentation/document-library/tutorials/doc_tut_n1/current/