"Qué lindo día feo"

JMiur [E]

El LOOP de Blogger (agregando miniposts)

La primera cosa que podemos intentar dentro del LOOP de Blogger es "filtar" las entradas según su etiqueta. Para eso, basándonos en una idea de Blogger Buster, vamos a agregarle a nuestro blog, la posibilidad de utilizar miniposts.

¿Qué es un minipost? En términos generales, no es otra cosa que una entrada rápida, una frase, un llamado, algo corto que queremos resaltar. Además, un minipost tiene otra caracterísitica, se muestra de una manera distinta que el resto de las entradas y esto lo podemos hacer de dos maneras básicas: quitándolo de la secuencia cronológica del blog o dándole un diseño diferenciado.

Vamos a un ejemplo. Creamos un post cualquiera y le colocamos como etiqueta minipost. Una vez publicado, se verá normalmente pero, no queremos verlo cuando se muestre la página principal así que vamos a Diseño | Edición HTML y expandimos los artilugios.

Buscamos el LOOP y lo modificamos, insertando lo que está en color:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != "minipost"'>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:include data='post' name='post'/>
</b:if>
</b:loop>

<b:else/>

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

</b:if>
</b:loop>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>

Sólo hemos agregado una condición; cuando estamos en la página principal, antes de mostrar cada post, se leen las etiquetas de este y, si tiene esa específica, seguimos de largo así que no lo veremos.

¿Y cómo lo mostramos?

Lo más sencillo es utilizar el elemento Lista de blogs. Creamos uno y selecionamos las opciones que nos gusten, fundamentelmente, mostrar Fragmento del elemento más reciente. La URL que debemos poner es la etiqueta:

http://nombreBlog.blogspot.com/feeds/posts/default/-/minipost

Algo similar podría hacerse utilizando el elemento Feeds aunque con ese, por defecto, sólo podremos mostrar los títulos.

¿Dónde lo agregamos? Hay muchas posibilidades, lo podemos poner debajo del header, arriba de los posts, en la sidebar, etc.

En el caso de la Lista de blogs, podríamos agregarle ciertas características gráficas usando estas clases CSS:

ul#BlogList1_blogs {} /* el bloque del elemento */
ul#BlogList1_blogs li {} /* la lista */
ul#BlogList1_blogs .blog-content {} /* el bloque con el contenido */
ul#BlogList1_blogs .blog-title {} /* el título */
ul#BlogList1_blogs .item-content {} /* el contenido */

Si usamos otros elementos similares, habrá que cambiar el nombre por el que corresponda: BlogList1_blogs, BlogList2_blogs, BlogList3_blogs, etc.

El LOOP de Blogger (¿qué es?)

Entramos en Blogger. Hacemos click en Diseño, luego en Edición HTML. Marcamos Expandir plantillas de artilugios. Hacemos click otra vez y mientras esperamos que se recargue la página, buscamos la palabra "artilugios" en el diccionario.

Suspiramos. Nos inclinamos sobre el monitor y nos desplazamos por el código; una, tal vez dos veces. Murmuramos algo. Cerramos la pestaña y nos vamos a ver videos de japones golpeándose.

Nos dimos por vencidos.

Es lógico. Pusimos toda nuestra buena voluntad porque se nos ocurrió que era hora de tratar de entender un poco más y Blogger no nos lo hace sencillo. En lugar de algo organizado, nos muestra un galimatías donde lo único que alcanzamos a reconocer son dos o tres instrucciones que nos suenan más o menos familiares.

¿Dónde están los posts? ¿Cómo se muestran? ¿Podremos meter mano y hacer cosas diferentes?

No sé por qué motivo, razón o circunstancia, a los desarrolladores de Blogger se les ocurrió esta forma críptica de codificar algo pero, hay que lidiar con ellos. Lo básico, es entender que cuando se genera el código que muestra el navegador, lo que está ocurriendo es que, una serie de instrucciones se repiten una determinada cantidad de veces, una para cada entrada a ser mostrada, todas igualitas. Eso es lo que se llama un LOOP (bucle). Si alguien experimentó con WordPress o leyó artículos referentes a ese servicio, habrá notado que constantemente se hace refencia a "el LOOP", casi como si fuera un nombre propio. Y esto no es un capricho. Es que entender el LOOP es la clave de todo porque es allí donde un blog es un blog.

En Blogger también hay un LOOP y es todo eso que está entre estos dos códigos:

<b:includable id='main' var='top'>
  .......
