Créer un sélecteur d'articles

Rien qu'avec des notions de base en HTML et CSS et surtout grâce à une bonne maîtrise du langage Blogger, il est possible de construire une ossature qui s'adapte en fonction des conditions fixées dans un sélecteur.
Un sélecteur permet de regrouper et de trier le contenu des données de type LISTE.
Pour plus de facilité, ce tutoriel se limitera aux boucles des articles dans le code HTML du gadget Blog. Ce principe de construction reste valable pour toutes les données de type LISTE dans n'importe quel gadget qui en contient.

Principe

Pour pouvoir construire un sélecteur, il faut maîtriser les langages HTML et CSS.
Vous devez également connaître les bases du langage Blogger et les principales caractéristiques techniques d'un blog.

Le principe est de créer une série d'inclusions qui afficheront les articles dans un certain ordre établi.
Une inclusion principale se chargera d'orienter vers les inclusions des articles selon les conditions fixées.

Ainsi, en regroupant les articles, vous avez la possibilité d'attribuer des caractéristiques spécifiques à chaque groupe d'articles, comme par exemple la disposition dans les pages index et les pages archive.
Vous pouvez imaginer une disposition des articles comme pour certains modèles dynamiques : La disposition magazine ou la disposition timeslide, ou encore, inverser le sens de lecture de la boucle, filtrer les articles avec des critères strictes, etc... Avec la méthode expliquée ci-dessous, vous constaterez bien vite que les possibilités sont beaucoup plus nombreuses que le pack de base fourni par défaut.

Lorsque le code HTML sera rédigé, il ne restera plus qu'a utiliser les CSS pour mettre en forme chaque groupe.

Si vous vous sentez prêt pour ce genre de développement, passons vite à la pratique avec un exercice.

Créer des inclusions d'articles

Pour cette mise en œuvre, nous nous limiterons uniquement au code HTML du gadget Blog.
Pour des raisons de facilité, on va réemployer l'inclusion post que l'on utilisera pour les pages item et static_page.
Pour les autres types de pages, nous allons créer une nouvelle inclusion que l'on va nommer post-index. A l'intérieur, nous y glisserons quelques éléments: le titre, le résumé, et la date. Libre à vous d'en ajouter plus, voire même de créer plusieurs inclusions similaires.

L'inclusion post-index

<b:includable id='post-index' var='post'>
  <div class='post-index'>
    <!-- LE TITRE -->
    <h3 class='post-index-title'>
      <a expr:href='data:post.url'><data:post.title/></a>
    </h3>
    <!-- LE RÉSUMÉ -->
    <div class='post-index-snippet'><data:post.snippet/></div>
    <!-- LA DATE -->
    <div class='post-index-timestamp'><data:post.timestamp/></div>
  </div>
</b:includable>

Pour créer une nouvelle inclusion dans le gadget Blog, il suffit de l'ajouter juste après la balise d'ouverture du gadget :

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'>
  <!-- AJOUTER UNE NOUVELLE INCLUSION ICI -->

Jusqu'à présent, tout va bien. Nous avons 2 inclusions d'articles (post et post-index) qui ne demandent plus qu'a être raccordées. Comme elles ne le sont pas, vous ne verrez pas apparaître les modifications dans votre blog BROUILLON.

Si vous avez survécu à la première étape, nous passerons sans tarder à la suivante : La création d'un sélecteur.

Créer un sélecteur

Nous allons créer le sélecteur dans une nouvelle inclusion, qui, elle aussi, devra être raccordée un peu plus tard. Pour l'instant, on va l'écrire, fixer les règles et la baptiser post-picker.

On va diviser le sélecteur en 2 parties bien distinctes :

• La première partie appellera l'inclusion post si la page courante est de type item (les pages des articles) ou static_page (les pages autonomes).
• La seconde partie appellera l'inclusion post-index si la page courante est de type index ou archive. Cette deuxième partie contiendra également de multiples conditions afin de créer des groupes d'articles.

Dans la seconde partie, on créera 4 groupes d'articles :

• Le premier groupe contiendra l'article n°1.
• Le deuxième groupe contiendra les articles 2, 4 et 6.
• Le troisième groupe contiendra les articles 3, 5 et 7.
• Le dernier groupe contiendra les articles au-delà du 7.

