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.
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: » | Implantation |
---|---|---|---|---|
id |
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. |
Classification : HTML classic | Préfixe « expr: » : Interdit | Implantation : Obligatoire |
title |
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. |
Classification : HTML classic | Préfixe « expr: » : Interdit | Implantation : Obligatoire |
type |
Le type du gadget Consultez l'introduction aux gadgets pour connaître les types disponibles. |
Classification : HTML classic | Préfixe « expr: » : Interdit | Implantation : Obligatoire |
mobile |
Affichage Mobile Définit l'affichage du gadget dans la vue mobile personnalisée :
⚠️ Actif uniquement pour les gadgets de version 1. |
Classification : HTML classic | Préfixe « expr: » : Interdit | Implantation : Facultative |
locked |
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 |
Classification : HTML classic | Préfixe « expr: » : Interdit | Implantation : Facultative |
cond |
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. |
Classification : XHTML Blogger | Préfixe « expr: » : Autorisé | Implantation : Facultative |
visible |
Visibilité du gadget
Réglage permettant de rendre le gadget actif. Si vrai, le gadget sera répertorié dans le dictionnaire universel |
Classification : HTML classic | Préfixe « expr: » : Interdit | Implantation : Facultative |
version |
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. |
Classification : HTML classic | Préfixe « expr: » : Interdit | Implantation : Automatique |
pageType |
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
id
est transféré à la balise<div>
.Un attribut
class
est ajouté à la balise<div>
, incluant la valeurwidget
ainsi que le type du gadget.L'attribut
data-version
est 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>
Les autres balises
<b:attr>
<b:class>
<b:comment>
<b:defaultmarkups>
<b:defaultmarkup><b:eval>
<b:if>
<b:elseif>
<b:else><b:includable>
<b:include><b:loop>
<b:message>
<b:param><b:section>
<b:skin>
<b:template-skin><b:switch>
<b:case>
<b:default><b:tag>
<b:template-script>
<b:widget>
<b:widget-settings>
<b:widget-setting><b:with>
<data:foo>
<![CDATA[]]>