Etiqueta b:section de Blogger

b:section Blogger

Las etiquetas b:section forman parte del cuerpo del documento xml. Son las etiquetas más importantes y en ocasiones, también resultan ser obligatorias.


Nota: Para comprender mejor los terminos que utilizo en las entradas de la categoria enciclopedia puedes consultar la tabla de terminos.


Etiqueta b:section

Genera una sección que nos permite agregar gadgets/widgets a la plantilla xml. Su sintaxis es la siguiente:


<b:section id='[Identificador]'>
   <!-- [b:widget] -->
</b:section>

La etiqueta b:section soporta atributos que definen su configuración y comportamiento. En la siguiente tabla se encuentran los atributos disponibles:


id [string] Obligatorio. Identificador único de la seccion.
class [string] Agrega Clases de CSS.
name [string] Nombre de la sección. Si no se especifica se tomará del id.
maxwidgets [number] Especifica la cantidad de widgets permitidos en la seccion.
preferred [boolean] yes para establecer como principal, caso contrario no.
showaddelement [boolean] yes para mostrar el enlace "Añadir gadget", caso contrario no.

La sintaxis con los atributos establecidos sería la siguiente:


<b:section class='[class]' id='[id]' maxwidgets='[number]' name='[name]' preferred='[yes || no]' showaddelement='[yes || no]'>
   <!-- [b:widget] -->
</b:section>

Renderizado HTML

Cuando una etiqueta <b:section/> se renderiza en el código fuente, se convierte en una etiqueta <div/>, por ejemplo, en la plantilla xml tenemos lo siguiente:


<b:section class='miblog' id='blog' maxwidgets='2' showaddelement='yes'>
   <!-- [b:widget] -->
</b:section>

Al renderizarse, si revisamos el código fuente del blog, la etiqueta <b:section/> se convierte en lo siguiente:


<div class='miblog section' id='blog'>
   <!-- [b:widget] -->
</div>

Los parámetros maxwidgets y showaddelement desaparecen porque blogger solo los interpreta pero no los renderiza. También agrega la class "section" junto a las nuestras.


Conocer este comportamiento nos ayuda a reducir el html de la plantilla, necesario para el diseño.


Condiciones

Es posible condicionar una sección si usamos el atributo "cond" directamente en la etiqueta de la siguiente forma:


<b:section cond='[expresion]' id='[id]'>
   <!-- [b:widget] -->
</b:section>

Por ejemplo, en el siguiente codigo utilizamos una etiqueta data:view y establecemos que la sección solo estara disponible dentro de los articulos:


<b:section cond='data:view.isPost' id='sidebar'>
   <!-- [b:widget] -->
</b:section>

Una condición que afecte a la visibilidad del section, puede provocar que desaparezca de la pestaña "diseño", si esto sucede una solución es comparar el layout y evitar que afecte a este último de la siguiente manera:


<b:section cond='data:view.isError and not data:view.isLayoutMode' id='sidebar'>
   <!-- [b:widget] -->
</b:section>

De esta forma, en el código anterior le indicamos al section que solo sea visible en la pagina de error, pero también que solo afecte si la vista actual no corresponde a la pestaña diseño.


Si te ha servido toda esta informacion no olvides compartir la entrada, ayudaras a mas personas y eso me ayudaria mucho. Muchas gracias por leer.