Balises de widget pour les mises en page

Balises de widget pour les mises en page

 

Lorsque vous utilisez le modèle de mise en page pour créer le corps de votre blog, servez-vous des widgets pour ajouter des éléments à la page, comme des images et un blogroll.

Types de balise

Cette section décrit le code HTML à employer dans les balises de fermeture.

Balises d'exclusion

Dans quels cas utiliser les balises d'inclusion

Les balises d'inclusion s'avèrent particulièrement utiles si vous souhaitez réutiliser une section de code à plusieurs endroits ou, au contraire, l'inclure dans certaines conditions uniquement.
Pour ce faire, rédigez le contenu dans une balise b:includable, puis utilisez la balise b:include aux endroits où ce contenu doit apparaître.

Format

<b:includable id='main' var='thiswidget'>
  [insérez ici le contenu souhaité]
</b:includable>

Attributs

• id : (obligatoire) identifiant unique composé de lettres et de chiffres. Chaque widget doit comporter une section "includable" avec le code id='main'.
• var : (facultatif) identifiant composé de lettres et de chiffres, servant à référencer les données au sein de cette section.

Si vous créez plusieurs sections "includable" avec différents identifiants, elles ne s'afficheront pas automatiquement. En revanche, si vous créez une section "includable" avec le code id='new', vous pouvez ensuite y faire référence dans la section "includable" principale avec le code <b:include name='new' />, afin qu'elle s'affiche.
Voici les attributs de la balise "b:include" :

• name : (obligatoire) identifiant composé de lettres et de chiffres. Ce nom doit correspondre à l'identifiant d'une section b:includable dans le même widget.
• data : (facultatif) expression ou élément de données à transmettre dans la section "includable". Ces données deviennent la valeur de l'attribut "var" dans la section "includable".
• cond : (facultatif) expression qui conditionne l'exécution de la balise "include" uniquement si son résultat est vrai. Cet attribut équivaut à l'attribut "cond" de la balise "b:if".

Exemple

