Jugando con los posts (Sólo títulos)

En estos días, Carlos me preguntaba si existía una forma de mostrar la página principal del blog donde sólo se vieran los títulos y un enlace que abriera las páginas individuales pero, sin aplicar ninguno de los trucos para que se ocultara el contenido y se expandieran. La idea era tener una lista tipo índice cronológico que se actualizara automáticamente.

Lo primero que se me ocurre es el método más engorroso, debemos agregar un nuevo elemento blog a la plantilla y hacer que uno funcione en la página principal y el otro en las páginas individuales. Lo mejor para eso es crearlo manualmente desde el código HTML donde buscamos:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>

y lo cambiamos por:

<div id='main-wrapper'>
<b:if cond='data:blog.pageType == "item"'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
<b:else/>
<b:section class='main' id='mainHOME' showaddelement='yes'>
<b:widget id='Blog2' locked='true' title='Entradas pagina principal' type='Blog'/>
</b:section>
</b:if>
</div>

Ahora, tendríamos que modificar el elemento Blog2, quitar los includes que no sean necesarios y hacer las modificaciones que nos gusten ... muy complicado para mi gusto.

Una forma más sencilla es pensar, bueno, si lo que quiero es una lista y sólo poder ingresar a las páginas individuales, no necesito nada más, no necesito el autor ni las etiquetas ni la cantidad de comentarios ni ranking ni posts relacionados, sólo necesito el título y el enlace; nada más.

Y eso, podemos resolverlo con bastante sencillez usando los condicionales. Lo que necesitamos es ubicar esa condición en el lugar preciso que es dentro de este INCLUDABLE que vemos si expandimos los artilugios:

<b:includable id='post' var='post'>
... el código actual ...
</b:includable>

El contenido de eso es muy largo y varia mucho de una plantilla a otra así que no vale la pena mostrarlo, sólo hay que saber que no tocaremos el contenido existente sino que lo condicionaremos para que se ejecute sólo en las paginas individuales y de esta manera, toda esa parte del blog no cambiará:

<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType != "item"'>
<!--  ... aquí pondremos el nuevo código ... -->
<b:else/>
... el código actual que no tocamos ...
</b:if>
</b:includable>

Si en este momento guardáramos la plantilla, la página principal de nuestro blog no mostraría ninguna entrada pero cualquier página individual seguiría funcionando como antes.

Entonces, lo que faltaría poner es alguna clase de código que nos mostrara el título y el enlace a cada entrada así que deberíamos reemplazar esto:

<!--  ... aquí pondremos el nuevo código ... -->

por un código cualquiera; por ejemplo:

<div class='postResumen'>
<div class='enlaceResumen'>
<data:post.title/> <a expr:href='data:post.url'>Lee más</a>
<div style='clear: both;'/>
</div>
</div>

¿Qué es lo hay ahí? Un bloque al que le asigno una clase llamada postResumen que contendrá cada titulo y dentro de ese bloque, otro con una clase a la que llamo enlaceResumen y a las que luego daré propiedades CSS.

data:post.title es el título de cada entrada
data:post.url es la URL de cada entrada y con ellas se crean los enlaces

¿Podrían agregarse otros datos? Sí. Hay algunos a los que se puede acceder:

data:post.author es el nombre del autor de la entrada
data:post.timestamp es la hora de publicación de la entrada
data:post.numComments es la cantidad de comentarios
data:post.dateHeader es la fecha pero tendrá las mismas restricciones de siempre, si hay varias entradas con la misma fecha, sólo se mostrará una

Las etiquetas de la entrada también pueden listarse usando el mismo código que en las entradas individuales:

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

La cantidad de comentarios puede mostrarse usando el código normal:

<b:if cond='data:post.numComments == 0'>
Sin Comentarios
<b:else/>
<b:if cond='data:post.numComments == 1'>
1 Comentario
<b:else/>
<data:post.numComments/> Comentarios
</b:if>
</b:if>

El CSS de esa sección puede ser cualquier cosa y dependerá de la imaginación de cada uno. Para el ejemplo que he colocado en un blog de pruebas, las definiciones son las siguientes:

.postResumen {
background-color: #EEEEEE;
height: 52px;
margin: 10px 0 0;
}
.enlaceResumen {
font-weight: bold;
line-height: 32px;
padding: 0 0 0 10px;
}
.enlaceResumen a {
color: CornflowerBlue;
float: right;
font-size: 11px;
font-weight: normal;
margin: -32px 10px 0;
}
.enlaceResumen a:hover{
color:CornflowerBlue;
text-decoration:none;
}
.comentariosResumen {
float: right;
font-size: 11px;
font-weight: normal;
padding-right: 10px;
}

Y el código HTML utilizado es el siguiente:

<div class='postResumen'>
<div class='enlaceResumen'>
<data:post.title/> <a expr:href='data:post.url'>Lee el artículo y coméntalo &#187;</a>
</div>
<div class='comentariosResumen'>
<b:if cond='data:post.numComments == 0'>
Sin Comentarios
<b:else/>
<b:if cond='data:post.numComments == 1'>
1 Comentario
<b:else/>
<data:post.numComments/> Comentarios
</b:if>
</b:if>
</div>
<div style='clear: both;'/>
</div>