Crear subetiquetas en Blogger

Que Blogger no es especialmente flexible a la hora de personalizar el blog es bien conocido. Lo sabrá cualquiera que haya intentado juguetear un poco con el template. Wordpress ofrece muchas más características, además de plugins de terceros que se pueden integrar fácilmente (supongo) para personalizar el blog. Yo ya me he peleado unas cuantas veces con mi plantilla cuando he querido hacer algunas cosas un poco especiales: ensanchar el blog, introducir el Seguir leyendo, definir entradillas personalizadas, y más recientemente pasar del tamaño fijo y ajustar la anchura del blog al tamaño de la pantalla.

Una cosa que siempre he deseado hacer era utilizar subetiquetas. Es decir: refinar un conjunto de posts (los de la etiqueta Cerveza en este caso) con otras etiquetas. Esto es bastante útil para clasificar los post en la barra lateral, al menos en un blog como el mío. Los gestores de blogs no entienden de subetiquetas y todas las etiquetas tienen la misma jerarquía. Así que el tema consiste en conseguir que en la barra lateral aparezcan, alineadas en forma de árbol, las etiquetas y subetiquetas que yo desee. Encontré un método muy cómodo y personalizable, pero que incluía bastante Javascript (además de tener otros inconvenientes). Yo lo quería sin librerías de funciones ni muchas imágenes ni nada de eso. Finalmente se me ocurrieron dos soluciones de aficionado (que funcionan).

La solución con falsas etiquetas

El problema con Blogger es que no soporta las consultas del tipo: muéstrame todos los posts con la etiqueta 'Cerveza' AND 'Historia'. No le da la gana¹. Porque Wordpress sí que lo hace y para muestra, http://curiosoperoinutil.com/category/ciencia/fisica/. Podéis ver que el blog Curioso pero Inútil tiene en la barra, bajo la categoría Ciencia muchas subetiquetas, como por ejemplo Física.

Por otro lado Blogger sí que soporta la búsqueda de cadenas de texto. Así que mi primera solución fue de pillo: emplearía falsas etiquetas con palabras clave, ocultas en cada post que quisiera clasificar bajo la etiqueta de 'Cerveza'. Por ejemplo, en cada post que fuera de Historia de la Cerveza gastaría la palabra oculta cervhistoria. Para ocultarla, basta cambiar la propiedad de estilo display.

Es decir, escribo, al final de cada post de Cerveza con la 'subetiqueta' Historia <span style="display:none;>cervhistoria</span>.

Una vez hecho esto podemos consultar todos los posts con la palabra cervhistoria con la consulta http://civada.blogspot.com/search?q=cervhistoria².

Y ahora sólo tengo que editar el template del blog para cambiar la barra lateral. A los elementos especiales del blog que están en la barra lateral se les llama widgets. Hay un widget específico para las etiquetas. En él se recorren todos los nombres de etiquetas de tu blog que Blogger almacena (alfabéticamente) y se muestran como una lista html. Sólo tenemos que 'buscar' la etiqueta deseada (Cerveza) y entonces iniciar una sublista html. En ella añadiremos los enlaces a las búsquedas de palabras ocultas. (el añadido está en rojo)

Buscamos el widget en el template y hacemos esto (alguien que haya hecho algo de informática lo entenderá enseguida):

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<H2><data:title/></H2> <!-- Esto es la palabra 'Etiquetas' -->
</b:if>
<DIV class='widget-content'>
 <UL> <!-- Aquí empieza la lista principal -->
  <b:loop values='data:labels' var='label'>
  <LI>
   <b:if cond='data:blog.url == data:label.url'>
   <SPAN expr:dir='data:blog.languageDirection'>
    <data:label.name/>
   </SPAN>
   </b:if>
   <b:else/>
    <A expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></A>
   </b:if>
   <SPAN dir='ltr'>(<data:label.count/>)</SPAN> <!-- Número de posts con la etiqueta -->
   <b:if cond='data:label.name == "Cerveza"'> <!-- Aquí empieza lo bueno -->
    <UL style='margin-top:5px;'>
    <LI><A href='http://nombredelblog.blogspot.com/search?q=cervhistoria'>Historia</A></LI>
    <LI><A href='http://nombredelblog.blogspot.com/search?q=cervestilos'>Estilos</A></LI>
    </UL> <!-- Fin de la sublista -->
   </b:if>
  </LI> <!-- Fin de la entrada de Cerveza -->
  </b:loop> <!-- Fin del bucle -->
 </UL> <!-- Fin de la lista de entradas -->
<b:include name='quickedit'/>
</DIV>
</b:includable>
</b:widget> <!-- Sanseacabó el widget -->

Y funciona. Veamos las ventajas de este método.

• Es relativamente sencillo.
• No hay que trastear mucho el template. Aunque por cada nueva 'subetiqueta' virtual tendremos que añadir una linea nueva, claro.
• Es una idea cojonuda

Pero veamos las desventajas

• No son etiquetas de verdad. Nadie se podrá suscribir a los posts de Historia de la Cerveza. Lástima por los historiadores maltasianos. Tampoco tenemos cuenta de posts subetiquetados. Lástima por los amantes de las estadísticas
• 'Etiquetar' muchos posts antiguos con las nuevas palabras ocultas es un rollo.
• El día que a Blogger le de por añadir esta característica tendremos que etiquetar de nuevo y desmontar la paraeta.

