Lorsque vous utilisez le thème 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'inclusion (b:include)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:includabledans 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>
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.
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
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='another condition'/> [contenu à afficher si aucune condition "if" ou "elseif" précédente n'est vraie et que cette condition "elseif" est 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.
Dans quels cas utiliser une balise de changement
Utilisez la balise b:switch comme vous utiliseriez une balise b:if comportant plusieurs balises b:elseif. Elle présente l'intérêt de vous éviter d'avoir à répéter le nom de la variable. Ces balises sont faciles à lire pour savoir ce qui définit chaque valeur "case" et identifier la valeur "case" par défaut.
Format
<b:switch var='[Expression de données]'>
<b:case value="[Valeur 1]" />
[Sortie si l'évaluation de la variable est égale à la valeur 1]
<b:case value="[Valeur 2]" />
[Sortie si l'évaluation de la variable est égale à la valeur 2]
[… toute autre valeur]
<b:default />
[Sortie si l'évaluation de la variable est différente des autres valeurs "b:case" indiquées]
</b:switch>
Exemple
Cet exemple montre comment générer un autre en-tête de sortie, selon le type de page affiché.
<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
<h1>Page</h1>
<b:case value="item" />
<h1>Article</h1>
<b:default />
<h2>Articles de blog</h2>
</b:switch>
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.
Dans quels cas utiliser une évaluation d'expression
Utilisez la balise b:eval pour évaluer une expression plus complexe qu'une balise de données standard.
Format
<b:eval expr='[Expression]' />
Exemples
- min-height:
<b:eval expr="data:newWidth * data:height / data:width" />px;
Permet de générer une hauteur calculée relative, d'après la nouvelle valeur de largeur. <b:eval expr="data:post.labels[0].url" />
Permet de générer l'URL du libellé du premier article.<b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
Permet de générer la condition "Comment" lorsqu'il est possible d'insérer des commentaires et "Comments Disabled" lorsque cette action est interdite. Sachez que cette expression emploie l'opérateur ternaire.
Dans quels cas utiliser un alias de variable
Utilisez la balise b:with pour stocker temporairement la valeur d'une expression calculée et éviter ainsi les expressions intégrées compliquées.
Format
<b:with var='myComputedValue' value='[Expression de données]' />
Exemples
Dans le cas d'un attribut de style compliqué basé sur des variables de données, vous avez la possibilité de le calculer avant le reste du code HTML de sortie, car le code HTML imbriqué est plus simple à lire.
<b:with var='style'
value='"background-image: url(\"" + data:sourceUrl "\"); "
+ " width: " + data:width + "px; " '>
<div id='header-outer'>
<div id='header-inner' expr:style='data:style'>
<h1>Mon en-tête</h1>
</div>
</div>
</b:with>Cette variable n'existe que pour les noeuds enfant de la balise
b:with.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.
ExempleCe 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'><selectexpr:id='data:widget.instanceId + "_select"'><b:loop values='data:links' var='link'> <b:if cond='data:link.isCurrentPage'><optionexpr:value='data:link.href'selected='selected'><data:link.title/></option><b:else/><optionexpr:value='data:link.href'><data:link.title/></option></b:if> </b:loop></select> <span class='pagelist-arrow'>&#9660;</span><b:else/><ul><b:loop values='data:links' var='link'> <b:if cond='data:link.isCurrentPage'><li class='selected'> <aexpr:href='data:link.href'><data:link.title/></a> </li> <b:else/> <li> <aexpr: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>