Indice por categorías

Hace tiempo, Beatiful Beta nos obsequió con un script que permitía mostrar todas nuestras entradas en una tabla, a modo de índice. Un ejemplo de cómo funciona lo teneis actualmente en este mismo blog, pinchando en la etiqueta correspondiente de la parte superior.

Tras unas pequeñas modificaciones, hemos logrado que ese mismo script sirva para mostrar un índice pero por categorías. La cosa funciona así: pinchando en una etiqueta de nuestro gadget de idems, se verá en la parte superior del blog una tabla con todas las entradas de esa etiqueta por orden alfabético. Posteriormente podemos ir seleccionando otra etiqueta para ver su contenido o cerrar la tabla para seguir haciendo otra cosa. Los títulos de la tabla permiten ordenar las entradas mostradas por fecha o, como se ha dicho, alfabéticamente. Una demo de cómo quedaría el sistema.



¿Cómo hacer esto? En cinco minutos siguiendo estos pasos...

1. Creamos en nuestra barra lateral un nuevo gadget Etiquetas. Le ponemos de título Indice por categorías y por el momento lo dejamos tipo Lista. Da igual si ya tenemos uno. Si es así, este pasará a tener la ID Label2.

2. Ahora vamos a Edición HTML y seleccionamos Expandir plantillas de artilugios. Como no queremos depender de servicios externos, que cualquier día nos dejan colgados, copiamos el siguiente código [+/-] delante del </head> Es largo, pero sólo se trata de copiar y pegar. Tranqui. He aprovechado para traducir los mensajes y que salgan en cristiano (...no Ronaldo).

