Sumarios rápidos para Blogger. Seis versiones

Siempre me cuesta poner un título a las entradas que publico para que sean explicativos y al mismo tiempo no demasiado largos, pero me sale regular y por eso tengo que ir casi siempre explicando en primer lugar qué veremos tras ellos.

En este caso lo de rápidos intenta hacer alusión a dos características distintas del código que pondré más adelante. Por un lado que los sumarios se montan sin necesidad de JavaScript, simplemente aprovechando algunas etiquetas data que Blogger utiliza.

Eso hace más ligera la carga de las páginas de navegación porque no se cargarán todas con su correspondiente contenido, sino sólo un breve resumen de cada una. Y con respecto a hacerlo con JavaScript, pues el argumento es el mismo, ya que para resumir con ese lenguaje primero hay que cargarlo todo y luego se acorta.


Y rápidos también porque esto va a ser prácticamente cuestión de copiar y pegar, pues ya vimos en la segunda mitad de esta otra entrada para qué servía cada parte y allí podéis acudir si lo necesitáis, así que sólo esbozaré un poco cómo funciona esto.

---

Blogger usa data:post.body para almacenar el contenido de cada post y eso es lo que aparece en una plantilla sin modificar para escribir dicho contenido, tras el título y antes del pie de post. Lo que haremos para crear los sumarios será usar otras variables data distintas que contienen lo imprescindible para lo que queremos lograr: una miniatura, un pequeño resumen y el enlace a la entrada (Leer Más).

Por tanto, indirectamente ya he dicho dónde habría que pegar todo este código: en lugar de <data:post.body/>. Sólo hay que tener cuidado con hacerlo con la que corresponde a las plantillas normales (no la de móviles).


Pero tendremos que echar mano además de una serie de condiciones para que todo salga bien, pues no queremos resumir en todas partes sino sólo en la página de Inicio, en las de Archivo y en el resto de las de navegación.

Además tendremos que comprobar entre otras cosas si las entradas a resumir tienen incluido el corte <!--more--> para que este no se duplique.

Si añadimos la posibilidad de no comprimir los posts para cuando exista ese corte y también el poder mostrar la primera entrada de cada página completa, pues el anidamiento de condiciones se complica un poco. Pero sin miedo, que las condiciones anidadas son sólo una sucesión de puertas que nos van marcando el camino en una dirección u otra.

Barajando todo esto y teniendo en cuenta los casos más habituales, a mí me salieron estas seis combinaciones, que como decía al principio son sólo para copiar y pegar. Comentado al principio, lo que hace cada uno.

<!-- SUMARIOS. TODOS LOS POSTS RESUMIDOS. TODOS CON SNIPPET AUTOMATICO -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <data:post.body/>
<b:else/>
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
 <b:else/>
    <b:if cond='data:post.snippet'>
     <b:if cond='data:post.thumbnailUrl'>
      <div class='Image thumb'>
      <img expr:src='data:post.thumbnailUrl'/>
      </div>
     </b:if>
     <data:post.snippet/>
     <b:if cond='data:post.hasJumpLink'>
     <b:else/>
      <div class='jump-link'>
      <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
     </b:if>
    <b:else/>
     <data:post.body/>
    </b:if>
 </b:if>
</b:if>

<!-- SUMARIOS. TODOS LOS POSTS RESUMIDOS. CON PRIORIDAD AL CORTE MANUAL -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <data:post.body/>
<b:else/>
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
 <b:else/>
  <b:if cond='data:post.hasJumpLink'>
   <data:post.body/>
  <b:else/>
    <b:if cond='data:post.snippet'>
     <b:if cond='data:post.thumbnailUrl'>
      <div class='Image thumb'>
      <img expr:src='data:post.thumbnailUrl'/>
      </div>
     </b:if>
     <data:post.snippet/>
     <div class='jump-link'>
     <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
     </div>
    <b:else/>
     <data:post.body/>
   </b:if>
  </b:if>
 </b:if>
</b:if>

<!-- SUMARIOS. PRIMER POST COMPLETO EN TODO TIPO DE PAGINAS. RESTO CON SNIPPET AUTOMATICO -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <data:post.body/>
<b:else/>
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
 <b:else/>
   <b:if cond='data:post.isFirstPost'>
    <data:post.body/>
   <b:else/>
     <b:if cond='data:post.thumbnailUrl'>
      <div class='Image thumb'>
      <img expr:src='data:post.thumbnailUrl'/>
      </div>
     </b:if>
     <data:post.snippet/>
     <b:if cond='data:post.hasJumpLink'>
     <b:else/>
      <div class='jump-link'>
      <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
     </b:if>
   </b:if>
 </b:if>
</b:if>

<!-- SUMARIOS. PRIMER POST COMPLETO EN TODO TIPO PAGINAS. RESTO CON PRIORIDAD AL CORTE MANUAL -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <data:post.body/>
<b:else/>
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
 <b:else/>
   <b:if cond='data:post.isFirstPost'>
    <data:post.body/>
   <b:else/>
    <b:if cond='data:post.hasJumpLink'>
     <data:post.body/>
    <b:else/>
     <b:if cond='data:post.thumbnailUrl'>
      <div class='Image thumb'>
      <img expr:src='data:post.thumbnailUrl'/>
      </div>
     </b:if>
     <data:post.snippet/>
     <div class='jump-link'>
     <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
     </div>
    </b:if>  
   </b:if>
 </b:if>
</b:if>

<!-- SUMARIOS. PRIMER POST COMPLETO SOLO EN HOME. RESTO CON SNIPPET AUTOMATICO -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <data:post.body/>
<b:else/>
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
 <b:else/>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost'>
    <data:post.body/>
   <b:else/>
     <b:if cond='data:post.thumbnailUrl'>
      <div class='Image thumb'>
      <img expr:src='data:post.thumbnailUrl'/>
      </div>
     </b:if>
     <data:post.snippet/>
     <b:if cond='data:post.hasJumpLink'>
     <b:else/>
      <div class='jump-link'>
      <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
     </b:if>
   </b:if>
  <b:else/>
     <b:if cond='data:post.thumbnailUrl'>
      <div class='Image thumb'>
      <img expr:src='data:post.thumbnailUrl'/>
      </div>
     </b:if>
     <data:post.snippet/>
     <b:if cond='data:post.hasJumpLink'>
     <b:else/>
      <div class='jump-link'>
      <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
     </b:if>
  </b:if>
 </b:if>
</b:if>

<!-- SUMARIOS. PRIMER POST COMPLETO SOLO EN HOME. RESTO CON PRIORIDAD AL CORTE MANUAL -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <data:post.body/>
<b:else/>
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
 <b:else/>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost'>
    <data:post.body/>
   <b:else/>
    <b:if cond='data:post.hasJumpLink'>
     <data:post.body/>
    <b:else/>
     <b:if cond='data:post.thumbnailUrl'>
      <div class='Image thumb'>
      <img expr:src='data:post.thumbnailUrl'/>
      </div>
     </b:if>
     <data:post.snippet/>
     <div class='jump-link'>
     <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
     </div>
    </b:if>  
   </b:if>
  <b:else/>
    <b:if cond='data:post.hasJumpLink'>
     <data:post.body/>
    <b:else/>
     <b:if cond='data:post.thumbnailUrl'>
      <div class='Image thumb'>
      <img expr:src='data:post.thumbnailUrl'/>
      </div>
     </b:if>
     <data:post.snippet/>
     <div class='jump-link'>
     <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
     </div>
    </b:if>   
  </b:if>
 </b:if>
</b:if>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter