miércoles, 29 de junio de 2011

Navegar etiquetas debajo de las entradas

Si entendí bien la pregunta de Josema, su idea es que, cuando se haga click en el enlace de una etiqueta, las entradas de esa etiqueta se muestren así como normalmente se muestran las entradas relacionadas debajo de cada post,es decir, una imagen y un resumen de la misma.

Hace mucho tiempo había puesto algo parecido que requería de la librería Prototype y que terminé quitando porque ... no me acuerdo por qué pero seguro que era una buena razón o no.

Ahora repito la experiencia y veremos qué pasa pero, sin librerías extras ya que luego de un par de años y doscientos mil quinientos treinta y dos errores, más o menos he logrado comprender como funciona esto de Json que es, claro, lo que debe usarse en cualquiera de estos casos porque no hay otra manera de filtrar y acceder a los datos de Blogger que no sea leyendo los feeds.


Lo que cuento es lo que puede verse en la parte inferior de las entradas individuales de este blog; allí, se ven las etiquetas que tiene la entrada (salvo cuando me olvido de ponerlas) y debajo, las entradas relacionadas que también se leen con Json y muestran cuatro entradas tomadas al azar. Los enlaces de esas etiquetas, abren las páginas por defecto que crea Blogger que son de tipo:

http://miblog.blogspot.com/search/label/NOMBRE_etiqueta

La idea es reemplazar esos enlaces para que, en lugar de abrir una página, se puedan ver sin salirse de la página y navegar por ellas, avanzando o retrocediendo por todas las entradas que existan con esa etiqueta, sin importar si son veinte o cientos ya que intentaremos no colapsar el sitio, cargando los scripts uno por uno y borrándolos de la memoria una vez que ya no se usan.

El criterio básico es utilizar el mismo esquema que en esta otra entrada y como no puedo pensar en abstracto y no existe un esquema idéntico en todas las plantillas, me limito a mostrar qué hice y las variaciones deberán ser investigadas ya que son casi infinitas.

Primero, expando la plantilla y busco el lugar donde tengo agregados los posts relacionados y allí, haré dos cosas, indicaré la altura del DIV que los contiene y debajo, agregaré una serie de etiquetas con IDs específicos que son en aquellas donde el script escribirá los datos:
<div class='post-footer-line post-footer-line-4'>
<div id='postsrelacionados' style='height:190px;'>
<script type='text/javascript'>mostrarrelacionados();</script>
</div>
<div style='clear:both;'/>
</div>

<div class='post-footer-line post-footer-line-5'>
<div id='etiquetasbajopost' style='height:0px;'>
<div id='navetiquetas'/>
<div id='navetiquetassel'/>
<div id='navetiquetasfooter'/>
</div>
</div>
Si guardo, todo queda igual que antes, los posts relacionados no cambian y debajo hay etiquetas sin contenido que tienen altura cero justamente para ocultarlas ya que intentaré permutar entre ellos y el nuevo sistema, ocultando uno cuando se muestra el otro y viceversa.

Busco ahora el LOOP donde Blogger escribe las etiquetas y por las dudas, condiciono los enlaces porque sólo quiero que esto funcione en las páginas individuales:
<b:loop values='data:post.labels' var='label'>
.......
<b:if cond='data:blog.pageType == "item"'>
<a expr:onclick='&quot;setnavetiquetas(\&quot;&quot; + data:label.name + &quot;\&quot;);return false;&quot;' href='javascript:void(0);' rel='tag'><data:label.name/></a>
<b:else/>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
.......
</b:loop>
Y ahora, el script que va antes de </head> que también podemos condicionar y cuyo contenido puede verse en este archivo de texto


Como siempre, algo de estilo a gusto de cada uno que también ponemos antes de </head>:

No hay comentarios:

Publicar un comentario