Jugando con las etiquetas de Blogger

Son muchas las veces que me han preguntado si era posible crear un sistema de etiquetas más flexibles en Blogger y, por lo general, se refieren a tener la posibilidad de tener categorías y subcategorías. La respuesta siempre fue NO, eso no puede hacerse porque Blogger no lo contempla y no nos da la posibilidad de acceder a los datos de manera sencilla y rápida.

Pensando un poco en el tema, se me ha ocurrido hacer un experimento y después de algunas idas y vueltas, creé un blog de pruebas para ver si era posible jugar un poco con las etiquetas. El resultado no es nada maravilloso pero, tal vez, sirva como un primer boceto para seguir investigando.

Leyendo el código de un elemento Label, vemos que Blogger hace un bucle por las etiquetas y lee tres datos: data:label.name es el texto de cada una, data:label.url es la dirección URL y data:label.count es la cantidad de posts en cada etiqueta. De esos datos, el único que realmente importa es el nombre así que ¿por que no guardarlos en un array de JavaScript para después manipularlos? Para simplificar un poco, un array es, una lista con un subíndice; por ejemplo imagen[0], imagen[1], imagen[2], etc.

Imaginé lo siguiente: el blog posee una cantidad de etiquetas comunes pero, algunas de ellas, se agrupan de alguna manera y contienen dos partes, la categoría a la que pertenecen y la subgcategoría, separadas ambas por un carácter especial, un carácter que, normalmente no usaría, por ejemplo, el guión bajo (_). De esta manera, ese blog de pruebas en particular tiene una serie de posts clasificados así:

Africa America_Brasil America_Canada Asia_India Asia_Indonesia Asia_Japón Europa_España Europa_Francia Europa_Portugal Oceanía

Los continentes, serían las categorías principales y los paises las subcategorias. Para complicarlo un poco más, dos de esos continentes no tienen subcategorias. Hasta aquí, no hay problema, puedo ver todos los posts de cualquiera de ellas; un enlace a http://nombre/labels/Europa_Francia me mostrará los posts de esa categoría pero, lo que quiero es mostrarlos agrupados por continente y luego listar sólo esos.

En la sidebar hay tres elementos con etiquetas:

• Etiquetas con Secciones sólo muestra las categorías (los continentes); haciendo click en cada una de ellas, se despliega para mostrar los enlaces a las subcategorías (los países).
• Etiquetas sin Secciones sólo muestra las etiquetas que no tiene subcategorías.
• Etiquetas Normales es el elemento standard de Blogger y no tiene uso.

Reproducir el ejemplo es sencillo; como no hay restricciones en cuanto a su cantidad, creamos tres elementos Labels desde Elementos de la página de la plantilla y les ponemos nombres para diferenciarlos. Luego, en la Edición HTML de la plantilla, desplegamos los artilugios y buscamos esos elementos que dirán algo así:

<b:widget id='Label1' locked='false' title='el_nombre' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span><data:label.name/></span>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Usaremos un elemento Label para mostrar las categorías desplegables, otro para las categorías simples y el tercero, será el común que sólo dejaremos para comparar resultados. En los dos primeros, eliminaremos todo lo indicado en rojo y allí colocaremos los códigos correspondientes.

<script type='text/javascript'>

// definición de las variables utilizadas
var elBlog =&quot;<data:blog.homepageUrl/>&quot;; // la URL del blog
var listaEtiquetas = new Array(); // el array que contendrá las etiquetas
var listaEtiquetasNum=0; // contador auxiliar
var laSeccion = &quot;&quot;; // guarda los nombres de las categorías
var elEnlace =&quot;&quot;; // el enlace a cada subcategoría

// usamos los datos de Blogger para recopilar todas las etiquetas del blog
<b:loop values='data:labels' var='label'>
// leemos el nombre de cada una de las etiquetas
var elNombre = &quot;<data:label.name/>&quot;;
// lo guardamos en el array
listaEtiquetas[listaEtiquetasNum] = elNombre;
listaEtiquetasNum ++; // incrementamos el contador
</b:loop>

// función auxiliar para expandir y contraer las secciones
function linkLista(cual) {
var idListaUL = document.getElementById(cual);
if(idListaUL.style.display == &#39;none&#39;) {
idListaUL.style.display = &#39;block&#39;;
}else{
idListaUL.style.display = &#39;none&#39;;
}
return false;
}

</script>

<!-- el script está dividido en dos partes para agregarlo en la plantilla sin errores -->

