Filtrer les libellés dans les articles

Filtrer les libellés dans les articles

Sur Blogger, les libellés permettent de classer et de relier les articles entre eux. Par défaut, ils s’affichent sous chaque post, sans possibilité de filtrage. Mais que faire si vous souhaitez cacher certains libellés, n’en montrer qu’une partie, ou encore varier les critères selon le type de page ?

Avec le langage XML de Blogger et ses opérateurs, il est possible de contrôler finement l’affichage des libellés. Ce guide montre comment filtrer, limiter et personnaliser leur rendu, aussi bien dans les anciens thèmes (V1/V2) que dans les thèmes Modernes (V3).

Code par défaut des libellés

Sous chaque article, Blogger insère automatiquement une petite boucle qui parcourt tous les libellés associés à l'article. Pour la modifier, il faut d’abord la retrouver dans le code du thème.

  1. Ouvrez le Tableau de bord Blogger.

  2. Rendez-vous dans Thème → Menu Personnaliser → Modifier le code HTML.

  3. Recherchez l’inclusion nommée post, qui fait partie du widget Blog.

À l’intérieur, vous trouverez une boucle semblable à celle-ci :

XML
<b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
  <b:if cond='not data:label.isLast'>,</b:if>
</b:loop>

Ce code fait trois choses :

  • Il parcourt le tableau data:post.labels (tous les libellés de l’article),

  • Il affiche chaque libellé comme un lien cliquable,

  • Il ajoute une virgule entre les libellés, sauf après le dernier (dans les thèmes V1/V2).

L'option des libellés est affichée sous l'article.

Dans les thèmes Modernes (V3), le bloc est un peu plus épuré : il affiche aussi tous les libellés, mais sans gérer de séparateur par défaut.

C’est ce bloc de base que nous allons retravailler pour appliquer nos propres filtres.

Filtrer les libellés avec un lambda

Une fois le code des libellés repéré, on peut commencer à le personnaliser. Le plus simple est d’appliquer un filtre sur le tableau data:post.labels.

Pour cela, Blogger met à disposition les expressions lambda. L’opérateur le plus courant est where, qui permet de ne garder que les libellés correspondant à un critère.

N’afficher que certains libellés précis

data:post.labels where (l => l.name in ["Frites","Chocolat","Hamburger"])

Exclure certains libellés

data:post.labels where (l => l.name not in ["Frites","Chocolat","Hamburger"])

Filtrer sur une correspondance partielle

data:post.labels where (l => l.name contains "burger")

Filtrer sur la longueur d’un libellé

data:post.labels where (l => l.name.size gt 10)

Dans tous ces cas, la boucle de départ ne change pas : ce qui varie, c’est le tableau sur lequel elle travaille.

Exemple d’intégration

<b:loop values='data:post.labels where (l => l.name != "Recette")' var='label'>
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:loop>
Un filtre a été appliqué à l'option des libellés.

En résumé

  • where filtre tous les libellés qui respectent la condition.

  • Pour ne garder que le premier libellé correspondant, on peut remplacer where par first.

Fixer une limite d'affichage de libellés

Parfois, il n’est pas nécessaire d’afficher tous les libellés d’un article. On peut choisir d’en montrer seulement quelques-uns pour alléger la présentation.

Blogger propose l’opérateur limit, qui permet de restreindre le nombre d’éléments d’une collection.

Afficher uniquement les 3 premiers libellés

data:post.labels limit 3

Afficher seulement la moitié des libellés

data:post.labels limit (data:post.labels.size / 2)

Combiner un filtre et une limite

(data:post.labels where (l => l.name not contains "€")) limit 3

Astuce avancée

L’opérateur limit peut être combiné à skip (aussi appelé offset) pour sauter un certain nombre d’éléments avant d’appliquer la limite. Cela permet, par exemple, d’afficher uniquement les libellés “4 à 6” d’un article.

Cas avancés : conditions dynamiques avec le ternaire