</b:includable>

El contenido de ese INCLUDABLE es lo que controla la forma en que se mostrarán las entradas de nuestro sitio y en sus orígenes era un código corto pero, en los últimos tiempos, Blogger le ha añadido instrucciones siguiendo la manía generalizada de casi todos los desarrolladores: tratar de pensar por nosotros y preveer todas las posibilidades (omnipotencia pura).

Este es el código por defecto de una plantilla mínima:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>
    <data:adStart/>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>
      <b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == "item"'>
        <b:include data='post' name='comments'/>
      </b:if>
      <b:if cond='data:post.includeAd'>
        <data:adEnd/>
        <data:adCode/>
        <data:adStart/>
      </b:if>
    </b:loop>
    <data:adEnd/>
  </div>
  <!-- navigation -->
  <b:include name='nextprev'/>
  <!-- feed links -->
  <b:include name='feedLinks'/>
  <b:if cond='data:top.showStars'>
    <script src='http://www.google.com/jsapi' type='text/javascript'/>
    <script type='text/javascript'>
      google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
      function initialize() {
        google.annotations.setApplicationId(<data:top.blogspotReviews/>);
        google.annotations.createAll();
        google.annotations.fetch();
      }
      google.setOnLoadCallback(initialize);
    </script>
  </b:if>
</b:includable>

Allí, lo que está en amarillo son comentarios es decir, anotaciones hechas en la misma plantilla para explicar algo. No se ejecutan y podemos eliminarlas o modificarlas.

Todo lo rojo es el código para incluir Adsense. Si no usamos ese servicio, también podemos eliminarlo.

Las líneas en azul son lo que maneja la posibilidad de calificar los posts (las estrellitas) y está ahí, de prepo, las usemos o no las usemos. También podemos eliminarlas.

Y ya que estamos, eliminamos todo lo que está en naranja que es irrelevante.

Ahora, el contenido del INCLUDABLE quedará mucho más claro (es una forma de decir):

<div class='blog-posts'>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == "item"'>
      <b:include data='post' name='comments'/>
    </b:if>
  </b:loop>
</div>
<b:include name='nextprev'/>
<b:include name='feedLinks'/>

¡No quedó nada! Y sin embargo, el blog se sigue viendo ¡Ohhhhh! Ahí está algo que dice LOOP.

En esas pocas líneas está el nucleo de nuestro sitio. Un bloque (un DIV) que tiene una clase CSS llamada blog-posts y debajo dos intrucciones propias de Blogger llamadas INCLUDE.

[INCLUDABLE | INCLUDE no se les ocurrió nada mejor para confundirnos que ponerles nombres parecidos a dos cosas diferentes]

INCLUDE es una especie de subrutina; ejecuta algo que está en otro lado, lo "incluye" ahí.

¿Qué "incluye"? Pués un INCLUDABLE ... un trabalenguas XD

Simplificando un poco, luego del bloque donde se ejecuta el LOOP, Blogger va y ejecuta otras dos partes:

<b:includable id='nextprev'> ...... </b:includable>
agrega la barra de navegación inferior (Entradas antigüas, Inicio, etc)

<b:includable id='feedLinks'> ...... </b:includable>
agrega la línea para suscribirse (al sitio o a los comentarios)

El bucle es muy simple. Se ejecuta tantas veces como hemos indicado en la Configuración, mostrando una cierta cantidad de entradas o una sola vez si se trata de una página individual. Aquí es donde Blogger lee los datos de cada post y los muestra.

Primero que nada, la fecha si es que existe (y es donde nos complica la vida al separar la fecha del resto de los datos):

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Luego, otra vez otro INCLUDE que va y ejecuta una serie de instrucciones que dependen de cada plantilla y que son las que muestran el post en si mismo, el pie de página, las etiquetas, etc, etc, etc:

<b:include data='post' name='post'/>

Por último, hay una condición que incluirá los comentarios sólo si estamos en una página individual:

<b:if cond='data:blog.pageType == "item"'>
  <b:include data='post' name='comments'/>
</b:if>

¿Y para qué puede servir saber esto?

Dentro de ese LOOP podemos acceder a algunos datos fundamentales que nos pueden servir para personalizar la plantilla, agregandole funciones o condiciones; la más interesante, a mi juicio, es la posibilidad de detectar la etiqueta de un post y actuar en consecuencia; de tal manera, podríamos mostrar ciertas entradas de una forma distinta al resto.

A eso vamos ...