<script type='text/javascript'>
//<![CDATA[

// leemos todas las etiquetas y las separamos en dos partes
  for (var i = 0; i < listaEtiquetas.length; i++) {
var cual=listaEtiquetas[i]; // leemos la etiqueta completa
var auxiliar = cual.split("_"); // la separamos en dos
listaEtiquetas[i]=new Array(1); // ampliamos el array 
listaEtiquetas[i][0] = auxiliar[0]; // guardamos el nombre de la categoría
listaEtiquetas[i][1] = auxiliar[1]; // guardamos el nombre de la subcategoría
}

// leemos el array generado y escribimos el documento HTML
for (var i = 0; i < listaEtiquetas.length; i++) {
var leerSeccion = listaEtiquetas[i][0]; // el nombre de la categoría
var leerItem = listaEtiquetas[i][1]; // el nombre de la subcategoría
// si no hay una sucbategoría, leerItem no tendrá un valor y lo salteamos
if (leerItem!=undefined) {
// sólo mostramos categorías y subcategorías
if (laSeccion != leerSeccion) {
// si todavía no lo hicimos, creamos el enlace de la categoría desplegable
document.write("</ul>"); // por las dudas, cerramos cualquier lista abierta
laSeccion = leerSeccion; // el nombre de la categoría (el continente)
// creamos un enlace con una clase CSS llamada listadoSECCION
// que servirá para desplegar y contraer la categoría
document.write("<a class=\"listadoSECCION\" title=\"Expandir/Contraer la sección\" href=\"javascript:void(0);\" onclick=\"return linkLista('" + laSeccion + "');\">" + laSeccion + "</a>");
// iniciamos el bloque oculto con la lista de subcategorías
// a las que le establecemos una clase CSS llamada listadoBloqueITEMS
document.write("<ul class=\"listadoBloqueITEMS\" id=\"" +  laSeccion + "\" style=\"display:none;\">");
} 
// determinamos la URL de cada enlace
elEnlace = elBlog + "search/label/" + laSeccion + "_" + leerItem
// escribimos cada item de la lista con una clase CSS llamada listadoITEM
document.write("<li class=\"listadoITEM\"><a href=\"" + elEnlace + "\">" + leerItem + "</a></li<");
}
}

//]]>
</script>

<ul class='listadoBloqueITEMS'>
<script type='text/javascript'>
//<![CDATA[
// leemos el array generado y escribimos el documento HTML
for (var i = 0; i < listaEtiquetas.length; i++) {
var leerSeccion = listaEtiquetas[i][0]; // el nombre de la categoría
var leerItem = listaEtiquetas[i][1]; // el nombre de la subcategoría
 // si no hay una subcategoría, leerItem no tendrá un valor y lo mostramos
if (leerItem==undefined) {
laSeccion = leerSeccion; // el nombre de la categoría
// determinamos la URL de cada enlace
elEnlace = elBlog + "search/label/" + laSeccion
// escribimos cada item de la lista con una clase CSS llamada listadoITEM
document.write("<li class=\"listadoITEM\"><a href=\"" + elEnlace + "\">" + laSeccion + "</a></li>");
}
}
//]]>
</script>
</ul>

Ambos scripts están armados de manera muy sencilla y sólo usan instrucciones elementales para que puedan comprenderse y documentados hasta donde es posible.

Lo único que faltaría es establecer las propiedades de las clases CSS que serán personales pero, pueden resumirse de esta forma:

<style type="text/css">

/* los pseudo-botones para desplegar las subcategorías */
a.listadoSECCION, a.listadoSECCION:visited, a.listadoSECCION:link {
background-color: beige;
border: 2px ridge Brown;
color: DarkRed;
display: block;
[... otras propiedades ...]
}
a.listadoSECCION:hover {
text-decoration: none;
[... propiedades para el efecto mouseover...]
}

/* el bloque oculto con la lista de subcategorías */
ul.listadoBloqueITEMS {
list-style-position:inside;
[... propiedades varias ...]
}

/* cada item de las subcategorías */
li.listadoITEM {
[... propiedades varias ...]
}

/* cada item es un enlace */
li.listadoITEM a, li.listadoITEM a:visited, li.listadoITEM a:link {
text-decoration:none;
[... propiedades varias ...]
}
li.listadoITEM a:hover {
[... propiedades para el efecto mouseover...]
}

</style>

En verdad, como sólo se trata de una vaga idea, espero que alguien le saque provecho o plantee alguna alternativa más razonable.