DE CERVEZAS y otras cosas: Seguir leyendo (2º bobo-tutorial)

Como verán, he estado trasteando los últimos días con el template del blog. Para tener una sección con las referencias, pies de página, con su propio estilo. Y luego para conseguir un cuadro desplegable en el que ubicar los posts relacionados a cada artículo. Como salió, me sentí fuerte, poderoso e informático y decidí conseguir que la página principal del blog mostrase sólo el inicio de los posts, junto con una enlace "Seguir leyendo" al post completo.

Lo he conseguido. Pero el mérito no es mío, ya que al final copié. De Hackosphere, para ser más exactos, que es un blog de donde puedo aprender bastante para ir jugando. Como no tiene mucho sentido que yo vuelva a explicar el procedimiento que ya explica el autor del "truco" (aunque luego veremos que algo de sentido sí tiene), casi mejor explico por qué funciona y qué es lo que intenté hacer yo. Así de paso comento un poco lo que he aprendido.

Vale. Lo primero que hice fue bajar la página principal de mi blog y el template. Quería comparar la estructura de la página con el template. Sabiendo qué tendría que cambiar en la página .html para conseguir mis objetivos podría identificar en qué lugar del template debía realizar los cambios. Fácil y sencillo si cuentas con un editor de HTML (Dreamweaver, por ejemplo).

Encontré que todos los posts de la página principal se ubicaban en unas "divisiones" del texto, llamadas post-body. Los contenedores básicos de HTML se marcan con la etiqueta <div>. Al buscar post-body en el template encontré una única linea: la que buscaba.

Esto ya es el pie, donde pone el autor, hora...

Entendía poco, pero lo suficiente para saber que data:post.body es información que guarda Blogger y hace referencia al contenido completo de post. Bueno, lo primero que hice fue añadir una sección bajo el post (que incluiría la referencia al post entero), aunque ésta sólo debía aparecer en la página principal y no en el resto. ¿Cómo se hace eso?. Pues de la misma manera que se hace con los comentarios. Tiene que haber una condición antes de los comentarios que indique si estamos o no en la página principal. La encontré, y, añadiendo la información de la referencia a la entrada (que aparece en todo título de Blogger Beta), la cosa quedó así:

<b:if cond='data:blog.pageType != "item"'>
<A expr:href='data:post.url'>Ver el resto de la entrada</A>
</b:if>

Lo siguiente era conseguir: a) limitar la información que Blogger enviaba a la página o b) limitar el tamaño del párrafo y ocultar la información de sobra. Como de la a) no tenía ni repajolera idea, intenté la b. Lo único que se me ocurrió fue "tapar" esa información con las siguientes secciones, poniéndolas "encima" (para eso está el atributo z-index de las hojas de estilo). De todos modos parte de los post tenían que ser tapados por los siguientes post con partes visibles... y otras ocultas, así que la cosa no tenía solución. No encontré nada en HTML ni en las hojas de estilo que me ayudara.

Y es que la solución venía a través de funciones Javascript, según me enteré al leer el post de Hackosphere, que invitaba a copiar al template esto. Las funciones Javascript son funciones en un sencillo lenguaje de programación desde las que se puede hacer referencia a elementos del documento HTML. Como programación "normal" pero gastando los identificadores de los elementos HTML para utilizarlos como variables.

Para nuestro caso, lo que queremos es que una parte del documento quede visible en ciertas circunstancias. Para ello deberemos dividir los posts en dos "partes". Esta era la clave, en la que no había pensado (pese haber hecho algo parecido para mostrar y ocultar los posts relacionados). Las partes en que dividiremos el post serán estas:

Aquí va la entradilla
<span id="fullpost" >A partir de aquí va el resto del código<span>

Como se ve, hemos gastado el elemento <span> y hemos identificado el resto del código, llamándolo fulltext (aunque sería más apropiado llamarle restoftext). Lo que haremos ahora es ocultar esta parte en la página principal. Eso se hace modificando, desde el template el propio código de la página, cosa que yo tampoco sabía que se podía hacer. Pongo el código y explico qué es cada cosa:

/*aquí añadimos un identificador del post a la sección*/
<div class='post-body' expr:id='"post-" + data:post.id'>
/*Si no se trata de la página principal...*/
<b:if cond='data:blog.pageType == "item"'>
/*la sección fullpost del documento se mostrará inline*/
<style>#fullpost{display:inline;}</style>
/*Este es el artículo*/
<p><data:post.body/></p>
/*Si estamos en la página principal...*/
<b:else/>
/*la sección fullpost no se mostrará...*/
<style>#fullpost{display:none;}</style>
/*...pero el post sigue estando ahí, enterito!*/
<p><data:post.body/></p>
/*Este es el link al artículo completo*/
<span id='showlink' style='font-size:80%;'>
<a expr:href='data:post.url'>Seguir leyendo </a>
</span>
/*Y esta es la función que no muestra el enlace si el post no tiene fulltext*/
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

Y ya está. Y si alguien, por casualidad, se ha molestado en leer el post de donde sale el truco, se preguntará (con toda la razón del mundo): ¿y para qué leches valen las funciones Javascript hideFull y showFull?. Pues para nada, al menos en mi blog. En realidad sirven para mostrar y ocultar el texto entero del post en la página principal. Y como eso no era lo que quería, no he copiado estas funciones a mi template. Me juego un pie que más de uno las tiene en su blog, cargándolas cada vez que visita la página principal sin gastarlas. Hay un errorcillo, y es que al visitar las entradas anteriores en la página principal (que no tienen entradilla y fulltext) sigue apareciendo el enlace a la entrada completa, pero tampoco me preocupa demasiado.

De todos modos, aunque me habría gustado hacer todo este proceso yo sólo, también es importante haber aprendido más cosas. Ahora que entiendo cómo funciona un poco todo este tema podré trastear un poco más con Blogger, al cual le estoy cogiendo cariño.

CSS Reference. Lista de atributos CSS.
XHTML Reference. Para saber qué es lo que compone las páginas.
Guía breve de XHTML. En castellano.

Posts relacionados