Paris, photo, humeurs, un peu de HTML/CSS pour faire sérieux. Feinte innocence et vraie naïveté (ou vice-versa). Encore un blog qui agite ses petits bras en couinant "Viens me lire !"
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 :
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.
Si vous n'avez jamais installé de JavaScript chez vous rendez-vous ici pour les détails.
Mes Documents/Autres fichiersde votre admin de 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.
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.
Prenons l'exemple d'une page de catégorie :
Trois parties dans cette URL, lue de gauche à droite :
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 :
identitédistinguant cette page de ses
sœursde même nature :
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.
Avec mon programme, le body de la page utilisée comme exemple recevra trois classes :
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).
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. .
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 :
.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.
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 !).
dissectiondu programme dans un article séparé.