ThéorieFonctionnalitésAvancé

Appliquer des conditions d'affichage aux gadgets


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Appliquer des conditions d'affichage aux gadgets
Énoncé du problème : Je veux que mon gadget s'affiche à la fois sur la page d'accueil et sur les pages de recherche,
Ou encore, sur une page d'un article particulier et sur les pages des libellés.
Certes, il existe des solutions publiées sur le web, mais répondent-elles réellement à ces critères ?
La méthode décrite dans cette publication n'est pas nouvelle mais reste inédite pour ce sujet. Elle vous ouvre la voie vers une multitude de combinaisons que vous n'auriez jamais pu soupçonner jusqu'à présent... Suivez le guide...

Étape 1 : Installer un gadget

Pour les besoins de l'exemple, nous allons utiliser le gadget "Texte". Vous pouvez installer celui-là ou un autre. La méthode est valable pour tous les gadgets.

  • Tableau de bord
  • Mise en page
  • Ajouter un gadget
  • Général
  • Gadget Texte

Lorsque le gadget est installé sur votre blog, rendez-vous dans l'éditeur HTML du modèle et retrouvez le code du gadget :

  • Tableau de bord
  • Modèle
  • Modifier le code HTML
  • Accéder au widget "Text1"


Étape 2 : Préparer le code HTML du gadget

Le code du gadget doit ressembler à quelque chose de ce genre :

<b:widget id='Text1' locked='false' title='TITRE_GADGET' type='Text'>
  <b:includable id='main'></b:includable>
</b:widget>

Renommez l'identifiant de l'inclusion main. Donnez-lui le nom content.

<b:widget id='Text1' locked='false' title='TITRE_GADGET' type='Text'>
  <b:includable id='content'></b:includable>
</b:widget>

L'inclusion main étant requise et comme elle n'existe plus, il faut la recréer à nouveau.

<b:widget id='Text1' locked='false' title='TITRE_GADGET' type='Text'>
<b:includable id='main'> </b:includable>
<b:includable id='content'></b:includable> </b:widget>

C'est dans la nouvelle inclusion main que nous allons fixer les conditions d'affichage.

<b:widget id='Text1' locked='false' title='TITRE_GADGET' type='Text'>
<b:includable id='main'> <!-- Les conditions seront ajoutées ici --> </b:includable>
<b:includable id='content'></b:includable> </b:widget>

Vous pouvez enregistrer vos modifications. A ce stade, le gadget ne devrait plus apparaître sur le blog. Donc, ne paniquez pas...


Étape 3 : Créer les conditions

La dernière étape consiste a créer des conditions à l'aide de l'expression cond=''.
Je vous conseille d'abord de prendre connaissance de ces 2 publications :

Pour appeler l'inclusion content (C'est la nouvelle inclusion qui contient l'essentiel du code du gadget), vous devez mentionner la balise <b:include name='content'/> dans l'inclusion main.

Mentionné comme ceci, le gadget s'affichera sur toutes les pages.

<b:widget id='Text1' locked='false' title='TITRE_GADGET' type='Text'>
<b:includable id='main'> <b:include name='content'/> </b:includable>
<b:includable id='content'></b:includable> </b:widget>

Pour fixer une condition, utilisez l'expression cond='' dans la balise b:include ou dans une paire de balises b:if :

Dans la balise b:include
<b:widget id='Text1' locked='false' title='TITRE_GADGET' type='Text'>
<b:includable id='main'> <b:include cond='CONDITION' name='content'/> </b:includable>
<b:includable id='content'></b:includable> </b:widget>

Avec les balises b:if
<b:widget id='Text1' locked='false' title='TITRE_GADGET' type='Text'>
<b:includable id='main'> <b:if cond='CONDITION'> <b:include name='content'/> </b:if> </b:includable>
<b:includable id='content'></b:includable> </b:widget>

Avec les balises b:if / b:else
<b:widget id='Text1' locked='false' title='TITRE_GADGET' type='Text'>
  <b:includable id='main'>
    <b:if cond='CONDITION'>
      <b:include name='content'/>
<b:else/> <style> #<data:widget.instanceId/> { margin: 0; padding: 0; border-width: 0; box-shadow: 0 0 0; } </style>
</b:if> </b:includable> <b:includable id='content'></b:includable> </b:widget>
La balise b:else permet de proposer une alternative.
Sur certains modèles, lorsque le contenu n'a pas été autorisé à s'afficher, des marges, un rembourrage, des bordures, ou encore des ombres de portées peuvent subsister.
Pour gommer ces éléments, il suffit d'ajouter un contre-CSS avec b:else.


Quelles sont les conditions que l'on peut employer ?
Il existe autant de conditions qu'il y a de données, de valeurs et de signes opérateurs. C'est-à-dire, un nombre très très très très très élevé de combinaisons. En voici une liste microscopique :

Uniquement à la page d'accueil
<b:include cond='data:blog.url == data:blog.homepageUrl' name='content'/>

Uniquement dans les index
<b:include cond='data:blog.pageType == "index"' name='content'/>

Uniquement dans les archives
<b:include cond='data:blog.pageType == "archive"' name='content'/>

Uniquement dans les pages autonomes
<b:include cond='data:blog.pageId' name='content'/>

Uniquement dans les pages des articles
<b:include cond='data:blog.postId' name='content'/>

Uniquement dans les pages des libellés
<b:include cond='data:blog.searchLabel' name='content'/>

Uniquement dans les pages des résultats de recherche
<b:include cond='data:blog.searchQuery' name='content'/>

Uniquement dans les pages 404
<b:include cond='data:blog.pageType == "error_page"' name='content'/>

Uniquement sur la page d'un article déterminé
<b:include cond='data:blog.postId == "ID_ARTICLE"' name='content'/>

Uniquement sur une page autonome déterminée
<b:include cond='data:blog.pageId == "ID_PAGE"' name='content'/>

Conditions combinées - Exemple 1
<b:include cond='data:blog.pageType in ["item","archive"]' name='content'/>
Uniquement dans les pages des articles et les archives

Conditions combinées - Exemple 2
<b:include cond='data:blog.pageType == "index" or data:blog.postId == "ID_ARTICLE"' name='content'/>
Dans les pages des index ou dans une page d'un article déterminé


Astuce pour les développeurs

Cette méthode de gestion des inclusions ouvre la porte à de nombreuses possibilités.
Par exemple, vous pouvez créer diverses versions d'un gadget et les inclure dans plusieurs inclusions que vous pouvez appeler en fixant certaines conditions.

<b:widget id='Text1' locked='false' title='TITRE_GADGET' type='Text'>
<b:includable id='main'> <b:include cond='data:blog.url == data:blog.homepageUrl' name='contentA'/> <b:include cond='data:blog.pageType == "item"' name='contentB'/> </b:includable>
<b:includable id='contentA'> <!-- Code du gadget version 1 --> </b:includable>
<b:includable id='contentB'> <!-- Code du gadget version 2 --> </b:includable>
</b:widget>

L'inclusion contentA s'affichera uniquement à la page d'accueil, tandis que l'inclusion contentB s'affichera uniquement dans les pages des articles.
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsMulti-versions
Facebook : Bouton J'aime [Like button]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
ThéorieRéférences XMLTypes des variables d'habillage
Variables d'habillage - Les arrière-plans [background]
Populaire