<!-- Estilo indice categorías -->
<style type='text/css'>
#toc {border: 0px solid #990000; background:none; padding: 5px; width:400px; margin:9px auto; text-align:center;}
.toc-header-col1, .toc-header-col2 { background:#ffffff; color:#000000; width:300px; text-align:left; font-size:12px;}
.toc-header-col2 { width:100px;}
.toc-header-col1 a, .toc-header-col1 a:visited, .toc-header-col2 a, .toc-header-col2 a:visited { text-decoration:none; color:#000000; background:none !important;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { text-decoration:underline; color:#000000; background:none !important;}
.toc-entry-col1, .toc-entry-col2 { padding-left: 5px; text-align:left; color:#333333; font-size:12px; background:#E2E2BB;}
.toc-entry-col1 a, .toc-entry-col2 a { background:none !important; color:#990000 !important;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover { text-decoration:underline !important;}
.toc-entry-col1 a:visited, .toc-entry-col2 a:visited { color:#666666 !important; padding-left: 10px; background:none !important;}
</style>

<!-- Script indice categorías -->
<script type='text/javascript'>
//<![CDATA[
// ---------------------------------------------------
// BLOGTOC
// ---------------------------------------------------
// Author: Beautiful Beta
// Url: http://beautifulbeta.blogspot.com
// Adaptación para etiquetas: Oloblogger
// ---------------------------------------------------
var postTitle = new Array(); // array de títulos
var postUrl = new Array(); // array de url's
var postDate = new Array(); // array de datos de publicación
var postLabels = new Array(); // array de etiquetas

var sortBy = "titleasc"; // valor por defecto para ordenar
var tocLoaded = false; // true una vez que el feed ha sido leído
var postFilter = ""; // valor por defecto del filtro

function loadtoc(json) {
function getPostData() {
// Esta función lee todos los datos de los posts y los guarda en una matriz
if ("entry" in json.feed) {
var numEntries = json.feed.entry.length;
for (var i = 0; i < numEntries; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var postdate = entry.published.$t.substring(0,10);
var posturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
var pll = '';
if ("category" in entry) {
for (var k = 0; k < entry.category.length; k++) {
pll += '<a href="javascript:filterPosts(\'' + entry.category[k].term + '\')" title="Click para seleccionar todos los posts con etiqueta \'' + entry.category[k].term + '\'">' + entry.category[k].term + '</a>, ';
}
var l = pll.lastIndexOf(';');
if (l != -1) { pll = pll.substring(0,l); }
}
postTitle.push(posttitle);
postDate.push(postdate);
postUrl.push(posturl);
postLabels.push(pll);
}
}
} // Fin getPostData

numEntries = json.feed.entry.length;
getPostData();
sortPosts(sortBy);
tocLoaded = true;
}

// Funciones filtro y orden
function filterPosts(filter) {
scroll(0,0);
postFilter = "";
displayToc(postFilter);
}
function allPosts() {
postFilter = '';
displayToc(postFilter);
}
function sortPosts(sortBy) {
function swapPosts(x,y) {
var temp = postTitle[x];
postTitle[x] = postTitle[y];
postTitle[y] = temp;
var temp = postDate[x];
postDate[x] = postDate[y];
postDate[y] = temp;
var temp = postUrl[x];
postUrl[x] = postUrl[y];
postUrl[y] = temp;
var temp = postLabels[x];
postLabels[x] = postLabels[y];
postLabels[y] = temp;
}

for (var i=0; i < postTitle.length-1; i++) {
for (var j=i+1; j<postTitle.length; j++) {
if (sortBy == "titleasc") { if (postTitle[i] > postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "titledesc") { if (postTitle[i] < postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "dateoldest") { if (postDate[i] > postDate[j]) { swapPosts(i,j); } }
if (sortBy == "datenewest") { if (postDate[i] < postDate[j]) { swapPosts(i,j); } }
}
}
}

// Mostrando la tabla

function displayToc(filter) {
var numDisplayed = 0;
var tocTable = '';
var tocHead1 = 'TITULO DEL POST';
var tocTool1 = 'Click para ordenar por título';
var tocHead2 = 'FECHA';
var tocTool2 = 'Click para ordenar por fecha';
if (sortBy == "titleasc") {
tocTool1 += ' (Descendente)';
tocTool2 += ' (Más nuevo primero)';
}
if (sortBy == "titledesc") {
tocTool1 += ' (Ascendente)';
tocTool2 += ' (Más nuevo primero)';
}
if (sortBy == "dateoldest") {
tocTool1 += ' (Ascendente)';
tocTool2 += ' (Más nuevo primero)';
}
if (sortBy == "datenewest") {
tocTool1 += ' (Ascendente)';
tocTool2 += ' (Más viejo primero)';
}
tocTable += '<table>';
tocTable += '<tr>';
tocTable += '<td class="toc-header-col1">';
tocTable += '<a href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col2">';
tocTable += '<a href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '</a>';
tocTable += '</td>';
tocTable += '</tr>';
for (var i = 0; i < postTitle.length; i++) {
if (filter == '') {
tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td></tr>';
numDisplayed++;
} else {
z = postLabels[i].lastIndexOf(filter);
if ( z!= -1) {
tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td></tr>';
numDisplayed++;
}
}
}
tocTable += '</table>';
if (numDisplayed == postTitle.length) {
var tocNote = '<span class="toc-note">Mostrando todos los ' + postTitle.length + ' posts<br/></span>'; }
else {
var tocNote = '<span class="toc-note">Mostrando ' + numDisplayed + ' posts con etiqueta \'';
tocNote += postFilter + '\' de '+ postTitle.length + ' posts en total<br/></span>';
}
var tocdiv = document.getElementById("toc");
tocdiv.innerHTML = tocNote + tocTable;
}

function toggleTitleSort() {
if (sortBy == "titleasc") { sortBy = "titledesc"; }
else { sortBy = "titleasc"; }
sortPosts(sortBy);
displayToc(postFilter);
}

function toggleDateSort() {
if (sortBy == "datenewest") { sortBy = "dateoldest"; }
else { sortBy = "datenewest"; }
sortPosts(sortBy);
displayToc(postFilter);
}

// Función principal y enlace para plegar
function showToc(etiqueta) {
postFilter = etiqueta;
if (tocLoaded) {
displayToc(postFilter);
var toclink = document.getElementById('toclink');
toclink.innerHTML = '<a href="javascript:hideToc();">» Ocultar tabla</a><br/><br/>';
}
else { alert("Espere. Todavía cargando su feed"); }
}

function hideToc() {
var toclink = document.getElementById('toclink');
toclink.innerHTML = '';
var tocdiv = document.getElementById('toc');
tocdiv.innerHTML = '';
}
//]]>
</script>

3. Bajamos en el código de nuestra plantilla buscando el gadget creado en primer lugar. Podemos hacerlo mediante el título (Indice - categorías) o por su ID (label1, label2...). Una vez localizado, tendremos algo así:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<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:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
<a expr:dir='data:blog.languageDirection' expr:href='&quot;javascript:showToc(\&quot;&quot; + data:label.name + &quot;\&quot;);&quot;' expr:title='&quot;Ver todos los posts etiquetados como &quot; + data:label.name'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>;

Ahí podeis ver insertado en verde lo que hay que incorporar, en lugar precisamente de la línea que se muestra tachada. Una vez hecho, se salvan los cambios con Guardar.

4. Ya sólo nos falta generar una llamada al script pasando por nuestro feed, el DIV de la tabla propiamente dicha (llamado TOC) y un enlace para poderla cerrar cuando estorbe. Eso es añadiendo un nuevo gadget HTML/JavaScript con el siguiente código:

<script src="http://NOMBRE_BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=500&amp;callback=loadtoc"></script>
<script src="http://NOMBRE_BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=501&amp;max-results=1000&amp;callback=loadtoc"></script>
<div id="toclink"></div>
<table align="center"><tbody><tr style="margin: 0px auto; text-align: center;"><td><div id="toc"></div></td></tr></tbody></table>

Antes de guardar, cambiamos NOMBRE_BLOG por el propio. La parte en gris es opcional y obligatoria sólo para blogs con más de 500 entradas y si se quieren mostrar todas. Si se tienen más de 1000, habrá que añadir otra línea con la misma estructura pero partiendo del último número de la anterior: 1001-1500, 1501-2000, etc. Aunque quizás lo mejor si tienes tantas entradas es que instales este último gadget no como idem sino insertando el código directamente en una entrada (en este caso, todo seguido, sin saltos de línea). De lo contrario podría demorar mucho la carga de la página ya que la primera tarea que realiza el script es precisamente cargar todos los datos de todas las entradas.

Guardamos y ya sólo nos queda trasladar el gadget justo encima de las entradas que parece el sitio más adecuado para mostrar la tabla. Si lo quereis en otro sitio, pues dónde os parezca.

Como cada cual tiene unos colores y unos anchos de columnas distintos, desde la parte Estilo índice categorías, podeis configurar esos atributos modificándolos al gusto.

Reto dedicado a ProyectoZX ;)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter