'Styler' les pages de blog selon leur URL

17.10.2008

Si vous êtes arrivé ici en suivant un lien qui parlait de billet en page d'accueil, restez ! L'adresse est bonne mais j'ai étendu la technique utilisée. Le billet en page d'accueil n'est plus qu'un cas particulier, il a un article pour lui seul. Si vous ne voyez pas clairement ce qu'est une classe de CSS, je vous conseille de commencer par cet article sur le billet d'accueil. Et revenons au sujet.

Comment donner un aspect différent à des pages différentes ? En configuration classique, jouer sur le CSS permet bien sûr de personnaliser la présentation des articles, des commentaires, etc. mais, par exemple, l'image de fond du blog sera toujours la même. En configuration avancée d'un blog OB on peut nuancer davantage puisqu'on utilise des CSS différents pour trois sortes de pages du blog : la page d'accueil et ses suites (CSS "accueil"), les pages (CSS "pages"), tout le reste du blog (CSS "articles"). C'est un progrès mais quelquefois insuffisant, par exemple :

rien ne distingue la "vraie" page d'accueil du blog de ses pages de suite (les n-index.html),
rien n'est prévu pour la liste complète des articles,
ni pour les archives, d'ailleurs,
sans parler des CGU…

Bref, il manque toujours l'onglet particulier de CSS qui vous rendrait tellement service.

Le programme JS présenté ici pallie cette lacune (niveau Privilège ou Premium). Il ne crée pas de nouveaux onglets dans l'administration (faut pas rêver !) mais vous donne le moyen de traiter différemment, par des classes CSS, les pages qui vous intéressent.

Installation

Si vous n'avez jamais installé de JavaScript chez vous rendez-vous ici pour les détails.

Cliquez sur le bouton et sauvegardez le fichier sur votre ordinateur.
Ensuite stockez ce programme, sans rien y changer, dans l'espace Mes Documents/Autres fichiers de votre admin de blog.

Enfin, ajoutez une ligne au début de l' en-tête (oui, ça change) du blog :

 <div><script type="text/javascript" src="URL_du_programme"></script></div>

Remplacez bien sûr URL_du_programme par l'url effective du fichier. C'est tout.

Principe

Le programme attribue au body de chaque page du blog plusieurs classes déduites de l'URL de la page. Ces classes permettent de savoir si l'on est sur une page de catégorie plutôt que d'archive, sur une page de telle catégorie plutôt que de telle autre, sur la page numéro 1, 2, 3 ou autre. On peut dès lors, par le biais du CSS, styler chaque page comme on l'entend. Il y aura des exemples mais lisez d'abord la section suivante.

Les URL OverBlog

Prenons l'exemple d'une page de catégorie :

Trois parties dans cette URL, lue de gauche à droite :

de http: jusqu'à la dernière barre de fraction : on trouve le chemin d'accès ;
de cette barre jusqu'au point : le nom de fichier ;
du point jusqu'à la fin : le suffixe indiquant à quel type de fichier on a affaire – ici, évidemment, du langage HTML

Cette structure est très générale. Le chemin d'accès (tout ce qui se trouve avant le dernier slash) est à peu près toujours le même, c'est l'URL du blog. Le suffixe aussi est toujours le même : .html.

C'est le nom de fichier qui identifie la page, lui seul nous intéresse pour la suite. Il est formé d'un ou plusieurs mots séparés par des tirets :

un numéro d'ordre (pas toujours, considéré comme zéro s'il est absent), la numérotation commence à zéro et non un,
un mot (toujours présent) indiquant la nature de la page (ici une page de catégorie) ,
et, pour finir, une identité distinguant cette page de ses sœurs de même nature :
- numéro de catégorie (ici 842083),
- ou date d'archive pour une page d'archive,
- ou (depuis octobre 2009 : titre et) numéro de l'article pour un article,
- etc.

Si vous voulez, circulez dans votre propre blog et regardez ce que devient l'URL affichée dans la barre d'adresse du navigateur. L'exercice est simple et très instructif.

Premier exemple

Avec mon programme, le body de la page utilisée comme exemple recevra trois classes :

pg_categorie indique qu'il s'agit d'une page de catégorie,
pgid_842083 indique qu'il s'agit de la catégorie 842083,
pgnum_33 indique qu'il s'agit de la page numéro 33 dans cette catégorie.

Et qu'est-ce qu'on peut en faire ? Voici un bout de CSS :

 .pg_categorie #footer {display:none} /* pas de pied de page sur toutes les pages de catégorie ... */ .pg_categorie.pgnum_0 #footer {display:block} /* ... sauf pour la 1ère page de la catégorie */ .pg_categorie.pgid_842083 .titreArticle {font-size:120%} /* de plus gros titres pour la catégorie 842083 */

