Utiliser les balises de données

Lorsqu'on personnalise son modèle Blogger, ou qu'on utilise un modèle tiers, arrive toujours le moment où il est nécessaire d'apporter quelques retouches. Plutôt que d'aller faire des modifications "en dur" dans le code HTML du modèle, il est préférable d'utiliser dans la mesure du possible les balises de données mises à disposition par Blogger.
Cette page a pour vocation de compléter la page officielle relative aux balises de données. Elle sera mise à jour progressivement, 

Données générales du blog

Ces données sont accessibles sous la forme <data:blog.xxx/>, où,xxx prend une des valeurs ci-dessous.

title : titre du blog, défini dans Paramètres > Basiques.

Exemple, pour ajouter un copyright automatique en pied de page :

Copyright 2014 <data:blog.title/>

pageType : type de la page courante, selon la classification suivante

• item : page web unique d'un article
• static_page : page statique (menu Pages de Blogger)
• archive : page d'archives (contenant _archive.html dans l'URL)
• index : page listant les articles, comme la page d'accueil ou une page de résultat de recherche 

Exemple, pour afficher un élément uniquement sur les pages articles :

<b:if cond='data:blog.pageType == "item"'>
/* Elément à afficher */
</b:if>

pageTitle : titre de la page courante, généré automatiquement par Blogger et intégrant le titre du blog et des informations complémentaires, comme le titre d'un article. Généralement utilisé par défaut dans les modèles Blogger, il est préférable d'utiliser pageName pour optimiser le référencement des pages.

Exemple, pour définir le titre des pages du blog :

<title>data:blog.pageTitle/></title>

url : adresse URL de la page courante.

Exemple, pour n'afficher un élément que sur la page d'accueil :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
/* Elément à afficher *
</b:if>

homepageUrl : Adresse URL de la page d'accueil du blog.
(voir exemple précédent)

Données des widgets HTML/Javascript

Ces données sont accessibles sous la forme <data:xxx/> dans une section b:widget  où,xxx prend une des valeurs ci-dessous.

title : titre du widget

content : contenu du widget.

Exemple : Par défaut, Blogger définit le code d'un widget en affichant titre et contenu.

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'> </h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>

Il peut être utile de donner un titre à ses widgets pour les reconnaître facilement dans la mise en page de son modèle, sans vouloir afficher le titre du widget sur son blog. Dans ce cas, il suffira simplement de changer le code généré en :

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>

Ainsi, dans tous les cas, seul le contenu du widget sera affiché.

Données liées aux articles du blog

Données générales

top.showAuthor : indique si le widget affiche l'auteur de l'article, tel que paramétré dan la fenêtre de configuration du widget  (<data:top.showAuthor/>)

authorLabel : libellé "Publié par" paramétré dans la fenêtre de configuration du widget Options de la page d'articles (<data:authorLabel/>)

top.timestampLabel: libellé préfixant l'heure de publication, tel que paramétré dan la fenêtre de configuration du widget (<data:top.timestampLabel/>)

top.postLabelsLabel: libellé présentant les tags associés à l'articles (<data:top.postLabelsLabel/>)

top.sharePostUrl : Indique si les boutons de partage sur les réseaux sociaux sont affichés (<data:top.sharePostUrl/>)

top.reactionsLabel : libellé présentant les réactions à l'article (<data:top.reactionsLabel/>)

top.showLocation : Indique si les données de géolocalisation de l'article sont affichées (<data:top.showLocation/>)
postLocationLabel : libellé de géolocalisation des articles (<data:postLocationLabel/>)

Classe posts

Les articles du blog sont parcourus au sein d'une boucle b:loop

<b:loop values='data:posts' var='post'>

Chaque article est alors référencé dans la boucle par la variable post, donnant ainsi accès aux données ci-dessous, par <data:post.xxx/>

id : l'identifiant de l'article (<data:post.id/>)

title : titre de l'article (<data:post.title/>)

url : permalien (URL unique et fixe) de l'article (<data:post.url/>)

link : lien hypertexte intégrant titre de l'article et permalien (<data:post.link/>)

body : contenu l'article (<data:post.body/>)

isFirstPost : indique si l'article est le premier de la liste d'articles d'une page index (home ou recherche)
Exemple : pour afficher un élément uniquement pour le premier article d'une page :

<b:if cond='data:post.isFirstPost'>
 /* Elément à afficher */
</b:if>

isDateStart : par défaut Blogger regroupe les articles par date de publication. Ce flag indique si la date du post considéré est une nouvelle date (ie. date du premier post, ou date différente du post précédent).
Exemple : pour afficher un séparateur avant chaque date de publication :

<b:if cond='data:post.isDateStart'>
 /* Séaparateur */
</b:if>

dateHeader : date de l'article, uniquement pour le premier article de chaque date

firstImageUrl : URL de la première image de l'article. Peut être utilisé pour générer des vignettes notamment.
Exemple : pour afficher la première image d'un article

<img expr:src ="data:post.firstImageUrl" expr:alt="data:post.title"/>

hasJumpLink : indique si l'article contient une balise more (lien de type Lire la suite).
jumpText : libellé paramétré dans la fenêtre de configuration du widget (Texte du lien de la page d'articles)

Exemple classique pour afficher un lien "Lire la suite" pour les articles en intégrant un :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

author : nom de l'auteur
authorProfileUrl : lien URL vers la page profil de l'auteur de l'article

showTimestamp : indique si l'heure de publication doit être affichée

allowComments : indique si la publication de commentaires est autorisée sur l'article

showBacklinks : indique si les backlinks sont affichés
data:post.backlinksLabel : libellé indiquant les backlinks

editUrl : si le widget affiche le lien d'édition rapide, cette donnée contient l'URL d'édition de l'article

emailPostUrl : si le widget affiche les liens d'envoi par e-mail, cette donnée contient l'URL d'envoi

labels : contient tout les tags associés à l'article.