Nous allons ici aborder la notion de surcharge de templates, apparue depuis la version 2.0.14 de XOOPS.
Il s'agit dans cet article d'en comprendre le principe et de le vérifier par 2 exemples didactiques.
Tout d'abord détaillons le mot template :
Les templates permettent d’afficher des données (ordre, position, affichage conditionnel,…)
L’utilisation des templates permet de séparer le traitement des données de leur affichage ; on peut ainsi modifier la présentation
des données, sans toucher au code, en modifiant simplement le template.
XOOPS est fourni avec ses templates (module system, + de 26 fichiers) et notamment :
- system_redirect.html (page de redirection)
- system_siteclosed.html (page de fermeture du site)
- system_block_login.html
- system_block_online.html (bloc de login)
- system_block_comments.html (bloc des commentaires)...
Chaque module également, arrive avec son lot de templates (pages et blocs).
Exemple :
Le module News (15 templates) avec notamment :
- news_archive.html (page des archives)
- news_block_new.html (bloc articles récents)
- news_block_top.html (bloc articles les plus lus)...
Pour voir coté admin ces templates, allez dans la partie admin system / templates et cliquez sur liste pour le module qui vous intéresse dans le jeu de template default.
Vous y trouverez en partie supérieure les templates des pages puis les templates de blocs
Si ces pages et ces blocs ne vous conviennent pas tout à fait, vous avez la possibilité de les modifier en utilisant la nouvelle fonctionnalité apportée depuis la version 2.0.14 de XOOPS :
La surcharge des templates.
Pour mémoire, voila un extrait de l'article annonçant la sortie de XOOPS 2.0.14 on pouvait lire :
Citation :
Les designers peuvent ajouter des templates personnalisés à leurs thèmes qui peuvent être utilisés en remplacement de celui défini par défaut.
Pour exploiter cette fonction, les templates doivent être créés dans des sous-dossiers du thème à l'identique de la structure des dossiers des modules :
Pour surcharger :
system_userinfo.html (template situé dans modules/system/templates/system_userinfo.html) vous devez créer votre version personnalisée dans :
votre_dossier_theme/modules/system/system_userinfo.html
pour surcharger :
system_block_login.html (template situé dans modules/system/templates/blocks/system_block_login.html), vous devez créer votre version personnalisée dans :
votre_dossier_theme/modules/system/blocks/system_block_login.html
Explication :
Dorénavant, vous n'avez plus besoin de cloner un jeu de template, utilisez le jeu de template par défaut (obligatoire), et installez sous votre_dossier_theme la structure des templates de votre module.
Avantages :
- En cas de MAJ du module, vos fichiers modifiés ne seront pas écrasés
- Seuls les templates à modifier seront installés sous le dossier de votre thème
- La lisibilité des templates personnalisées est immédiate et compréhensible de part la simplicité de la structure des dossiers conteneurs
- Grande souplesse d'utilisation
- Vous pourrez trouver/fournir très facilement des thèmes avec un pack de surcharges existant (bloc login, bloc recherche...)
Page 2 : Exemple didactique 1
Page 3 : Exemple didactique 2
Page 4 : Remarques et surcharges d'images et de css...
Exemple didactique 1 :
Personnalisation du template du bloc des commentaires (system_block_comments.html du module system)
0a) Evidemment, ces essais se feront tout d'abord sur un site test le plus proche qualitativement de votre site en production
0b) Il convient d'utiliser au moins une version 2.0.14 de XOOPS, ou supérieur (hors version 2.2.x).
0c) Si vous utilisiez un clone de jeu de templates, il faut dorénavant activer le jeu de templates par défaut, c'est obligatoire pour voir la surcharge des templates fonctionner.
Dans ce cas, pour vos templates modifiés dans votre clone, téléchargez les templates personnalisés pour les avoir à portée de main pour la suite.
0d) Votre bloc doit être visible pour voir les modifications, par la suite (Evidemment)
1) Récupérons tout d'abord le template du bloc concerné :
admin system / templates / liste de système / ligne system_block_comments.html, [Télécharger]
<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) Modifions maintenant en local ce fichier nouvellement téléchargé.
<table width="100%" cellspacing="1" class="outer">
<{foreach item=comment from=$block.comments}>
<tr class="<{cycle values="even,odd"}>">
[color=FF0000]<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>[/color]
</tr>
<{/foreach}>
</table>
3) Si mon thème se nomme 7dana-soft, via ftp, allons dans le dossier
/themes/dana-soft et créons le dossier modules puis dessous le module system puis dessous le dossier blocks
4) Copions le fichier local system_block_comments.html sous /themes/dana-soft/modules/system/blocks/
5) Supprimons les fichiers du dossier /template_c sauf index.html (ou Mise à jour du cache des modules dans le panneau de configuration) et voyez le résultat...
 <== bloc commentaire par défaut - personnalisé ==>