Je ne dis pas que c'est un CSS réaliste ou utile ! Je dis seulement qu'il marche : la page prise en exemple n'aura pas de pied de page (car c'est une page de catégorie et pas la première) mais de gros titres d'articles (car c'est la catégorie 842083).

Toutes les classes possibles

Voici toutes les classes CSS que vous pouvez vous attendre à employer (si et seulement si vous en avez besoin) :

Nature de la page	Classe correspondante	dans `pgid_XY`, XY est…	dans `pgsubid_ABC`, ABC est…	dans `pgnum_NN`, NN est…	CSS concerné si configuration avancée
Accueil	`pg_index`	non défini, pas de classe	non défini, pas de classe	le numéro d'ordre de la page	Accueil
Page	`pg_page`	le numéro de la page	le titre de la page, s'il figure dans l'URL	0 (aucun intérêt)	Pages
Article seul	`pg_article`	le numéro de l'article	le titre de l'article, s'il figure dans l'URL	0 (aucun intérêt)	Articles
Article et ses commentaires	`pg_comments`	le numéro de l'article	le titre de l'article, s'il figure dans l'URL	le numéro d'ordre de la page	Articles
Catégorie	`pg_catégorie`	le numéro de la catégorie	non défini, pas de classe	le numéro d'ordre de la page	Articles
Archives	`pg_archive`	la date de l'archive	non défini, pas de classe	le numéro d'ordre de la page	Articles
Liste complète	`pg_articles`	`pgid_blog` (aucun intérêt)	non défini, pas de classe	le numéro d'ordre de la page	Articles
Articles les plus commentés	`pg_top`	`pgid_articles` (aucun intérêt)	non défini, pas de classe	le numéro d'ordre de la page	Articles
C.G.U	`pg_reglement`	`pgid_blog` (aucun intérêt)	non défini, pas de classe	0 (aucun intérêt)	Articles

Précision : le numéro d'ordre est le numéro d'ordre du premier article affiché sur la page. Il dépend donc du nombre d'articles par page : si le blog est configuré en trois articles par page, les 'filenames' successifs de la catégorie 84203 seront 0-categorie-842083 (même page que categorie-84203), 3-categorie-84203, 6-categorie-84203 etc. .

Utilisation – quelques exemples

Ces classes, comme annoncé plus haut, permettent d'écrire des sélecteurs CSS propres à une page ou une famille de pages particulières, donc d'en ajuster la présentation à sa guise. Exemples :

un fond spécial pour toutes les pages "categorie"

Réponse : .pg_categorie {background: .....} (dans le CSS articles si configuration avancée)

un fond spécial pour toutes les pages d'une seule "categorie"

Réponse : .pg_categorie.pgid_1234 {background: .....} (dans le CSS articles si configuration avancée)

un fond spécial pour une certaine OB-page

Réponse : .pg_page.pgid_1234 {background: .....} (dans le CSS pages si configuration avancée)

supprimer tous les modules de la page des CGU

Réponse : .pg_reglement .box {display:none} (dans le CSS articles si configuration avancée)

ne montrer l'article d'accueil que sur la page d'accueil

Réponse :

 .pg_index #articleAccueil {display:none} /* cache l'article sur toutes les pages d'accueil... */ .pg_index.pgnum_0 #articleAccueil {display:block} /* ... sauf sur la première, la "vraie" */

(dans le CSS accueil si configuration avancée)(voir aussi l'article "Un billet en page d'accueil").

Synthèse : les classes de la première colonne du tableau vous permettent de faire un CSS propre à chaque genre de page. Tout se passe comme si vous aviez un onglet de CSS pour chaque page, et même davantage en utilisant les classes des autres colonnes : un onglet de CSS pour chaque catégorie, chaque article, chaque page…

Merci à Orties qui s'est prêtée aux essais cliniques.

Démontage

Le présent article vous fournit le programme et son mode d'emploi. Son article jumeau démonte entièrement le programme si vous voulez comprendre comment il marche (lecture totalement facultative mais espérée intéressante !).

Mises à jour

Octobre 2008 : 1ère publication.
Octobre 2009 : programme et article mis à jour pour tenir compte des nouvelles URL d'articles publiés depuis octobre 2009 (titre d'article inclus dans l'URL).
Avril 2012 : clarification de l'article, mise à disposition du programme sous forme téléchargeable, report de la dissection du programme dans un article séparé.