Jusqu’ici, les filtres étaient fixes : on définissait une règle valable pour toutes les pages. Mais il est aussi possible d’adapter le filtrage selon le contexte. Par exemple :

  • Afficher seulement certains libellés sur la page d’accueil,

  • Mais montrer l’ensemble des libellés dans les pages d’articles.

Pour cela, on utilise l’opérateur ternaire. Sa syntaxe est :

condition ? valeur_si_vrai : valeur_si_faux

Afficher uniquement trois libellés précis sur la page d’accueil, sinon tout afficher

<b:loop 
  values='data:view.isMultipleItems 
            ? data:post.labels where (l => l.name in ["PHP","Python","JS"]) 
            : data:post.labels' 
  var='label'>
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:loop>

Ici, la condition vérifie si la page courante est de type index.

  • Si oui : la boucle n’affiche que les libellés “PHP”, “Python” et “JS”.

  • Sinon : tous les libellés de l’article sont affichés.

En résumé

  • Le ternaire permet de définir deux comportements différents selon une condition.

  • On peut l’imaginer aussi pour varier le nombre de libellés (limit), ou combiner plusieurs critères (par exemple : filtrer par mot-clé sur l’accueil, par longueur dans les articles).

Gérer les séparateurs

Dans le code par défaut des thèmes V1/V2, chaque libellé est suivi d’une virgule, sauf le dernier. La condition isLast sert à masquer cette virgule finale.

Problème : dès qu’on applique un filtre (where, limit, etc.), la condition ne se base plus sur le tableau réellement affiché, mais sur le tableau original. Résultat : la virgule réapparaît au mauvais endroit.

Dans les thèmes V3, la situation est différente : aucun séparateur n’est ajouté d’origine. Mais si vous souhaitez en introduire un (virgule, tiret, icône…), vous êtes confronté au même défi : comment éviter que le séparateur s’affiche après le dernier libellé ?

La virgule apparaît après le dernier libellé.

La solution : alias et index

Pour corriger ce comportement, il faut :

  1. Définir un alias contenant le tableau filtré.

  2. Boucler sur cet alias au lieu du tableau original.

  3. Utiliser un index pour comparer la position du libellé et déterminer si c’est le dernier.

Exemple
<b:with value='data:post.labels where (l => l.name in ["Frites","Chocolat","Hamburger"])' var='selectedLabels'>
  <b:loop index='i' values='data:selectedLabels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    <b:if cond='data:selectedLabels.size != data:i + 1'>,</b:if>
  </b:loop>
</b:with>
  • data:selectedLabels est le tableau filtré,

  • index='i' donne la position du libellé,

  • La condition vérifie si la taille du tableau est différente de i + 1 → si oui, on ajoute une virgule.

Résultat

Dans les thèmes V1/V2, la virgule finale disparaît correctement même après filtrage.

Dans les thèmes V3, vous pouvez introduire votre propre séparateur (virgule, slash, icône) et le gérer proprement.

La virgule a disparu après le dernier libellé.

Conclusion

Filtrer les libellés dans Blogger ouvre la porte à beaucoup plus de souplesse qu’avec le simple affichage par défaut. Grâce aux opérateurs du langage (lambda, limit, ternaire), vous pouvez :

  • Inclure ou exclure certains libellés selon vos besoins,

  • Limiter leur nombre pour alléger la présentation,

  • Adapter les critères dynamiquement en fonction du type de page,

  • Et gérer correctement les séparateurs, aussi bien dans les anciens thèmes (V1/V2) que dans les thèmes modernes (V3).

Ce travail demande un peu de rigueur, mais une fois la logique comprise, tout devient modulable. Les libellés cessent d’être un bloc figé pour devenir un élément réellement maîtrisé de votre mise en page.

Spotlight

Populaires cette semaine

Call-to-Action - L'appel à l'action

L'opérateur de coalescence (alias Elvis)