Pour tout mettre en œuvre, on emploiera la donnée data:posts dans des boucles b:loop et le paramètre index.
L'étiquette numPosts (nombre d'articles dans la page courante) sera également mise à contribution.
L'ensemble sera orchestré par une série d'expressions cond='condition'.

L'inclusion post-picker

<b:includable id='post-picker'>

  <!-- PARTIE 1 : PAGES AUTONOMES ET ITEMS-->
  <b:if cond='data:blog.postId or data:blog.pageId'>
    <b:loop values='data:posts' var='post'>
      <div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:include data='post' name='comment_picker'/>
      </div>
    </b:loop>
  </b:if>

  <!-- PARTIE 2 : PAGES INDEX ET ARCHIVES -->
  <b:if cond='data:blog.pageType in ["index", "archive"]'>
    <!-- CRÉATION GROUPE 1 -->
    <b:if cond='data:posts.size gte 1'>
      <div class='post-group-1'>
        <!-- SÉLECTION DE L'ARTICLE 1 -->
        <b:loop index='compteurPost' values='data:posts' var='post'>
          <b:include cond='data:compteurPost == 0' data='post' name='post-index'/>
        </b:loop>
      </div>
    </b:if>
    <!-- CRÉATION GROUPE 2 -->
    <b:if cond='data:posts.size gte 2'>
      <div class='post-group-2'>
        <!-- SÉLECTION DES ARTICLES 2, 4 et 6 -->
        <b:loop index='compteurPost' values='data:posts' var='post'>
          <b:include cond='data:compteurPost in [1, 3, 5]' data='post' name='post-index'/>
        </b:loop>
      </div>
    </b:if>
    <!-- CRÉATION GROUPE 3 -->
    <b:if cond='data:posts.size gte 3'>
      <div class='post-group-3'>
        <!-- SÉLECTION DES ARTICLES 3, 5 et 7 -->
        <b:loop index='compteurPost' values='data:posts' var='post'>
          <b:include cond='data:compteurPost in [2, 4, 6]' data='post' name='post-index'/>
        </b:loop>
      </div>
    </b:if>
    <!-- CRÉATION GROUPE 4 -->
    <b:if cond='data:posts.size gte 7'>
      <div class='post-group-4'>
        <!-- SÉLECTION DES ARTICLES SUPÉRIEURS A 7 -->
        <b:loop index='compteurPost' values='data:posts' var='post'>
          <b:include cond='data:compteurPost gte 7' data='post' name='post-index'/>
        </b:loop>
      </div>
    </b:if>
  </b:if>
</b:includable>

Note : La donnée data:compteurPost commence à compter les articles à partir de 0.

• Article 1 : data:compteurPost = 0
• Article 2 : data:compteurPost = 1
• Article 3 : data:compteurPost = 2
• Article 4 : data:compteurPost = 3
• etc

Raccorder le sélecteur au reste du gadget

On va effectuer le raccordement à la racine du gadget, dans l'inclusion main.
Effacez tout ce qui se trouve à partir de <data:defaultAdStart/> jusqu'à <data:adEnd/> inclus.

Remplacez par

<b:include name='post-picker'/>

Après enregistrement, les articles dans les pages index et archive apparaîtront dans cet ordre :

• Groupe 1
  • Article 1
• Groupe 2
  • Article 2
  • Article 4
  • Article 6
• Groupe 3
  • Article 3
  • Article 5
  • Article 7
• Groupe 4
  • Article 8
  • Article 9
  • Article 10
  • etc

Il ne reste plus qu'a appliquer des CSS différents à chaque groupe d'articles pour mettre l'ensemble en forme.

Mettre en forme

Pour mettre en forme, nous allons utiliser les classes CSS des groupes d'articles qui ont été créés dans la nouvelle inclusion post-picker.

• Groupe 1 : post-group-1
• Groupe 2 : post-group-2
• Groupe 3 : post-group-3
• Groupe 4 : post-group-4

On va faire en sorte que les groupes 1 et 4 occupent toute la largeur.
Les groupes 2 et 3 occuperont une demi-colonne. L'un sera placé à gauche, l'autre à droite.

Fichier CSS

.post-group-1, .post-group-4 {

  display: block;

  width: 100%;

}



.post-group-2, .post-group-3 {

  vertical-align: top;

  display: inline-block;

  width: 48%;

}

Le fichier CSS se place dans l'éditeur de modèles :

• Tableau de bord
• Modèle
• Personnaliser
• Avancé
• Ajouter fichier CSS

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