Las fechas arriba, abajo y en todos lados

La forma en que Blogger maneja la fecha de los posts es bastante exótica, no sé si será porque le resulta fácil debido a la estructura de su base de datos o simplemente porque no se les ocurrió algo distinto y continúan haciendo lo mismo. En teoría, cada post tiene una fecha, de hecho, la vemos cuando abrimos una página individual pero, en la página principal, si hay varios posts publicados el mismo día, sólo vemos una.

En realidad, hay dos lugares donde definimos la forma de ver las fechas, en Diseño | Añadir y organizar elementos de la página, si editamos el elemento Entradas del blog, podemos establecer el formato de la fecha y eso es lo que se mostrará en el footer de los posts, por lo general, dentro de un bloque como este:

<div class='post-footer-line post-footer-line-1'>
  .......
  <span class='post-timestamp'>
    <b:if cond='data:top.showTimestamp'>
      <data:top.timestampLabel/>
      <b:if cond='data:post.url'>
        <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
          <abbr class='published' expr:title='data:post.timestampISO8601'>
            <data:post.timestamp/>
          </abbr>
        </a>
      </b:if>
    </b:if>
  </span>
  .......
</div>

Esa zona es fácilmente configurable ya sea con las herramientas de edición o modificando el código HTML; pero la fecha también se establece en la Configuración | Formato, allí es donde definimos la forma en que se verá la fecha, encima de cada entrada:

Formato de cabecera de fecha 23-jun-2008 23 de junio de 2008 lunes 23 de junio de 2008 23/06/08 lunes, junio 23, 2008 6/23/2008 6.23.2008 20080623 2008/06/23 2008-06-23 23.6.08 lunes lunes, junio 23 junio 23, 2008 23 junio 2008 23 junio, 2008

Y es esa el área que se hace difícil de manejar. En una plantilla típica, ese dato se muestra así:

<b:includable id='main' var='top'>
  .......
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'>
        <data:post.dateHeader/>
      </h2>
    </b:if>
  .......
  <!-- este es el loop de los posts -->
  <b:include data='post' name='post'/>
  .......
</b:includable>

La variable <data:post.dateheader/> es la que posee el dato y se encuentra justo antes del bucle que muestra los posts así que, como está ubicada allí, la fecha se muestra siempre arriba de los títulos.

Hace unos días, Alfonsete me preguntaba si era posible mostrar la fecha debajo del título y, en realidad, cambiarla de lugar es sencillo. Primero, buscamos el código:

<h2 class="date-header"><data:post.dateheader/></h2>

y para evitar problemas en el caso de querer restaurarlo, no lo eliminamos sino que lo "comentamos" para que no se ejecute:

<!-- <h2 class='date-header'><data:post.dateHeader/></h2> -->

Ahora, debemos "moverlo" para ponerlo justo debajo de los títulos así que buscamos este tipo de código:

<b:includable id='post' var='post'>
  .......
  <b:if cond='data:post.title'>
    <h3 class='post-title'>
      .......
      <data:post.title/>
      .......
    </h3>
    <!-- y justo aquí pegamos el código de la fecha -->
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>
    .......
</b:includable>

Simplemente pegamos el código resaltado, debajo del título.

Si queremos modificar cómo se ve, buscamos las definiciones CSS del elemento y modificamos las propiedades:

h2.date-header {
  .......
}

Ahora bien, uno podría suponer que haciendo esto, todas las entradas tendrán la fecha pero no es así, seguirá viéndose una sola vez. Es Blogger quien maneja esto y parece que no hay forma de cambiarlo a menos que usemos JavaScript.

Hace tiempo, luego de escribir sobre la forma de personalizar las fechas agregando calendarios, surgieron varias "quejas" respeto a que, esa limitación de Blogger hacía que los calendarios mostrados en los posts de igual fecha, quedaban vacíos o aparecía un texto que decía UNDEFINED. El problema, terminó por solucionarse modificando el script y podemos basarnos en eso para hacer lo mismo con la fecha cuando esta es un texto.

La idea es sencilla, vamos a usar esa limitación; ya que data:post.dateHeader es la fecha y, cuando el post tiene la misma fecha que otro anterior, data:post.dateHeader no contiene nada, lo que haremos es guardarlo cada vez que tiene un dato para que, si no lo tiene usar ese dato previamente guardado.

Otra vez buscamos el código sin importar dónde esté:

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Y lo reemplazaremos por esto:

<b:if cond='data:post.dateHeader'>
  <script>var ultimaFecha = '<data:post.dateHeader/>';</script>
  <h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
  <h2 class='date-header'>
    <script>document.write(ultimaFecha);</script>
  </h2>
</b:if>

Allí, si se cumple la primera condición (b:if) significa que es el primer post así que tiene una fecha por lo tanto, la guardamos en una variable llamada ultimaFecha. Luego, se muestra normalmente.

Si no se cumple la primera condición (b:else) significa que no es el primer post de ese día y por lo tanto para Blogger no tiene fecha así que usamos JavaScript para escribir la que habíamos guardado previamente:

document.write(ultimaFecha);

De esta manera, en todos los posts se mostrará la fecha de publicación.