Note préliminaire. Si je fractionne cette série de billets "radiographiques" pour vous éviter l'indigestion il est cependant vivement recommandé de les lire dans l'ordre de leur parution, les notions expliquées dans l'un n'étant pas répétées dans le suivant...

On l'a vu dans le billet traitant de [la structure générale des pages du blog, certaines parties récurrentes sont insérées dans les pages par un fichier inclus. Nous verrons tout d'abord quel est leur contenu, puis comment le personnaliser.

Les trois fichiers inclus

Voici le contenu des fichiers inclus du thème par défaut.

_head.html

<style type="text/css" media="screen">
@import url({{tpl:BlogThemeURL}}/style.css);
</style>
<style type="text/css" media="print">
@import url({{tpl:BlogThemeURL}}/../default/print.css);
</style>

<script type="text/javascript" src="{{tpl:BlogThemeURL}}/../default/js/jquery.js"></script>
<script type="text/javascript" src="{{tpl:BlogThemeURL}}/../default/js/jquery.cookie.js"></script>

{{tpl:include src="user_head.html"}}
{{tpl:SysBehavior behavior="publicHeadContent"}}

Le contenu de ce fichier ne sera pas affiché mais il envoie des informations supplémentaires dans l'entête de la page du blog. Ici, la feuille de style qui devra être utilisée, l'adresse où se trouvent les fichiers javascripts, les behaviors. Les behaviors sont des bouts de code utilisés par les plugins pour « s'inviter » dans les pages de template sans nécessiter votre intervention.

_top.html

<div id="top">
  <h1><span><a href="{{tpl:BlogURL}}">{{tpl:BlogName encode_html="1"}}</a></span></h1>
  
  <!-- # --BEHAVIOR-- publicTopAfterContent -->
  {{tpl:SysBehavior behavior="publicTopAfterContent"}}
</div>

<p id="prelude"><a href="#main">{{tpl:lang To content}}</a> |
<a href="#blognav">{{tpl:lang To menu}}</a> |
<a href="#search">{{tpl:lang To search}}</a></p>

Le premier bloc contient le titre du blog, le deuxième encore ces fameux behaviors dont je parlais plus haut. Le troisième contient le "prelude".

Je profite de l'occasion pour vous inciter vivement à NE PAS supprimer ce prélude (aussi appelés "liens d'accessibilité"). Il s'agit là de liens facilitant grandement la vie aux personnes souffrant d'un handicap visuel ou physique leur permettant d'atteindre directement les parties importantes du site. Il permettra également une navigation sur le wap plus aisée. Avez-vous déjà fait défiler toute une page sur l'écran d'un téléphone mobile pour pouvoir enfin atteindre le champ de recherche ?

Astuce : ce fichier est l'endroit idéal pour ajouter le contenu du champ "description du weblogue". On l'insère par exemple juste avant la fermeture de la boite "top" grâce à la ligne :

<p id="blogdesc">{{tpl:BlogDescription}}</p>

Et on affinera sa présentation grâce à la règle #blogdesc { } à ajouter dans le fichier style.css du thème choisi.

_footer.html

<div id="footer">
  <p>{{tpl:SysPoweredBy}}</p>
</div>

La balise tpl:SysPoweredBy affiche « Propulsé par Dotclear » dans la langue du blog.

Personnaliser le contenu de ces fichiers

Tout d'abord, afin de préserver le thème par défaut en son état originel, faites une copie du fichier que vous souhaitez modifier et placez-le dans le répertoire tpl du thème que vous avez choisi. Mieux encore, passez par l'éditeur de thème de l'administration : en cliquant sur le nom du fichier que vous voulez modifier ça en crée automagiquement un double dans votre thème.

Vous pourrez alors le modifier. Rien de plus simple, mais vous l'aurez deviné : si vous souhaitez ajouter en bas de toutes vos pages un copyright ou autre information il vous suffira d'éditer le fichier _footer.html et d'y placer votre ajout. La seule obligation est de respecter la syntaxe xhtml strict.

Ne vous inquiétez pas si vos modifications ne semblent pas prises en compte : Dotclear utilise un système de placement en cache des pages de template pour ne pas avoir à les « recalculer » systématiquement. Les changements ne seront alors pris en compte que lorsque la page modifiée aura été supprimée du cache. Vous pouvez accélerer ce processus en vous rendant dans la page « Maintenance » (rubrique Extensions du menu d'administration) puis en cliquant sur Vider le répertoire du cache des templates.

Si malgré cela vos changements ne sont pas pris en compte, vérifiez donc que vous avez modifié le bon fichier (celui en ligne et non celui sur votre disque dur par exemple... ou celui du thème que vous utilisez et pas celui d'un autre thème, etc.).