Override di un template: tutorial introduttivo

Categoria: Temi e templates
Sorgente: (http://www.xoops.org/modules/news/article.php?storyid=3367)
Sommario: Questo articolo, spiega il concetto di override (sovrascrittura) di un Template, una caratteristica introdotta in XOOPS 2.0.14.
E' stato realizzato per aiutare gli utenti a capire questo nuovo concetto tramite una serie di esempi.
1) Che cos'è un template

Prima di tutto, cos'è un template?
I template possono visualizzare dati (come possono allo stesso modo ordinarli, posizionarli, e visualizzarli condizionatamente...).
I template sono usati per separare il processo di visualizzazione dati da quello di recupero e manipolazione.
Questo consente a quanti non sono programmatori di formattare facilmente i dati per la presentazione, senza modificare il codice sottostante, semplicemente modificando il file del template.

XOOPS ha di base dei template (quelli del modulo system sono 26 file), per esempio:
- system_redirect.html (Pagina di reindirizzamento)
- system_siteclosed.html (Pagina sito chiuso)
- system_block_login.html (Blocco di login)
- system_block_online.html (Blocco utenti online)
- system_block_comments.html (Blocco commenti)...
Inoltre tutti i moduli recenti usano template (pagine e blocchi).

Esempio:
Modulo News (15 template):
- news_archive.html (pagina archivio)
- news_block_new.html (blocco nuove notizie)
- news_block_top.html (blocco notizie più lette)...

Per visualizzare questi template, vai a admin -> system -> templates e clicca nella lista del modulo che vuoi vedere, nell'insieme dei template di default.
La sezione superiore mostra la pagina dei template, con i template dei blocchi nella parte inferiore.

Se queste pagine e blocchi non sono visualizzate nei tuoi link, non è un problema, puoi modificarli con la nuova funzionalità inclusa nel core dalla versione XOOPS 2.0.14:
Overriding dei template.

Un estratto dall'annuncio di rilascio di XOOPS 2.0.14:
Citazione:

I progettisti possono aggiungere template ai loro temi, e questi saranno usati al posto di quelli di default.
Per sfruttare questa caratteristica, i template devono essere creati in sottocartelle dei temi duplicando la struttura delle cartelle e rimuovendo la sezione "templates":
Per sovrascrivere:
system_userinfo.html (template che si trova in modules/system/templates/system_userinfo.html), devi creare la tua versione personalizzata in:
/modules/system/system_userinfo.html

Per sovrascrivere:
system_block_login.html (template che si trova in modules/system/templates/blocks/system_block_login.html), devi creare la tua versione personalizzata in:
/modules/system/blocks/system_block_login.html

2) Il concetto di Override

Ora, non c'è più bisogno di clonare il tuo template set di default, puoi continuare ad usarlo (infatti, per l'override, DEVI utilizzarlo),
sarà sufficiente creare una copia del template orginale de modulo nella directory themes//modules/.

Vantaggi:
- Nel caso di "Aggiornamento" del modulo, i file modificati non devono essere cancellati
- Solo i template modificati saranno presenti nella directory
- La traccia delle personalizzazioni dei template è ora molto semplice (struttura dei file)
- Facile da usare
- Puoi cambiare temi molto facilmente sovrascrivendo il pacchetto dei template di default (per esempio, blocco di login, blocco di ricerca, blocco sito chiuso...)

3) Esempio pratico #1

Personalizzazione del template "blocco commenti" (system_block_comments.html del modulo system)

0a) Verifica le modifiche nel tuo server di test prima di effettuare cambiamenti in produzione.
0b) Devi utilizzare una versione di XOOPS 2.0.14 o superiore, (o la versione 2.3.x)
0c) Se stai utilizzando un insieme di template clonati, devi attivare il template set default per poter usare l'Overriding.
In questo caso, puoi scaricare i template personalizzati dal tuo set clonato in modo da spostarli nella cartella appropriata per l'overriding.
0d) Il tuo blocco deve essere visibile per vedere le modifiche al template! (per i nuovi utenti)

1) Prima di tutto esegui il download del template del blocco:
admin system / templates / elenco System / linea system_block_comments.html, [Download]/i]



<table width="100%" cellspacing="1" class="outer">

 <{foreach item=comment from=$block.comments}>

 <tr class="<{cycle values="even,odd"}>">

   <td align="center"><img src="<{$xoops_url}>/images/subject/<{$comment.icon}>" alt="" /></td>

   <td><{$comment.title}></td>

   <td align="center"><{$comment.module}></td>

   <td align="center"><{$comment.poster}></td>

   <td align="right"><{$comment.time}></td>

 </tr>

 <{/foreach}>

</table>

2) Modifica il file appena scaricato e che ora è in locale.



<table width="100%" cellspacing="1" class="outer">

 <{foreach item=comment from=$block.comments}>

           <tr class="<{cycle values="even,odd"}>">

               <td style="text-align: left; vertical-align: middle;">

                   <img src="<{$xoops_url}>/images/commentaires_ico_16.gif" alt="Commentaire" /> <{$comment.title}>

                   <div style="text-align:right"><br /><{$comment.module}> - <{$comment.time}> - <{$comment.poster}></div>

               </td>

           </tr>

 <{/foreach}>

