Blogger: Plantilla, elementos y secciones (3)

Un elemento de Blogger es un "contenedor" de datos que se usa para poder manipularlo en la solapa Elementos de la página de la ventana de Diseño.

Cada elemento widget debe contener una etiqueta <b:includable> </b:includable>:

<b:widget [atributos]>
<b:includable id='main' var=''>
  .......
</b:includable>
</b:widget>

Los atributos sólo son dos.

id es obligatorio y uno de ellos debe ser id='main'. A menudo, es el único necesario.
var es opcional y es un identificador que sirve de referencia a ciertos datos

Aunque no es algo que hagamos habitualmente, podríamos crear varios bloques includable dentro de un elemento pero, no se mostrarán a menos que en el que tiene id='main' agreguemos una llamada. Por ejemplo, si creamos esto:

<b:includable id='algo' var='dato'>

deberemos usarla así:

<b:includable id='main' var='otrodato'>
<b:include name='algo' />
</b:includable>

Los atributos de la etiqueta b:include son

name es un identificador obligatorio y debe ser el mismo que usamos en el ID de la etiqueta b:includable
data es un dato opcional que se transfiere de uno a otro

¿Confuso? sin duda, este es un ejemplo sencillo:

<b:includable id='main'>
  <b:loop var='i' values='posts'>
     <b:include name='post' data='i'/>
  </b:loop>
</b:includable>
<b:includable id='post' var='p'>
  Titulo <data:p.title/>
</b:includable>

Esta etiqueta se utiliza cuando queremos repetir algo en diferentes lugares. El código se escribe solo una vez dentro de una etiqueta b:includable y luego se la llama en cualquier otro lugar del elemento mediante la etiqueta b:include.

La etiqueta data es la que que contiene los datos de nuestro blog, ya sea opciones de configuración o contenido. Algunas son genéricas, es decir, funcionan en cualquier elemento, por ejemplo, como todos los widgets poseen un título, usamos la etiqueta <data:title/> para mostrarlo; lo mismo podría decirse de la etiqueta <data:content/> que es el contenido del elemento. Otras son más específicas y sólo se utilizan en determinados elementos. Por ejemplo <data:caption/> es el texto que se incluye en un elemento Image.

Otras, son aún más complejas. Por ejemplo, <data:post.comments&gt; son los comentarios y los datos de cada uno e ellos es accesible con:

<data:comment.id/> es el ID de cada comentario
<data:comment.body/> es el contenido
<data:comment.author/> es el nombre del autor
<data:comment.authorUrl/> es la dirección URL del autor
<data:comment.isDeleted/> indica si ha sido borrado o no

Muchos de estos datos no están documentados y no hay información sobre ellos. A veces, podemos inferir para que sirven y otras, simplemente debemos usarlos así como vienen, sin hacer preguntas.

Casi todo los elementos tienen el mismo código ya que los datos internos (el contenido) no se guarda en la plantilla:

<b:widget id='XXX' locked='false' title='texto' type='XXX'>
 <b:includable id='main'>
    <!-- este es el título -->
    <b:if cond='data:title'>
       <h2 class='title'><data:title/></h2>
    </b:if>
    <!-- este es el contenido que Blogger guarda por separado -->
    <div class='widget-content'><data:content/></div>
    <!-- este es el ícono de edición rápida -->
     <b:include name='quickedit'/>
 </b:includable>
</b:widget>

Pero, hay algunos elementos en particular que tienen un aspecto diferente, por ejemplo, los elementos Archivo y Etiquetas. Esto es así porque en el código se utilizan los datos internos de Blogger, es decir, etiquetas data y estas, sólo pueden ser empleadas en la plantilla. Si quisiéramos agregarlas en un elemento HTML, no conseguiríamos nada y, probablemente, nos diera algún tipo de error.