La balise de section / The section tag : <b:section>
La balise <b:section> est un composant fondamental dans la structure des thèmes Blogger. Elle permet de définir des sections spécifiques du blog qui contiennent divers gadgets, facilitant ainsi une organisation modulaire du contenu.
Table des matières
La Syntaxe
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
</b:section>
Chaque balise
<b:section>doit être positionnée dans la structure XML du thème, spécifiquement entre les balises<body></body>.Une balise
<b:section>ne peut contenir que des balises<b:widget>.Les balises
<b:section>ne doivent jamais être imbriquées les unes dans les autres.Le thème doit contenir au moins une balise
<b:section>, dont l'une doit impérativement avoir l'attributpreferred='true'pour indiquer la section principale.
Les Attributs
La balise <b:section> accepte plusieurs attributs qui définissent son comportement. Certains attributs sont obligatoires tandis que d'autres sont optionnels, offrant une grande flexibilité pour la configuration.
<b:section ads='TRUE|FALSE'
class='CLASS_NAME'
cond='TRUE|FALSE'
growth='vertical|horizontal'
id='SECTION_ID'
maxwidgets='NUMBER'
name='SECTION_NAME'
preferred='YES|NO|TRUE|FALSE'
showaddelement='YES|NO|TRUE|FALSE'
tag='TAG_NAME'>
</b:section>
| Attributs | Description | Classification | Préfixe expr: |
Implémentation |
|---|---|---|---|---|
|
AdSense Spécifie si la section est réservée exclusivement aux annonces AdSense. Valeur : |
HTML classic | Interdit | Facultative |
|
Identifiant Identifiant unique de la section, nécessaire pour la différenciation et la manipulation du DOM.. |
HTML classic | Interdit | Obligatoire | |
|
Classe Classe CSS utilisée pour styliser la section, facilitant la personnalisation par le biais des feuilles de style.. |
HTML classic | Interdit | Facultative | |
|
Nom de la section Affiché dans la mise en page. Si non spécifié, la valeur de l'attribut |
HTML classic | Autorisé | Facultative |
|
Limite de gadgets Le nombre maximum de gadgets que peut contenir la section. Lorsque le nombre maximum de gadgets est atteint, le bouton « Ajouter un gadget » (défini par l'attribut |
HTML classic | Interdit | Facultative |
|
Section préférée Indique si la section est considérée comme la principale. Valeur : |
HTML classic | Interdit | Facultative |
|
Ajouter un gadget Affiche le bouton « Ajouter un gadget » tant que le nombre de gadgets n'a pas atteint la limite définie par l'attribut Valeur : |
HTML classic | Interdit | Facultative |
|
Condition d'exécution de la section La valeur attendue doit être boolean ( Elle peut être une valeur explicite, une donnée universelle ou une expression Blogger. |
XHTML Blogger | Autorisé | Facultative | |
|
Balise Spécifie le type de balise HTML qui remplacera la |
HTML classic | Autorisé | Facultative |
|
Alignement du contenu Attribut abandonné. Indique l'alignement des gadgets dans la mise en page. Valeur : |
HTML classic | Autorisé | Facultative |
Rendu HTML de la Balise
Lors de l'interprétation du fichier XML, les balises <b:section> sont converties en HTML pour le rendu final du blog et de la mise en page. Voici les principales modifications qui surviennent :
La balise
<b:section>est convertie en une balise<div>(si l'attributtagn'a pas été mentionné).La balise générée inclut les attributs
class,idetnames'ils sont spécifiés dans le fichier XML.L'attribut
classde la balise inclut automatiquement la valeursection.Si la section ne contient aucun gadget visible, la classe
no-itemsest également ajoutée à l'attributclass.
<b:section class='header' cond='data:view.isHomepage' growth='horizontal' id='header' maxwidgets='1' name='Entête' showaddelement='yes' tag='header'>
</b:section>
<header class='header section' id='header' name='Entête'>
</header>
<div class="header section" growth="horizontal" id="header" maxwidgets="1" name="Entête" showaddelement="yes">
</div>
Personnaliser l'affichage des sections dans l'UI
L'affichage des sections dans l'UI peut être stylisé en ajoutant des déclarations CSS dans la balise <b:template-skin> du fichier XML. Les cibles à déclarer doivent commencer par html body#layout.
<b:template-skin>
<![CDATA[
/* Section */
html body#layout div.section {
background-color: red;
border: 5px solid darkgray;
border-radius: 25px;
}
/* Title section */
html body#layout div.section h4 {
color: #fff;
}
/* Add widget div */
html body#layout .add_widget {
border: 5px dotted darkorange;
border-radius: 25px;
}
/* Add widget icon */
html body#layout .add-icon {
transform: rotate(-5deg);
filter: sepia(100%);
background-size: 32px;
}
/* Add widget link */
html body#layout .add_widget a {
color: orange;
text-transform: uppercase;
font-weight: bold;
}
]]>
</b:template-skin>
