Etiquetas b:tag, b:class, b:attr y b:comment de Blogger

b:tag b:class b:attr Blogger

Estas etiquetas afectan directamente al código html y fueron creadas con el fin de poder utilizar expresiones de blogger, que normalmente una etiqueta html no soportaría.


Etiqueta b:tag

Nos permite generar cualquier etiqueta html y puede llevar cualquier expresión de blogger (opcional). Su sintaxis es la siguiente:


<b:tag cond='[expresiones]' name='[etiqueta HTML (obligatorio)]'/>
<b:tag cond='[expresiones]' name='[etiqueta HTML (obligatorio)]'><!-- Contenido --></b:tag>

En el siguiente ejemplo, generamos una etiqueta del tipo <link href="#enlace"/>, con sus respectivos atributos y además usaremos la expresión lambda en la condicion:


<!-- Link mediante b:tag -->
<b:tag cond='data:post.labels any (l => l.name == "Anime")' rel='stylesheet' href='../style/entradas-anime.css' name='link'/>

Como resultado, en el html se renderiza la etiqueta link con algunos estilos, pero solo será visible si la condición se cumple, en la cual comprobamos si se trata de una entrada con la etiqueta Anime. Finalmente en el html se vería asi:


<!-- Link mediante b:tag -->
<link href='../style/entradas-anime.css' rel='stylesheet'/>

Y por supuesto, si la condición no se cumple la etiqueta no se genera, pero su contenido siempre será visible, muy distinto a lo que haría b:if. En el siguiente codigo le decimos que solo se genere si existe algún enlace:


<b:tag cond='data:link' expr:href='data:link' name='a'>
   <img expr:alt='data:title' expr:src='data:sourceUrl'/>
</b:tag>

El código anterior pertenece al widget Imagen, si efectivamente, se configuró un enlace para la imagen, el código que se genera es el siguiente:


<a href='../enlace.html'>
   <img alt='widget Imagen' src='../imagen.jpg'/>
</a>

Por el contrario, si no se configuró ningún enlace, la condición devolverá "false", por lo tanto el html resultante es el siguiente:


<img alt='widget Imagen' src='../imagen.jpg'/>

También podemos generar una etiqueta diferente si condicionamos el atributo name='[Etiqueta]', en este caso podemos usar el selector ternario de la siguiente forma:


<b:tag expr:name='data:view.isPost ? "article" : "section"'>
   <!-- Contenido -->
</b:tag>

Lo que hemos hecho es comprobar si nos encontramos en una entrada. Si la condición devuelve verdadero, la etiqueta html que se genera es <article></article>, caso contrario se genera <section></section>.


Etiqueta b:class

Agrega una class al elemento padre, que puede llevar cualquier expresión de blogger (opcional). Su sintaxis es la siguiente:


<b:class cond='[expresiones]' name='[atributo]'/>

En el siguiente ejemplo, le agregamos la clase "inicio" a la etiqueta <section> cuando la condición devuelve verdadero:


<section class='main'>
   <b:class name='inicio' cond='data:view.isHomepage' />
   <!-- Contenido -->
</section>

Como resultado, si nos encontramos en la página de inicio, la etiqueta section obtendrá la class "inicio":


<section class="main inicio">
   <!-- Contenido -->
</section>

Etiqueta b:attr

Agrega cualquier atributo al elemento padre, que puede llevar cualquier expresión de blogger (opcional). Su sintaxis es la siguiente:


<b:attr cond='[expresiones]' name='[atributo]' value='[contenido del atributo]'/>

En el siguiente ejemplo, le agregamos la id "pagina-estatica" a la etiqueta <body>, siempre que la condición devuelva verdadero:


<body>
   <b:attr cond='data:view.isPage' name='id' value='pagina-estatica'/>
   <!-- Contenido -->
</body>

Como resultado, si nos encontramos en una página estática, el cuerpo del documento <body> ganará la id "pagina estatica":


<body id="pagina-estatica">
   <!-- Contenido -->
</body>

Etiqueta b:comment

Sirve para agregar comentarios en la plantilla xml, que por defecto no se renderizan. Su sintaxis es la siguiente:


<b:comment render='[booleano (default:false)]'> [Comentario] </b:comment>

En el siguiente ejemplo, agregamos un comentario común. Al renderizar la plantilla xml este no será visible, lo cual es útil para dejar mensajes a los desarrolladores que trabajen en un mismo proyecto.


<b:comment> Esto es un comentario </b:comment>

Ahora vamos a agregar un comentario dinámico y con la capacidad de renderizarse:


<b:comment render='true'>
   Esto <b:if cond='data:post.labels none (l => l.name == "Cocina")'>no</b:if> es un articulo sobre Cocina
</b:comment>

Si nos encontramos en una entrada con la etiqueta "Cocina", en el código fuente del blog, veremos el siguiente comentario:


<!-- Esto es un articulo sobre Cocina -->

Caso contrario:


<!-- Esto no es un articulo sobre Cocina -->

Cualquier inquietud no dudes en preguntar. Si te ha servido esta entrada no olvides compartirla, eso me ayudaria mucho.