Personalizzare il proprio template

Introduzione

Lifetype usa un sistema di template al fine di separare chiaramente il contenuto di una pagina dal codice usato per generarla. Il principale vantaggio dal punto di vista dell'utente è che noi possiamo così garantire che attraverso la modifica di un template un utente può accedere solo a ciò che lo sviluppatore del codice complessivo a ritenuto sicuro che fosse disponibile. Ad esempio nella pagina principale di un blog sarà necessario accedere solo alla lista dei post più recenti, ed è solo questa che verrà messa a disposizione del codice di chi elabora e modifica il template. Non c'è alcun risschio così che l'utente possa modificare, anche involontariamente, porzioni fondamentali per il funzionamento dell'intero sistema di blogging multiutente. L'altro vantaggio è che ovviamente ogni utente può sviluppare il suo set di template grafici senza preoccuparsi di danneggiare quelli di altri utenti. Inoltre la sintassi del linguaggio usato per la produzione di un template è molto più semplice di quella del linguaggio usato per scrivere l'intero meccanismo di blogging, e questo rende più accessibile anche a utenti di base tutto il meccanismo di personalizzazione.

Un buon punto di partenza per imparare qualcosa su Smarty è il loro corso (http://smarty.php.net/crashcourse.php) o il loro manuale (http://smarty.php.net/manual/en/).

Dal punto di vista di uno sviluppatore, siccome PHP consente di mischiare il codice HTML e il codice php nello stesso file, è molto facile cadere nella tentazione di mischiare tutto, ottenendo il solo risultato di un codice completamente impossibile da tenere aggiornato e da correggere con semplicità. Usare i template per separare il contenuto e la logica del programma di blogging ci consente di riutilizzare facilmente il codice che scriviamo in varie parti del software e di distinguere chiaramente tra quello che è lo strato responsabile della visualizzazione del contenuto e quello responsabile del funzionamento di tutto il sistema. Ovviamente questo implica un leggero calo di performance, ma è un costo che ci è sembrato più che conveniente da pagare e che può essere ammortizzato dalle caratteristiche di caching che il motore di template di Lifetype utilizza.

Lifetype usa il motore di template Smarty per le funzioni di resa grafica dei contenuti, e quindi dobbiamo prima di tutto familiarizzarci con questo linguaggio. Il punto di partenza migliore è il manuale di Smarty linkato poco sopra. Smarty elabora solo il testo che è incluso nei caratteri '{' e '}' e il testo deve avere un significato per Smarty o la pagina ci restituirà degli errori di compilazione generati da Smarty stesso. Smarty ha una serie di funzioni interne, ma dal punto di vista dei template di Lifetype useremo solo oggetti PHP esportati nel sistema di template dal codice di Lifetype stesso, in modo da potervi operare senza dover fare chiamate a funzioni complesse. La maggior parte delle volte non dovremo fare altro che chiamare uno dei metodi degli oggetti presenti in un certo template per poterli visualizzare.

Come funzionano i template

Come abbiamo detto sopra, Lifetype usa Smarty per generare i contenuti del vostro blog. Questo significa che possiamo facilmente cambiare la grafica del blog selezionando un nuovo template dalla pagina Impostazioni Blog della Sezione Controllo. Ma come funziona? Come possiamo sviluppare il nostro template grafico?

Per cominciare, dobbiamo capire dove sono localizzati i template nel nostro sistema. I template sono custoditi nella directory templates/ della nostra installazione di Lifetype, ma solo alcune directory all'interno di essa sono template che possiamo usare. Tanto per restare in tema il modello per tutti i template può essere considerato quello contenuto nella directory standard. In essa sono contenuti i seguenti file:

  • commentarticle.template
  • commentform.template
  • error.template
  • footer.template
  • header.template
  • main.template
  • post.template
  • postandcomments.template
  • posttrackbacks.template
  • album.template
  • albums.template
  • resource.template
  • searchresults.template
  • archives.template
  • links.template

Di questi 15 file solo alcuni sono fondamentali (commentarticle, error, main, postandcomments, posttrackbacks, album, albums, resource, searchresults.template) ovvero non possono mancare nel nostro template. Le loro funzioni sono come seguono:

  • main.template: controlla l'aspetto della pagina principale, dove i vostri articoli sono normalmente visualizzati. Ovviamente potete visualizzare i vostri articoli altrove, ma allora perché avremmo fatto questo template?
  • postandcomments.template: questo template è usato quando viene mostrato un singolo articolo. Di solito include l'articolo stesso (titolo, autore, data, testo, categorie, ecc.) e i commenti che vi sono stati aggiunti.
  • commentarticle.template: questo template mostra solo una form per aggiungere un nuovo commento a un articolo.
  • posttrackbacks.template: Questo template è usato per mostrare i link di trackback di un articolo. Nella sua versione base è solo un elenco di link, ma vi si possonoa ggiungere anche informazioni circa i trackback e il loro significato se lo si ritiene utile.
  • error.template: come suggerisce il nome è il template che presenta la pagina di errore a un utente che ha cercato di caricare una pagina inesistente o che ha incontrato altri tipi di problemi. Non è necessario modificarla di solito.
  • album.template: mostra i contenuti di un album di risorse
  • albums.template: mostra l'elenco degli album presenti sul blog.
  • resource.template: mostra una singola risorsa presente sul blog, incluse le informazioni ad essa collegate.
  • searchresults.template: mostra i risultati delle ricerche fatte sul blog.

La ragione dell'esistenza dei template non fondamentali è di renderci la vita un po' più semplice. I template finora introdotti sono pagine complete, ovvero ognuna di esse deve avere la propria intestazione, la propria divisione in colonne, e il proprio footer. La prima idea potrebbe essere quella di copiare e incollare il codice per queste parti di pagina in tutti i template, ma questo ci obbliga a dover modificare ogni pagina ogni volta che vogliamo cambiare l'intestazione del nostro blog. Allora possiamo usare una funzione di Smarty per scrivere un template per la nostra intestazione e poi importarla in ogni pagina: 

{include file="standard/header.template"}
...
template contents
...
{include file="standard/footer.template"}

È da notare che il nome del file è relativo alla directory dei template e che quindi va incluso il nome del template che stiamo utilizzando prima di quello del file.

Ogni volta che vogliamo cambiare l'intestazione del nostro blog a questo punto dovremo cambiare solo il file header.template. Ovviamente se una pagina vogliamo che abbia un'intestazione diversa, sarà sufficiente non includere header.template ma scrivere il codice che vogliamo visualizzare.

Allo stesso modo, oltre a header.template e footer.template, abbiamo creato i file:

  • commentform.template: un template usato per generare la form che viene usata per pubblicare un commento a un articolo del vostro blog.
  • post.template: un template che mostra il contenuto di un post, che viene incluso una volta per ogni post per esempio nella pagina principale e nella pagina del singolo post (main.template e postandcomments.template rispettivamente)

Queste linee guida vi saranno utilissime se decidete di produrre il vostro template grafico. Non dimenticatele!

Struttura di un pacchetto template

Per rendere più facile la manipolazione di un template, i template possono essere modificati dall'interfaccia di amministrazione. I template possono essere ovviamente caricati all'interno della vostra interfaccia di amministrazione come pacchetti.
Un pacchetto contenente un template ha alcune caratteristiche: in primo luogo è compresso ed è un file unico; in secondo luogo ha una certa struttura delle directory necessariamente. 

   new-template/
            main.template
            postandcomments.template
            error.template
            posttrackbacks.template
            commentarticle.template
            albums.template
            album.template
            resource.template
            searchresults.template

In pratica nel pacchetto i file devono essere tutti contenuti in una directory che identifica anche il nome del template stesso.

Una volta che abbiamo finito di preparare i nostri file template e li abbiamo posizionati in una directory, dobbiamo trasformarla in un pacchetto. Lifetype supporta i file ZIP, TAR.GZ e TAR.BZ2.

I file devono avere lo stesso nome del template che avete scelto (ovvero anche il nome della directory in cui avete inserito i file). Una volta che avrete caricato l'archivio compresso, Lifetype farà una serie di controlli per verificarne la validità come template: controllerà il nome della directory e la sua struttura. Ovviamente il file dove vengono immagazzinati i template personalizzati deve essere scrivibile dal server web.

Come creare un nuovo template

Se provate a guardare i file del template che state usando (creandone una copia attraverso l'uso del plugin Template Editor), troverete alcune espressioni come {$post->getTopic()}, {calendar}, {$utils->postPermalink($post)} : esse sono oggetti speciali che sono stati esportati verso il sistema dei template dal codice di Lifetype e che possono essere usati all'interno dei template per ottenere informazioni dal database del blog o dalle sue impostazioni. Come menzionato nell'introduzione, uno dei vantaggi di un sistema di template è che in ogni template noi avremo a disposizione solo quello che è strettamente necessario per quel template e non altro. Quindi dobbiamo sapere quali oggetti sono disponibili per i nostri template (sia specificatamente che in generale per ogni file template).

Oggetti disponibili solo in alcuni template:

  • main.template
    • $posts: una lista dei post da pubblicare nella home page
  • postandcomments.template
    • $post: il singolo post che stiamo mostrando
    • $comments: una lista dei commenti al post
    • $prevpost: il post precedente a quello che stiamo mostrando
    • $nextpost: il post successivo a quello che stiamo mostrando
  • commentarticle.template
    • $post: il post che commenteremo
    • $comments: i commenti postati finora
  • linktracker.template
    • $links: una lista dei link
  • posttrackbacks.template
    • $post: il post da cui stiamo estraendo la lista dei trackback
    • $trackbacks: la lista dei trackback
  • error.template
    • $message: una stringa contenente il messaggio di errore.

Oggetti disponibili in ogni template:

  • $blog: un oggetto conenente le informazioni circa il blog, come il suo nome e la sua descrizione.
  • $locale: un ogetto con metodi per tradurre le stringhe in relazione alla lingua scelta per il blog. E' in grado anche di formattare date e numeri.
  • $calendar: una stringa che contiene il codice HTML di un calendario. Può essere personalizzato usando i CSS.
  • $archives: una lista con i link agli archivi. Ogni oggetto rappresenta un url che punta agli archivi per mese. Gli archivi sono organizzati cronologicamente a cominciare da quelli più recenti, mese per mese.
  • $recentposts: una lista di oggetti che contiene gli utlimi post pubblicati sul blog.
  • $articlecategories: una lista delle categorie del blog.
  • $mylinks: una lista di tutti i link del blog
  • $utils: una serie di metodi per generare urls e altre informazioni.
  • $rss: un aggregatore rss.

Inoltre esiste un oggetto $url che consente di scrivere correttamente le URL, i cui metodi possono essere letti presso il wiki originale di Lifetype.

Infine può essere utile dare un occhiata ai template che sono distribuiti di default con Lifetype.

Come aggiungere pagine statiche a un template

Se volessimo aggiungere pagine statiche a un blog mantenendo però la stessa impostazione grafica del nostro blog, abbiamo due possibilità: da un lato scriverle come semplici pagine html, ma questo ci costringerebbe a cambiarle ogni volta che cambiamo l'impostazione grafica del blog; oppure integrarle con il sistema di template in modo che siano parte integrante del nostro blog.

Prendiamo come esempio il template standard. Dobbiamo aggiungere un nuovo file alla directory standard, chiamiamolo resume.template (notare che l'estensione .template è obbligatoria).

Il file è ora processato come ogni altro file, e possiamo includere del codice Smarty in esso. Inoltre possiamo anche accedere agli oggetti che sono disponibili per tutti i template del sistema di template di Lifetype (descritti sopra). Ad esempio il nostro file resume.template potrebbe assomigliare a quanto riportato sotto: 

  {include file="standard/header.template"}
   <h1>My Resume</h1>
   <p>
    <b>Objective</b>

    Software engineering position...
    ...
   {include file="standard/footer.template"}

Ma dove sarà visualizzato il nostro file? 

http://nomeblog.noblogs.org/?op=Template&show=resume

NB: la T maiuscola di template non è un optional :)

Se stiamo usando le URL più amichevoli allora potrebbe anche trovarsi qui: 

http://nomeblog.noblogs.org/static/resume