C'est tout !
Exemple didactique 2 :
Reprenons ce même principe avec le bloc "contenu en attente" du module Extensible Waiting Block Module.
0a 0b 0c 0d idem ci-dessus
1) Récupérons tout d'abord le template du bloc concerné :
admin system / templates / liste de Waiting Contents Extensible / ligne waiting_block_waiting.html, [Télécharger]
<{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) Modifions maintenant en local ce fichier nouvellement téléchargé.
<{foreach item=module from=$block.modules}>
[color=FF0000]<b>[/color]<{$module.name}>[color=FF0000]</b>[/color]
<ul>
<{foreach item=pending from=$module.pending}>
<li>
<a href="<{$pending.adminlink}>"><{$pending.lang_linkname}></a> :
<{if $pending.pendingnum}>
[color=FF0000]<font color=red><b>[/color]<{$pending.pendingnum}>[color=FF0000]</b></font>[/color]
<{else}>
<{$pending.pendingnum}>
<{/if}>
</li>
<{/foreach}>
</ul>
[color=FF0000]<hr />[/color]
<{/foreach}>
3) Si mon thème se nomme [url="http://www.7dana.com/download/pafiledb.php?action=file&id=25]7dana-soft[/url], via ftp, allons dans le dossier
/themes/dana-soft et créons le dossier modules puis dessous le module waiting puis dessous le dossier blocks
4) Copions le fichier local waiting_block_waiting.html sous /themes/dana-soft/modules/waiting/blocks/
5) Supprimons les fichiers du dossier /template_c sauf index.html (ou Mise à jour du cache des modules dans le panneau de configuration) et voyez le résultat...
 <== bloc contenu en attente par défaut - Bloc contenu en attente personnalisé ==>
Note 1 :
dans les 2 exemples, nous n'avons traité que des blocs, mais si vous souhaitez personnaliser des templates de pages plutôt que des templates de blocs, il conviendra de placer vos fichiers sous :
/themes/votre_dossier_theme/modules/monmodule
et non sous
/themes/votre_dossier_theme/modules/monmodule/blocks.
Note 2 :
Allez jeter un coup d'oeil sur ce thème, 7dana-clean, vous y trouverez votre bonheur.
En effet, dans ce thème est inclus :
- le nouveau positionnement des blocs (blocs centraux bas, gauche droite et centre)
- 7 surcharges
Note 3 :
Placez dans vos dossiers créés un fichier index.html avec retour à la page précédente. C'est mieux.
Surcharge des images
Enfin, la surcharge des images est tout à fait possible. 2 cas de figures possibles :
- Soit le module intégre déja dans son code le système de surcharge, dans ce cas, il suffit de placer les images sur le même principe que pour la surcharge des blocs,
- Soit, il suffit de modifier un template et de le placer également en surcharge. Dans ce template, vous trouverez les liens vers les images de la façon suivante :
<img src="<{[color=FF0000]xoImgUrl[/color] modules/monmodule/images/image1.gif}>" alt=""/>
Exemple :
Utilisation de la surcharge des images pour changer l'image de l'imprimante du module news (template article.html du module news)
Remplacez dans la surchage du template article.html
<img src="<{$xoops_url}>/modules/news/images/print.gif" border="0" alt="<{$lang_printerpage}>" />
par
<img src="<{[color=FF0000]xoImgUrl [/color]modules/news/images/icon/print.gif}>" border="0" alt="<{$lang_printerpage}>" />
Lors de l’affichage de la page, le template affichera l’image se trouvant dans /theme/votre theme/modules/news/icon/, et si l’image n’existe pas le template affichera l’image se trouvant dans modules/news/icon.
Surchage css
Le fonctionnement pour les css est identique, mais avec des commandes différentes :
<{$xoTheme->addStylesheet('modules/news/style.css')}>
Surchage javascript
Nous reviendrons parler de cette surcharge plus tard car actuellement, il réside encore quelques difficultés.
Pour les développeurs
Amis développeurs, profitez de la mise à jour de vos modules pour modifier vos templates d'origines et proposer ces derniers avec l'intégration possible des surcharges d'images.
Un grand merci à Dugris pour ses précisions sur la surchage des images,css et javascript.
A vous de jouer !
|
