Documentation daCode : Thèmes et templates: Écriture de thèmes

Page suivante Page précédente Table des matières

## 1. Écriture de thèmes

## 1.1 Principe des templates

Le principe des templates consiste à dissocier l'architecture du site (affichage, positionnement des boîtes) de son contenu et de sa mise en forme. Ils permettent ainsi de préserver l'homogénéité du site et d'en personnaliser l'affichage sans avoir à retoucher le code HTML.

## 1.2 Écriture de templates

Les templates mélangent du code HTML, des commentaires (lignes commençant par un signe dièse « # »), et des instructions PHP exécutées par daCode. Celles-ci sont de la forme :

          <!-- daCode: expression -->

où « expression » est une expression PHP qui doit retourner le texte à intégrer à la place de cette ligne. Ces instructions doivent tenir sur une ligne.

> `

>          <!-- daCode: $html->header('Exemple') -->
>          <table border="0" cellpadding="3" cellspacing="3" width="100%">
>          <tr><td valign="top" width="100" rowspan="2">
>          <!-- daCode: $sidebox->dacode() -->
>          </td><td valign="top" width="80%">
>          <!-- daCode: $news->show_news(10,$section,$topic,1,1,$news_id) -->
>          </td>
>          </table>
>          <!-- daCode: $html->footer() -->

> `

La première ligne, par exemple, fait appel à la fonction header définie dans le fichier `src/phplip/themes/<theme>/html.php3`, auquel fait appel la classe Html, définie dans `src/phplib/html.php3`. header() prend ici en argument le titre de la page, "exemple".

## 1.3 Utilisation de templates

### Modifier l'affichage des fonctions de daCode

Nous allons reprendre l'exemple précédent, que nous nommerons "test.tmpl", et l'appeler dans notre page test.php3. Pour créer cette page, inspirons-nous par exemple, en l'adaptant, de src/htdocs/poll/index.php3 :

> `

>          <?
>              //  En-tête commun à tous les scripts de daCode
>              $topdir = '..';
>              require $topdir."/dacode.php3";

>              //  Instances de classes utilisées dans test.tmpl
>              $html = LoadClass('Html');
>              $sidebox = LoadClass('Sidebox');
>              $news = LoadClass('News');

>              //  Composition de la page
>              $html->parsetemplate('test.tmpl');
>           ?>

> `

Il faut définir toutes les variables qui apparaissent dans le template. Donc dans cet exemple, les variables $topic et $news_id seront vides. De même, il faut s'assurer que toutes les variables sont déclarées comme globales dans la fonction parsetemplate du fichier phplib/html.php3.

### Créer ses propres pages statiques

Il suffit pour celà de récupérer le template basic.tmpl disponible dans le thème linuxfr et de l'adapter, par exemple, de la façon suivante :

> `

>             <!-- daCode: $html->header($title) -->
>            <table align="center" width="80%" border="0">
>            <tr>
>            <td class="bodytext">
>             <!-- daCode: $text -->
>             </td>
>             </tr>
>             </table>
>             <!-- daCode: $html->footer() -->

> `

Pour l'appeler (appelons-le static.tmpl), il suffira de prodéder comme décrit plus haut, mais en définissant cette fois les valeurs de $text et $title :

> `

>            <?
>             $topdir = '.';
>             require $topdir."/dacode.php3";

>             $html = LoadClass('Html');
>             $sidebox = LoadClass('Sidebox');
>             $title="Ma belle page";
>             $text ="mon texte...avec des caractères échappés \ devant
>             chaque guillemet";
>             $html->parsetemplate('static.tmpl');
>            ?>

> `

## 1.4 Création d'un nouveau thème

### Copie d'un thème existant, et personnalisation des templates

À partir des informations de la section précédente, on se rend compte qu'il est très simple de créer un nouveau thème. Les templates sont dans le répertoire `phplib/themes/<nom_du_theme>`. Si on veut créer un thème « print », on commence par recopier un thème existant, par exemple celui de daweb :

    cp -R phplib/themes/daweb phplib/themes/print

Puis on modifie les fichiers *.tmpl pour modifier la mise en page.

### Personnaliser son thème : styles et images

Une fois les boîtes positionnées à l'aide des templates, il suffit de modifier `phplib/themes/print/html.php3`, qui contient les header, footer et autres propriétés du document, telles que les styles ou les images. Pour personnaliser :

- les styles : mettre sa nouvelle feuille de style dans `htdocs/themes/print/`. Les styles appelés (attribut class="") sont modifiables directement dans le html.php3 ;
- les logos et images : ceux-ci sont appelés sous la forme `$this->session->imgurl('image')`, où image est un fichier au format png que daCode cherchera dans `htdocs/themes/print/images/`, en priorité, ou dans htdocs/images. Le premier emplacement est vivement recommandé si vous souhaitez ensuite pouvoir constituer une archive de votre thème. Cf Section Partager ses thèmes.
- Les images de Topics : vous voudrez sans doute modifier le fond des images actuelles ou créer les vôtres. Pour les mêmes raisons que ci-dessus, il est recommandé de les placer dans `htdocs/themes/print/images/section`. Passer ensuite par l'interface graphique d'administration ("gestion des topics") pour en définir de nouveaux.

### Appeler son nouveau thème

Enfin, il faut aussi modifier le fichier config.php3 pour ajouter ce nouveau thème :

    $this->listofthemes = array('linuxfr','slashdot', 'daweb',
         'print');

Et, si l'on souhaite en faire le thème par défaut de son site :

    $this->dft_prefs = array ("theme" => 3 );

Où 3 correspond à l'emplacement du thème dans la liste définie ci-dessus (numérotée de 0 à n)

Page suivante Page précédente Table des matières