</table>

3) Se il mio tema è 7dana-soft, tramite ftp, vai alla cartella
/themes/7dana-soft Crea una cartella 'modules' e poi all'interno crea la cartella 'system' (il nome del modulo di cui si sovrascrive il template) e poi la cartella 'blocks'.
4) Esegui l'upload del file locale system_block_comments.html in /themes/7dana-soft/modules/system/blocks/ sul server.
5) Elimina i file nella cartella /template_c (eccetto index.html) (o aggiorniamo la cache del modulo) in modo da visualizzare i risultati dei nostri cambiamenti...

<== blocco commenti di default
blocco personalizzato ==>

4) Esempio pratico #2

Un altro esempio ma con i "contenuti in attesa" del modulo Blocco Estensibile Contenuti in Attesa.

0a 0b 0c 0d Gli stessi dell'esempio 1
1) Prima esegui il download del file blocco template:
admin system / templates / Waiting Contents Extensible [i]lista / linea waiting_block_waiting.html, [Download]



<{foreach item=module from=$block.modules}>

<{$module.name}>

<ul>

 <{foreach item=pending from=$module.pending}>

 <li>

   <{if $pending.pendingnum}>

     <span style='font-weight:bold;'>

   <{else}>

     <span style='font-weight:normal;'>

   <{/if}>



     <a href="<{$pending.adminlink}>"><{$pending.lang_linkname}></a>:<{$pending.pendingnum}>

   </span>

 </li>

 <{/foreach}>

</ul>

<{/foreach}>

2) Modifica il file appena scaricato e che ora è in locale.



<{foreach item=module from=$block.modules}>

<b><{$module.name}></b>

<ul>

 <{foreach item=pending from=$module.pending}>

 <li>

     <a href="<{$pending.adminlink}>"><{$pending.lang_linkname}></a> :

   <{if $pending.pendingnum}>

     <font color=red><b><{$pending.pendingnum}></b></font>

   <{else}>

     <{$pending.pendingnum}>

   <{/if}>

 </li>

 <{/foreach}>

</ul>

<hr />

<{/foreach}>

3) Se il tema è 7dana-soft, tramite ftp, vai alla cartella /themes/dana-soft. Crea la cartella modules, e all'interno waiting, e ancora la cartella blocks
4) Eseguiamo l'upload del file locale waiting_block_waiting.html nella cartella /themes/dana-soft/modules/waiting/blocks/ nel server.
5) Cancelliamo i file nella cartella /template_c (eccetto index.html) (o aggiorna la cache del modulo) per visualizzare i risultati...

Immagine vecchia Imagine nuova
<== Blocco di defualt dei contenuti in attesa - Personalizzato ==>

5) Override delle immagini

Infine, è possibile anche l'overriding di immagini. Ci sono 2 casi possibili:
- se il modulo usa l'overriding, puoi semplicemente copiare immagini nella stessa cartella del tema per overriding dei template del modulo,
- Modifichiamo un template in questo modo:



<img src="<{xoImgUrl modules/mymodule/images/image1.gif}>" alt=""/>

Esempio:
Cambiare immagine dal modulo news (l'immagine print.gif) (template article.html dal modulo news)
Sostituiamo il codice seguente nel template article.html:



<img src="<{$xoops_url}>/modules/news/images/print.gif" border="0" alt="<{$lang_printerpage}>" />

con questo:



<img src="<{xoImgUrl modules/news/images/print.gif}>" border="0" alt="<{$lang_printerpage}>" />

Quando questa pagina sarà visualizzata, il template mostrerà l'immagine posizionata in //modules/news/, e se l'immagine non esiste, sarà visualizzata l'immagine iniziale (/modules/news/images).

6) Note e altri override

Nota 1:
In entrambi gli esempi, abbiamo semplicemente modificato i template dei blocchi, per i template delle pagine, fai l'upload dei tuoi file in:
//modules/miomodulo e non in //modules/miomodulo/blocks.

Nota 2:
Dai un'occhiata a questo tema, [url:http://www.7dana.com/download/pafiledb.php?action=file&id=21]7dana-clean[/url].
In questo tema troverai:
- La nuova posizione dei blocchi (blocchi basso centrale, blocchi basso sinistra, blocchi basso destra)
- 7 template per l'overriding

Nota 3:
Copia index.html (dalla cartella templtate_c o in ogni altra cartella del core contenente index.html) nella nuova cartella del modulo nel tuo tema.

Override del CSS
Per i CSS, l'overriding è utilizzato alla stessa maniera, ma il comando è differente:
<{$xoTheme->addStylesheet('modules/news/style.css')}>

javascript overriding
Presto maggiori informazioni.

---------------

Articolo originale: http://www.xoops.org/modules/news/article.php?storyid=3367
Traduzione a cura di flymirko

Xoops Italia :: Articolo

Override di un template: tutorial introduttivo

1) Che cos'è un template

2) Il concetto di Override

3) Esempio pratico #1

4) Esempio pratico #2

5) Override delle immagini

6) Note e altri override