Voici un exemple d'utilisation des balises b:includable et b:include.
Il est important de noter avant tout la façon dont la section "main" inclut la section "post". Elle transmet un article de blog qu'elle appelle "p" et la section incluse y fait référence comme étant sa variable "post", puis elle imprime le titre.
Notez que la section "include" ne s'exécute que si la valeur d'index est inférieure à 10. Par conséquent, 10 articles maximum seraient affichés dans cet exemple (l'index commence à 0).

<b:includable id='main'>
  <b:loop var='p' index='index' values='posts'>
    <b:include name='post' data='p' cond='index < 10'/>
  </b:loop>
</b:includable>
<b:includable id='post' var='post'>
  Title: <data:post.title/>
</b:includable>

 Données de sortie (balise, "data:")

Exemples

• La balise <data:title/> imprime le titre du widget.
  
• La balise <data:photo.url/> - Size: <data.photo.width /> x <data.photo.height /> imprime les attributs d'impression d'un composant de la balise "photo". Une photo peut avoir plusieurs composants tels que "url", "height" et "width". Le point "." permet d'indiquer que l'URL recherchée est celle de la photo.
  

Autres exemples

Consultez la liste complète des balises de données de mise en page disponibles. 

 Boucles ( Balise "b:loop")

Dans quels cas utiliser la balise "b:loop"

La balise b:loop vous permet de répéter plusieurs fois une section de contenu. Elle est principalement utilisée pour imprimer chaque article de blog d'une liste d'articles sur une page donnée ou chaque commentaire, chaque libellé, etc.

Format

Le format général d'utilisation d'une boucle est le suivant :

<b:loop var='identifier' values='set-of-data'>
  [le contenu répété figure ici]
</b:loop>

Vous pouvez choisir le nom voulu pour la partie 'identifier' (i). Il est alors utilisé au début de chaque nouvel élément de la liste, à chaque apparition dans la boucle. Le jeu de données spécifié pour les valeurs peut être toute partie des données décrites comme étant une liste d'éléments dans l'article sur les balises de données.
Ainsi, dans le widget des articles de blog, posts est une liste. La présence d'un code (comme celui qui suit) passe en boucle sur chaque article et imprime le titre de chacun d'eux, avec les balises d'en-tête.

<b:loop var='i' values='data:posts'>
  <h2><data:i.title/></h2>
</b:loop>

Notez la façon dont le "i" prend successivement la valeur de chaque article de sorte que vous pouvez obtenir le titre de chacun d'eux.

Plage de chiffres

Une balise de boucle vous permet de passer plusieurs fois sur une plage de chiffres (inclus), comme "1 to 3" ou "-3 to -9", la valeur de la variable prenant la valeur du chiffre. L'exemple ci-dessous crée une liste non triée des chiffres 1, 2 et 3.

<b:loop var='i' values='1 to 3'>
  <li><data:i /></li>
</b:loop>

 

Attribut "index"

Les balises de boucle ont également l'attribut facultatif "index" qui donne l'index, commençant par zéro, du passage actuel dans la boucle.

<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>Index: <data:index />, Number: <data:number /></li>
  </b:loop>
</ul>

Cet exemple crée la liste non triée suivante :

• Index: 0, Number: 9
• Index: 1, Number: 8
• Index: 2, Number: 7 

Balises "if" , "elseif" et "else"

Dans quels cas utiliser les balises "if", "elseif" et "else"

Utilisez les balises b:if, b:elseif et b:else pour afficher un contenu différent selon le contexte. Il se peut, par exemple, que vous souhaitiez afficher un certain texte sur la page d'accueil uniquement, et un autre texte sur les pages des différents articles.

Format

<b:if cond='condition'>
  [contenu à afficher si la condition est vraie]
<b:elseif cond='autre condition'>
  [contenu à afficher si aucune condition if ou elseif n'est encore vraie]
<b:else/>
  [contenu à afficher si aucune condition if ou elseif n'est remplie]
</b:if>

Les balises b:elseif et b:else sont facultatives. Sans elles, le contenu peut être soit le contenu répertorié dans la section "b:if", soit rien. Toutefois, la balise de fermeture </b:if> est obligatoire dans chaque cas.
La "condition" peut être une action ou un élément vrai ou faux. Certaines balises (comme la balise allowComments d'un article de blog) constituent en elles-mêmes des valeurs de type vrai/faux. Comparez les autres données à des valeurs spécifiques pour obtenir une valeur vraie ou fausse. Voici quelques exemples :

• <b:if cond='data:post.showBacklinks'>
  Vraie si l'article actuel est paramétré pour afficher les liens backlink.
• <b:if cond='data:blog.pageType == "item"'>
  Vraie si la page actuelle est une page de type "item" (page d'un article de blog).
• <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
  Vraie si la page actuelle est une page de type "item" (page d'un article de blog) et que l'article actuel est paramétré pour afficher les liens backlink.
• <b:if cond='data:displayname != "Fred"'>
  Vraie si "Fred" n'est pas le nom qui s'affiche.
• <b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
  Vraie si "Fred" est le nom qui s'affiche ou que la page actuelle est une page statique (et non la page d'un article de blog).
• <b:if cond='data:post.numComments > 1'>
  Vraie si l'article de blog actuel est associé à plusieurs commentaires.
• <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
  Vraie si la page actuelle correspond à un article de blog spécifique ou à une page.

Attribut d'expression ("expr:")

Dans quels cas utiliser l'attribut d'expression

Utilisez l'attribut "expr" pour définir les valeurs des attributs en fonction des valeurs du dictionnaire de
 données.

Exemples

• <a expr:href='data:blog.homepageUrl'>Home</a>
  Lien "Home" contenant l'URL de la page d'accueil du blog.
• <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>RSS d'articles</a>
  Lien contenant l'URL du flux RSS des articles du blog. L'opérateur "+" permet de concaténer les deux chaînes.
• <a expr:class='data:post.allowComments ? "comment" : "no-comment">Comment</a>
  Lien contenant la classe "comment" lorsque les commentaires sont autorisés et "no-comment" lorsqu'ils sont interdits. L'opérateur ternaire (?:) prend la valeur booléenne donnée et sélectionne la première valeur (après le point d'interrogation "?") si la valeur booléenne est vraie, ou la seconde (après les deux-points ":") si la valeur booléenne est fausse.

Afficher un exemple

Cliquez ici pour afficher un exemple de l'utilisation de ces balises dans le code HTML d'un widget PageList dans votre blog.

 Exemple 

Ce widget utilise les balises "b:widget", "b:includable" (et "b:include"), "b:if" (et "b:else") et "b:loop".

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:mobile'>
        <select expr:id='data:widget.instanceId + "_select"'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' 

   selected='selected'><data:link.title/></option>
          <b:else/>
    <option expr:value='data:link.href'><data:link.title/></option> 
          </b:if>
        </b:loop>
        </select>
        <span class='pagelist-arrow'>&amp;#9660;</span>
      <b:else/>
        <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          <b:else/>
            <li>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          </b:if>
        </b:loop>
        </ul>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>