[Expérimentations] Templates variables.

Continent · nov 2007

La semaine dernière, ma bien-aimée ma demandé s'il était possible de faire des billets capables d'utiliser leur propre template, sans changer la template des autre billets, pour par exemple "décorer"

différemment les posts Halloween, de manière permanente, plutôt que de devoir changer la template générale pendant une période restreinte.

La réponse est: Oui, c'est possible.

Le principe: on met dans le CSS tout ce qui est susceptible de varier (polices de caractère, couleurs, position des conteneurs, fonds, et textes "fixes" du genre "Accueil", "Mes amis", etc affichés sur tous les billets), puis on charge dynamiquement une autre feuille de style appliquée au même document, permettant de modifier tout ceci.

Les prérequis:
Le CSS ou feuille de style référence la section située entre <style> et </style> dans le début de votre template.

Les étapes:
1- Mettre tout le contenu textuel que l'on veut changer dans la feuille de style (Facultatif si vous voulez juste changer les couleurs, fonds, ou dispositions)
Remplacer

Code:

Accueil

dans votre template, par

Code:

(Permet de signifier que vous mettez à cet endroit un conteneur, vide par défaut, nommé txtAccueil).
Rajouter

Code:

#txtAccueil {
content: "Accueil";
}

dans la feuille de style, pour exprimer le fait que le conteneur nommé "txtAccueil" devra contenir le texte "Accueil".

Faire de même pour tous les autres textes "fixes" que vous voulez modifier.
Après cette manipulation, votre blog sera exactement le même, à la seule différence qu'il suffira de modifier la feuille de style pour changer les textes. (Ainsi que les polices, couleurs, fonds, qui sont régis par la feuille de style, par défaut).

Exemple: Un extrait de ma template

Code:

#txtAccueil {
content: "Accueil";
}
#txtProfil {
content: "Profil";
}
#txtArchives {
content: "Archives";
}
#txtMesAmis {
content: "Mes amis";
}
#txtPostedIn {
content: "Posté dans";
}
#txtCommentaires {
content: "Commentaires";
}
#txtLaissezCommentaire {
content: "Laissez un commentaire";
}
#txtLienPermanent {
content: "Lien permanent";
}
#txtTrackback {
content: "un Trackback";
}
#txtPostedBy {
content: "Posté par";
}
#txtFriends {
content: "L'actu des blogs de mes amis !";
}

...

<tr><td class='middle'><%EntryBody%><IfCategoriesAllowed><br><div class='author'>(<span id="txtPostedIn"></span> <%EntryCategory%>)</div></IfCategoriesAllowed></td></tr>
<tr><td class='bottom'><IfCommentsAllowed><a class='dark' href='<%EntryURL%>'><%EntryCommentCount%> <span id="txtCommentaires"></span></a><IfCommentPostAllowed> | <a class='dark' href='<%CommentPostURL%>'><span id="txtLaissezCommentaire"></span></a></IfCommentPostAllowed> | </IfCommentsAllowed><a class='dark' href='<%EntryURL%>'> <span id="txtLienPermanent"></span></a> | <IfTrackbacksAllowed> ou <a href='<%EntryTrackbackURL%>'><span id="txtTrackback"></span> (<%TrackbackCount%>)</IfTrackbacksAllowed> </td></tr>

À chaque fois, un <span> référence une section #txtNom de la feuille de style.

2- Mettre les infos de positionnement dans le CSS (Facultatif si vous ne voulez pas modifier la disposition des conteneurs)
Par défaut, les templates utilisent un positionnement sous forme de tables HTML, ce qui est très peu flexible. Commencons par utiliser des conteneurs libres.

Code:

<div id = "contents">

</div>


<div id = "authorInfo">
<table><tr>
<td><img src="http://www.vivelesrondes.com/uploads/Continent_avatar.png" /></td>
<td>
Pseudo: Continent<br />
Âge: 25 ans<br />
</td>
</tr></table>
</div>

En version très sommaire, on définit deux conteneurs sans se soucier de leur positionnement. Le premier contiendra les billets, les commentaires, etc. Le second servira juste à afficher l'avatar de l'auteur du Blog.

Ensuite, on définit leur positionnement dans la feuille de style.

Code:

#contents {
display:block;
position: absolute;
top: 40px;
right: 20%;
width: 60%;
}

#authorInfo {
display:block;
position: absolute;
top: 40px;
right: 5px;
width: 15%;
}

Ils sont positionnés de manière absolue, donc en toute liberté, sur la page. Dans l'exemple, on a simplement mis l'avatar à droite, et laissé une place vide à gauche des billets, pour pouvoir y mettre du contenu plus tard si besoin est.

Voilà pour la migration des informations variables au sein de la feuille de style. Malgré ces quelques modifications, votre blog est toujours le même. Il est juste sensiblement plus flexible. On va d'ailleurs jouer là-dessus.

Sauvegardez la section CSS de votre template, car vous allez la modifier pour tester votre nouvelle template.

3- Création d'une feuille de style alternative.
En théorie, vous n'avez (presque) plus rien à modifier sur votre template. Sauf que les outils de prévisualisation sont bien utiles, donc on va continuer à modifier, en prenant bien soin de ne modifier que la section CSS située entre les balises <style> et </style> en haut de votre template. Assurez-vous d'avoir sauvegardé quelque part votre ancienne feuille de style. Vous devrez la restaurer plus tard.

- Changement des couleurs de texte et de fond: Il vous suffit de modifier les attributs color, background, etc, comme à l'accoutumée quand vous réglez votre template.
- Changement des textes "fixes": il suffit de remplacer les textes de l'étape 1 par les nouveaux textes. Exemple:

Code:

#txtArchives {
content: "Les vieilles histoires";
}

pour changer le texte affiché sur le lien menant à la section des archives de votre blog.
- Changement des positions: Il suffit là aussi de changer les définitions de positionnement depuis la feuille de style:

Code:

#contents {
display:block;
position: absolute;
top: 40px;
left: 20%;
}

#authorInfo {
display:block;
position: absolute;
top: 40px;
left: 5px;
width: 15%;
}

Et on a passé ainsi l'avatar à gauche.

4- Dernier point: conditionner la sélection d'une feuille de style à un billet.
- Copier la nouvelle section CSS (Entre <style> et </style>, sans prendre les balises de début et de fin), et la sauvegarder dans un fichier.
- Coller votre ancienne feuille de style à sa place. Elle servira de feuille de style par défaut. Vous avez donc la même template qu'avant l'étape 3, mais vous possédez maintenant une feuille de style alternative.
- Rajoutez à la fin de votre billet "spécial" (Celui devant avoir une template particulière) le code suivant, en remplacant l'adresse de la feuille de style par la votre.

Code:

Notes: J'ai nommé dans l'exemple la feuille de style alternative avec une extension .png, pour pouvoir l'envoyer sur le blog sans devoir l'héberger ailleurs. Vous pouvez bien entendu faire autrement.
J'ai rajouté un test pour vérifier que l'on ne se trouve pas sur la page principale du blog, avant de charger la feuille de style alternative, afin de m'assurer que la template ne serait modifiée que sur le billet "spécial".

- Enfin, il suffit de définir la fonction permettant le test sus-cité, en effectuant une dernière modification de votre template: rajoutez le code

Code:

juste avant la balise </head> de votre template.

Un exemple ici

☺