La balise de gadget / The gadget tag : <b:widget>
La balise Blogger <b:widget> est un élément de mise en page, qui ne peut être contenu que dans une balise <b:section>.
Cette balise renferme le code xml du gadget.
Table des matières
La Syntaxe
<b:widget cond='true' id='Header1' locked='false' title='Blogger Code (Header)' type='Header'>
</b:widget>
La balise
<b:widget>est insérée à l'intérieur d'une balise<b:section>, représentant un gadget particulier dans une section spécifique du blog.Elle peut contenir des balises
<b:includable>et<b:widget-settings>afin de définir les parties modulaires et les paramètres de configuration du widget.Les balises
<b:widget>ne doivent jamais être imbriquées les unes dans les autres.
Les Attributs
La balise <b:widget> accepte plusieurs attributs permettant de définir son comportement, dont certains sont requis, tandis que d'autres sont facultatifs.
<b:widget id='WIDGET_ID'
cond='TRUE|FALSE'
locked='TRUE|FALSE'
version='1|2'
title='WIDGET_TITLE'
type='WIDGET_TYPE'>
</b:widget>
| Attributs | Description | Classification | Préfixe expr: |
Implémentation |
|---|---|---|---|---|
|
Identifiant du gadget La valeur est composé du type de gadget suivi d'un numéro compris entre Consultez l'introduction aux gadgets pour connaître le type de chaque gadget. |
HTML classic | Interdit | Obligatoire | |
|
Le titre du gadget Définissable via le panneau de configuration. Cet attribut est obligatoire, mais sa valeur peut être laissée vide. Longueur maximale autorisée : 100 caractères. |
HTML classic | Interdit | Obligatoire |
|
Le type du gadget Consultez l'introduction aux gadgets pour connaître les types disponibles. |
HTML classic | Interdit | Obligatoire |
|
Affichage Mobile Définit l'affichage du gadget dans la vue mobile personnalisée :
⚠️ Actif uniquement pour les gadgets de version 1. |
HTML classic | Interdit | Facultative |
|
Verrouillage du gadget Lorsqu'un gadget est verrouillé, l'utilisateur ne peut ni le supprimer ni le déplacer. Cet attribut accepte également les valeurs |
HTML classic | Interdit | Facultative | |
|
Condition d'exécution du gadget La valeur attendue doit être boolean ( Elle peut être une valeur explicite, une donnée universelle (ou issue du widget) ou une expression Blogger. |
XHTML Blogger | Autorisé | Facultative | |
|
Visibilité du gadget
Réglage permettant de rendre le gadget actif. Si vrai, le gadget sera répertorié dans le dictionnaire universel |
HTML classic | Interdit | Facultative |
|
Numéro de version du gadget Valeur 1 ou 2. La valeur est définie automatiquement lors de l'intégration du gadget et dépend de la version du thème. ⚠️ Cet attribut peut ne pas apparaître dans le code XML, même si vous l'ajoutez manuellement. |
HTML classic | Interdit | Automatique |
|
Condition d'affichage Utilisé dans les premiers thèmes pour afficher le widget sur les pages désignées, ce paramètre est aujourd'hui obsolète. |
Obsolète | Obsolète | Obsolète |
Rendu HTML de la Balise
Lors de l'analyse du fichier XML, les balises <b:widget> sont transformées en éléments HTML pour le rendu du blog. Voici les principales modifications effectuées :
La balise
<b:widget>est convertie en une balise<div>.L'attribut
idest transféré à la balise<div>.Un attribut
classest ajouté à la balise<div>, incluant la valeurwidgetainsi que le type du gadget.L'attribut
data-versionest ajouté pour indiquer la version du gadget.
XHTML Blogger
<b:widget id='Header1' locked='true' title='Blogger Code (Header)' type='Header' version='2'>
</b:widget>
Rendu HTML du blog
<div class='widget Header' id='Header1' data-version='2'>
</div>
Rendu HTML de l'UI
<div class="widget Header locked-widget" data-version="2" id="Header1">
<div class="widget-wrap1">
<div class="widget-wrap2">
<div class="widget-wrap3">
<div class="widget-content visibility">
<div class="layout-widget-state visible" title="Visible"></div>
<div class="layout-title">Blogger Code PE (en-tête)</div>
<div class="layout-widget-description" title="Titre et description du blog.">Gadget En-tête de la page</div>
<a class="editlink icon" title="Modifier">Modifier</a>
</div>
</div>
</div>
</div>
</div>
Personnalisation de l'Affichage des Widgets dans l'UI
L'apparence des widgets dans l'interface de mise en page peut être personnalisée en ajoutant des règles CSS au sein de la balise <b:template-skin> du fichier XML. Les cibles doivent commencer par html body#layout pour que les styles soient appliqués correctement.
Exemple de CSS
<b:template-skin>
<![CDATA[
/* Widget */
html body#layout .widget-content {
background-color: #555;
}
/* Widget verrouillé */
html body#layout .locked-widget .widget-content {
background-color: #222;
}
/* Titre Widget */
html body#layout .widget-content .layout-title {
color: #fff;
}
/* Description Widget */
html body#layout .widget-content .layout-widget-description {
font-style: italic;
}
]]>
</b:template-skin>
