Resumen Posts 2: Extractos del texto

Hay muchísimas formas de mostrar los post de manera resumida; no sólo hay variantes usando scripts sino que también podemos definir en qué páginas se mostrarán resumidos.

Para responder a varias inquietudes, aquí comienza la explicación del método que utilizo aunque, en realidad, el primer paso es modificar el encabezado de las entradas para manipular la fecha de manera segura y no tener que estar lidiando con ella.

El LOOP de Blogger es la parte del código de la plantilla donde se muestran las entradas y se encuentra dentro de un INCLUDABLE [Ver/Ocultar Código Original [+]

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>
    <data:defaultAdStart/>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>
      <b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <b:include data='post' name='comments'/>
      </b:if>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:include data='post' name='comments'/>
      </b:if>
      <b:if cond='data:post.includeAd'>
        <b:if cond='data:post.isFirstPost'>
          <data:defaultAdEnd/>
        <b:else/>
          <data:adEnd/>
        </b:if>
        <div class='inline-ad'>
          <data:adCode/>
        </div>
        <data:adStart/>
      </b:if>
      <b:if cond='data:post.trackLatency'>
        <data:post.latencyJs/>
      </b:if>
    </b:loop>
    <data:adEnd/>
  </div>
  <!-- navigation -->
  <b:include name='nextprev'/>
  <!-- feed links -->
  <b:include name='feedLinks'/>
  <b:if cond='data:top.showStars'>
    <script src='http://www.google.com/jsapi' type='text/javascript'/>
    <script type='text/javascript'>
      google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
      function initialize() {
        google.annotations.setApplicationId(<data:top.blogspotReviews/>);
        google.annotations.createAll();
        google.annotations.fetch();
      }
      google.setOnLoadCallback(initialize);
    </script>
  </b:if>
</b:includable>

Es my largo porque está lleno de cosas que por lo general no usamos así que lo simplificamos un poco para quedarnos sólo con lo fundamental y tratar de entenderlo:

<b:includable id='main' var='top'>
  <div class='blog-posts'>
    <b:include data='top' name='status-message'/>
    <b:loop values='data:posts' var='post'>
      <b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:include data='post' name='comments'/>
      </b:if>
    </b:loop>
  </div>
  <b:include name='nextprev'/>
  <b:include name='feedLinks'/>
</b:includable>

Eso que vemos como b:loop es un bucle. Blogger recorre la lista de entradas (tantas como hayamos establecido en la Configuración) y ejecuta otra parte, otro INCLUDABLE; por último si es una página individual, le agrega los comentarios. La forma en que se mostrarán los post es lo que se encuentra en ese otro INCLUDABLE así que lo primero que vamos a hacer es interceptar esa parte, es decir, en lugar de mostrar las entradas, vamos a agregar alguna condición para que sólo se ejecute en determinados casos y en otros, se ejecute otro código personal. Esto, no es otra cosa que una variante del hack que muestra tanto en el blog de Gem@

como en El escaparate de Rosa

y que es el llamado PeekABooPost.

¿Qué condición pondremos? Eso puede variar, y en este ejemplo haremos lo mismo que hace PeekABooPost: el home se mostrará normal pero las páginas con listas de entradas (etiquetas, navegación, archivos) se mostrarán resumidas:

<b:includable id='main' var='top'>
  <div class='blog-posts'>
    <b:include data='top' name='status-message'/>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:blog.homepageUrl != data:blog.url'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:include data='post' name='ResumenPost'/>
        <b:else/>
          <b:include data='post' name='post'/>
        </b:if>
      <b:else/>
        <b:include data='post' name='post'/>
      </b:if>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:include data='post' name='comments'/>
      </b:if>
    </b:loop>
  </div>
  <b:include name='nextprev'/>
  <b:include name='feedLinks'/>
</b:includable>

Y justo debajo de </b:includable> agregamos nuesto nuevo INCLUDABLE:

<b:includable id='ResumenPost' var='post'>
  <!-- aqui luego pondremos el nuevo código -->
</b:includable>

Si ahora viéramos el blog, tanto el home como las entradas individuales no tendrían cambios pero ninguna página con listas de entradas mostraría algo así que sería hora de agregar nuestro código personal:

<b:includable id='ResumenPost' var='post'>
  <table cellpadding='0' cellspacing='0' class='post-resumen'><tbody>
  <tr>
    <td rowspan='2'>
      <h3><a expr:href='data:post.url'><data:post.title/></a></h3>
      <p class='txt-resumen' expr:id='&quot;resumen-&quot; + data:post.id'/>
    </td>
    <td class='celdaderecha'>
      <span class='lafecha-resumen' expr:id='&quot;fecha-&quot; + data:post.id'>
        <script type='text/javascript'>calendario(&#39;<data:post.timestamp/>&#39;);</script>
      </span>
    </td>
  </tr>
  <tr>
    <td class='celdaspan'>
      <a class='toggleresumenpost' expr:onclick='&quot;toggleResumenPost(\&quot;&quot; + data:post.id + &quot;\&quot;)&quot;' href='javascript:void(0);'>[+/-]</a>
    </td>
  </tr>
  </tbody></table>
  <div class='post-oculto' expr:id='&quot;dummy-&quot; + data:post.id'>
    <div class='post-body'>
      <p><data:post.body/></p>
      <div style='clear: both;'/>
    </div>
  </div>
  <script type='text/javascript'>resumenPost(&#39;<data:post.id/>&#39;);</script>
</b:includable>

Tratemos de entender todo eso que parece tan engorroso porque es la mejor manera de poder personalizarlo y armar cualquier otro modelo.

En la columna de la izquierda de la tabla colocaremos el titulo de la entrada y su resumen al que lo mostramos como un párrafo.

En la parte superior de la columna derecha irá la fecha que se mostrará usando un script que la descomponga (el mismo que usamos para las entradas normales) y debajo, un enlace que ejecutará otra función de JavaScript para expandir y contraer el post oculto.

Fuera de la tabla se ubica el post normal pero oculto y por último la llamada al script que resumirá la entrada.

La mayor parte de las etiquetas tienen un atributo class que nos permitirá personalizar cada sector y a varias de ellas les colocamos un ID único para poderlas identificar y decirle al script dónde debe escribir o qué elementos debe modificar.

Pongamos entonces el script antes de </head>:

<script type='text/javascript'>
//<![CDATA[

// RESUMEN POSTS
function resumenPost(idPOST) {
  var divAuxiliar = "dummy-" + idPOST;
  contenido = document.getElementById(divAuxiliar).innerHTML;
  resumen = contenido.replace(/<[^>]+>/g,'');
  longitud = 150; // máxima cantidad de caracteres a tener en cuenta para resumir la entrada
  var auxiliar = resumen.split(" ");
  var nueva ="";
  for(var i=0; i<auxiliar.length; ++i) {
    nueva = nueva.concat(auxiliar[i]) + " ";
    if(nueva.length > longitud) {break}
  }
  resumen = nueva +"...";
  var spanResumen = "resumen-" + idPOST;
  document.getElementById(spanResumen).innerHTML = resumen;
}

// PERMUTAR ESTADO
function toggleResumenPost(cual) {
   var elpost = "dummy-" + cual; 
   var elElemento=document.getElementById(elpost);
   if(elElemento.style.display == 'block') {
      elElemento.style.display = 'none';
   } else {
      elElemento.style.display = 'block';
   }
}

//]]>
</script>

Lo que faltaría es el CSS así que lo agregamos antes de </b:skin> y ahí deberemos usar nuestra imaginación, estas propiedades crearán lo que puede verse en este demo online:

.post-resumen { /* tabla post resumidos */
  border-bottom: 1px solid #444;
  height: 100px;
  margin: 30px 0 0;
  padding: 0 0 0 10px;
  width: 410px;
}
.post-resumen:hover {background-color: #000;}
.post-resumen td {position: relative;}

.post-resumen td.celdaderecha { /* la celdas con la fecha */
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  background-color: #333;
  text-align: center;
  vertical-align: top;
  width: 60px;
}
.post-resumen td.celdaspan { /* la celda con el enlace */
  background-color: #333;
  text-align:center;
  vertical-align:top;
  width: 60px;
}

.post-resumen h3 { /* el título de las entradas */
  color: skyBlue;
  font-family: Lucida Grande,sans-serif;
  font-size: 20px;
  font-weight: normal;
  margin: 0;
}
.post-resumen h3 a {
  color: skyBlue;
  font-family: Lucida Grande,sans-serif;
  font-size: 20px;
  font-weight: normal;
  text-decoration: none;
}

/* la fecha de las entradas */
.post-resumen span.lafecha-resumen {text-align: center;}
.post-resumen span.lafecha-resumen .lafechaDia {font-size: 24px;}
.post-resumen span.lafecha-resumen .lafechaMes {font-size: 14px;}
.post-resumen span.lafecha-resumen .lafechaAnio {font-size: 12px;}

/* el post resumidoen si mismo */
.txt-resumen {color: #CCC; margin: 5px;}

/* el enlace para expandir yy contraer */
a.toggleresumenpost {
  color: #87CEEB;
  font-size: 12px;
  text-align: center;
}
a.toggleresumenpost:hover {color: #FFF}

/* el post normal oculto */
.post-oculto {
  border-bottom: 1px dotted #333;
  display: none;
  margin:30px 0;
  padding-bottom:15px;
}

Para facilitar las cosas, la plantilla con el demo puede ser descargada en formato ZIP

ElHackerZ