Así que mirando el template di con una solución más bestia y menos elegante, pero con etiquetas de verdad.

La solución a lo bruto

Es muy sencilla: consiste en NO añadir a la lista principal las subetiquetas Y AÑADIRLAS expresamente bajo la etiqueta principal. Para eso gastaremos dos millones de expresiones condicionales. ¿Por qué?. Porque, que yo sepa, Blogger no entiende expresiones condicionales compuestas. Supongamos que tenemos tres subcategorías bajo Cerveza que son Historia, Estilos y Ronda.

La cosa es (atentos, amantes del pseudo-código)

PARA todas_las_etiquetas HACER
SI nombre_de_etiqueta NO_ES Historia NI Estilos NI Ronda ENTONCES
 (abrimos lista)
 ...Código del widget...
 SI nombre_de_etiqueta ES Cerveza ENTONCES
   PARA todas_las_etiquetas HACER
   (empezamos sublista)
   SI nombre_de_etiqueta ES Historia O Estilos O Ronda
     Añadimos enlace a la etiqueta como el resto.
   (cerramos sublista)
 (cerramos lista)
 PUES_YASTA

El único problema es que en Blogger (QUE YO SEPA) no se puede poner ni NI ni O. Lo cual es triste para la programación. Porque hay que añadir un mogollón de código. Algo así:

<div class='widget-content'>
<ul> <!-- Inicio de la lista -->
<b:loop values='data:labels' var='label'>
 <b:if cond='data:label.name != "Estilos" '>
 <b:if cond='data:label.name != "Historia" '>
 <li>
  <b:if cond='data:blog.url == data:label.url'>
   <span expr:dir='data:blog.languageDirection'>
   <data:label.name/>
   </span>
  <b:else/>
   <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
   <data:label.name/>
   </a>
  </b:if>
  <span dir='ltr'>(<data:label.count/>)</span>
 </li>
 </b:if></b:if> <!-- Tantos cierres como subetiquetas que no han de estar -->
 <b:if cond='data:label.name == "Cerveza"'>
  <ul style='margin-top:5px;'> <!-- Inicio la sublista -->
  <b:loop values='data:labels' var='label'>
   <b:if cond='data:label.name == "Estilos" '>
    <li>
     <b:if cond='data:blog.url == data:label.url'>
      <span expr:dir='data:blog.languageDirection'>
      <data:label.name/>
      </span>
     <b:else/>
      <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
      <data:label.name/>
      </a>
     </b:if>
     <span dir='ltr'>(<data:label.count/>)</span>
    </li>
   <b:else/>
   <b:if cond='data:label.name == "Historia" '>
    <li>
     <b:if cond='data:blog.url == data:label.url'>
      <span expr:dir='data:blog.languageDirection'>
      <data:label.name/>
      </span>
     <b:else/>
      <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
      <data:label.name/>
      </a>
     </b:if>
     <span dir='ltr'>(<data:label.count/>)</span>
    </li>
   </b:if></b:if> <!-- Tantos cierres como subetiquetas -->
  </b:loop>
  </ul> <!-- Fin de la sublista -->
 </b:if> <!-- Si era cerveza -->
 </b:loop>
</ul> <!-- Fin de la lista -->

Y no queda nada elegante, pero funciona, y funciona bien, como pueden ver en la barra de al lado. Pasemos pues a la enumeración de pros y contras (esta vez en orden inverso).

Contras de esta solución:

• Es un peñazo para el template, sobretodo si un desea emplear muchas subetiquetas. Hay que tocar mucho código.
• Algún día Blogger le dará soporte directamente y todo esto se irá al garete

Ventajas:

• Es muy fácil añadir las subetiquetas a los posts ya creados.
• Tenemos etiquetas de verdad, a las que uno se puede suscribir. Los maltasianos estarán contentos. Y los amantes de las estadísticas.

Hay que hacer notar que, aunque pongamos mogollón de código condicional en el template, éste no se transmite y por tanto no hace que la página 'pese' más. Sí que puteamos un poco a los servidores de blogger, que son los que procesan el template junto con los datos del blog y crean el código html que es efectivamente transferido (el tiempo de proceso del servidor suele ser nimio en comparación con el de transmisión). Pero que se jodan. Haber dado soporte directamente, leñe.

Y ya está. ¿A que mola?. Yo no lo había visto en ningún blog de Blogger. Sólo hace falta que lo diga para que me salgan 15 ejemplos. Si alguien conoce una manera mejor de hacer lo mismo, que me lo diga, por favor.

Actualización

Rô ha realizado en su blog una explicación detallada del segundo método. La pueden consultar aquí: Parte I, Parte II y Parte III. Si después de leerlos les queda alguna duda... ¡léanlo otra vez, porque está muy bien explicado!. Bueno, no, pregunten si quieren...

¹ Si sí que lo hace y yo no lo he conseguido, dejen de leer, por favor. Y díganmelo, porque me he vuelto loco probando hasta decidir (yo solo) que no se puede.
² Evidentemente, hay que emplear alguna palabra que no vayamos a usar en posts que no sean de esa subcategoría.

Blogger Data API. Consultas.
Blogger Layout Help.

Posts relacionados

Cómo hacer un Seguir Leyendo
Ensanchar el blog (ya no se aplica a mi blog)