Créer des sous-catégories dans le gadget Libellés

Cette fonctionnalité n'est pas fournie dans le pack original de Blogger. Mais est-il réellement possible d'automatiser une liste ?
Si vous êtes arrivé sur cette page, il est fort probable que ça soit réalisable via l'éditeur XML de votre modèle.

Compatibilité

• Gadget Version : 1
• Template Version : 1 - 2

Présentation

En théorie, on ne peut pas créer des sous-catégories, parce qu'il n'existe pas de donnée qui associe un libellé à un libellé parent.
C'est pour cette raison que vous ne trouverez pas de gadgets préfabriqués conçus pour la distribution.
Par contre, les pages de recherche de libellés filtrent les posts avec un ou plusieurs libellés et le langage XML de Blogger est doté de fonctionnalités traitants les tableaux.
Avec ces moyens mis à notre disposition et avec un peu d'imagination, on peut retravailler le code XML du gadget Label et automatiser une liste à plusieurs niveaux.
Mais au final, cela restera du bricolage, tant parce qu'il faut définir explicitement dans le code, tous les libellés qu'il faut associer.

Dans ce développement, nous allons créer 3 catégories, contenant chacune 2-3 sous catégories, afin d'obtenir ce résultat :

• Mes vidéos
  • Films
  • Séries
  • Clips
• Mes photos
  • Vacances
  • Travail
• Mes recettes
  • Chocolat
  • Frites

En pratique, la catégorie "Mes vidéos" mènera dans le répertoire contenant les posts ayants ce libellé, et la sous-catégorie "Films" mènera dans le répertoire contenant les posts ayants ce libellé et le libellé "Mes vidéos".

Pour que l'ensemble travaille correctement, vous devrez également faire en sorte que les posts contiennent ces libellés.
Par exemple, mon article "Faire la crêpe à la plage" doit contenir les libellés "Mes recettes" et "Chocolat"...

Découpage du gadget

Pour commencer, rendez-vous dans l'éditeur XML de votre modèle et ajoutez le code de ce nouveau widget après une balise <b:section...>.

<b:widget id='Label301' locked='false' title='Libellés' type='Label'>
  <b:includable id='main'>

  </b:includable>
  <b:includable id='cloud'>

  </b:includable>
  <b:includable id='list'>

  </b:includable>
  <b:includable id='subListSwitch'>

  </b:includable>
  <b:includable id='subList'>

  </b:includable>
</b:widget>

Vous constatez que ce gadget contient plusieurs inclusions vides. Ne paniquez pas. Nous allons les remplir étape par étape.

L'inclusion "main"

Dans l'inclusion principale, nous organisons les éléments de base : Un titre, un sélecteur qui mène vers les inclusions "cloud" ou "list", et la petite clef administrateur.
Copiez le code tel quel.

  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
      <b:include expr:name='data:display'/>
      <b:include name='quickedit'/>
    </div>
  </b:includable>

L'inclusion "cloud"

Dans cette inclusion, nous allons simplement ajouter le code des libellés organisés "en nuage". Ainsi, vous aurez toujours cette option sous la main.
Copiez le code tel quel.

  <b:includable id='cloud'>
    <b:loop values='data:labels' var='label'>
      <span expr:class='"label-size label-size-" + data:label.cssSize'>
        <b:if cond='data:view.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
        </b:if>
        <b:if cond='data:showFreqNumbers'>
          <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
        </b:if>
      </span>
    </b:loop>
  </b:includable>

L'inclusion "list"

C'est à partir de cette étape que nous allons commencer réellement à travailler.
L'inclusion affiche la liste des libellés du premier niveau.
Dans la première balise <b:with>, vous remplacez le contenu du tableau par vos propres libellés.

  <b:includable id='list'>
    <b:with value='["Mes vidéos","Mes photos","Mes recettes"]' var='mainList'>
      <ul>
        <b:loop values='data:labels where (l => l.name in data:mainList)' var='label'>
          <li>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
            <b:if cond='data:showFreqNumbers'>
              <span dir='ltr'>(<data:label.count/>)</span>
            </b:if>
            <b:include name='subListSwitch'/>
          </li>
        </b:loop>
      </ul>
    </b:with>
  </b:includable>

L'inclusion "subListSwitch"

Dans cette inclusion, nous créons un cas pour chaque libellé du premier niveau. Dans chaque cas, vous associez les libellés enfants.

  <b:includable id='subListSwitch'>
    <b:switch var='data:label.name'>

      <b:case value='Mes vidéos'/>
        <b:with value='["Films","Séries","Clips"]' var='subList'>
          <b:include name='subList'/>
        </b:with>

      <b:case value='Mes photos'/>
        <b:with value='["Vacances","Travail"]' var='subList'>
          <b:include name='subList'/>
        </b:with>

      <b:case value='Mes recettes'/>
        <b:with value='["Chocolat","Frites"]' var='subList'>
          <b:include name='subList'/>
        </b:with>

    </b:switch>
  </b:includable>

L'inclusion "subList"

Et enfin, la dernière inclusion reconstitue les liens des sous-catégories. Ces liens contiendront le libellé parent + le libellé de la sous-catégorie.

  <b:includable id='subList'>
    <ul>
      <b:loop values='data:labels where (l => l.name in data:subList)' var='subCategory'>
        <li>
          <a expr:dir='data:blog.languageDirection' expr:href='data:blog.searchUrl + "/label/" + data:label.name.escaped + "%2B" + data:subCategory.name.escaped'><data:subCategory.name/></a>
        </li>
      </b:loop>
    </ul>
  </b:includable>

Et voilà, vous venez d'écrire votre tout premier gadget. Félicitation !

Autres tutos

• Peut-on trier les tableaux de nombres ?
• Comment contourner le changement automatique du type d'une donnée dans une opération XML Blogger ?
• Modifier le menu des boutons de partage
• Ajouter des boutons au menu de partage
• Une pagination automatique avec le gadget Pages
• Favicons multi-sets : icon, apple-touch-icon et msapplication
• Masquer des éléments des thèmes dynamiques
• Créer des sous-catégories dans le gadget Libellés
• Une pagination automatique avec le gadget Libellés
• Filtrer les libellés dans les articles
• Créer un sélecteur d'articles
• Ajouter son blog au module de recherche Firefox
• inReplyTo : Développer un module de commentaires avec réponses