Tratando de condicionar varias entradas

Esta es una respuesta a una pregunta de Samuel Rego que quiere hacer algo que tal vez no usemos todos los dias pero que creo que puede servir como idea genérica y ver hasta donde es posible manipular los códigos condicionales de Blogger.

Lo que desea hacer es que un widget específico se muestre en tres entradas y sólo en esas tres entradas de su blog.

La solución es, tal como lo intentó, anidar las condiciones, es decir, poner una dentro de la otra; eso puede lograrse, sólo se requiere paciencia pero, aún cuando se consiga, se encontrará con un problema; deberá repetir TODO el código tres veces o crear tres widgets diferentes lo cual es, como mínimo, engorroso así que la idea es ver si es posible simplificarlo.

Condicionar un post es sencillo, basta saber la URL de ese post y utilizar esta condición:

<b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada1.html&quot;'>
  .......
  ....... aquí colocaremos el código a ejecutar .......
  .......
</b:if>

Si lo que debemos condicionar son dos posts, haríamos esto:

<b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada1.html&quot;'>
  .......
  ....... aquí colocaremos el código a ejecutar .......
  .......
<b:else/>
  <b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada2.html&quot;'>
    .......
    ....... aquí colocaremos el código a ejecutar por segunda vez .......
    .......
  </b:if>
</b:if>

Y si tuviéramos que condicionar tres posts, esto:

<b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada1.html&quot;'>
  .......
  ....... aquí colocaremos el código a ejecutar .......
  .......
<b:else/>
  <b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada2.html&quot;'>
    .......
    ....... aquí colocaremos el código a ejecutar por segunda vez .......
    .......
  <b:else/>
    <b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada3.html&quot;'>
      .......
      ....... y aquí colocaremos el código a ejecutar POR TERCERA VEZ.......
      .......
    </b:if>
  </b:if>
</b:if>

Si el código a ejectuar es corto, es molesto repetirlo pero si es largo es un infierno y lo más probable es que nos equivoquemos; además, la plantilla se medirá por metros.

Como las condiciones no pueden modificarse ya que no hay códigos que nos permitan simplificarlas, lo que podemos hacer es reducir ese código a ejecutar para no tener que escribirlo tres veces y eso sí es algo que Blogger nos permite porque tiene una instrucción específica llamada include que es la clave de todo esto; su sintaxis elemental es esta:

<b:include name='miContenido'/>

donde el nombre (name) que le damos, debe ser único e irrepetible.

Lo que hace esto es INCLUIR cierto código que se encuentra en el mismo widget, un código que puede ser cualquier contenido y que debe estar colocado en una etiqueta especial llamada includable:

<b:includable id='miContenido'>

el ID es igual al nombre que que usamos en include.

Traducido al español
<b:include name='miContenido'/> leerá e incluirá el contenido de <b:includable id='miContenido'> en alguna parte del widget.

Todo widget de Blogger tiene, como mínimo, una etiqueta includable cuyo ID es siempre el mismo, se llama main:

<b:includable id='main'>
.......
</b:includable>

Es la parte principal del widget, la que manda, la que se ejecuta; desde ella, se pueden incluir otras así que lo que debemos hacer es partir nuestro widget en dos. Vamos a un ejemplo práctico. Agrego un elemento HTML, le doy un nombre y luego, lo busco en la plantilla expandiendo los artilugios; me encontraré con esto:

<b:widget id='HTML6' locked='false' title='FRANKI' type='HTML'>

<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>

</b:widget>

Sólo tiene un includable ya que es simple; voy a agregarle otro, pondré todo el código en ese nuevo y lo cargaré con include:

<b:widget id='HTML6' locked='false' title='FRANKI' type='HTML'>

<b:includable id='main'>
  <b:include name='franki'/>
</b:includable>

<b:includable id='franki'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>

</b:widget>

Si guardo y miro el blog, no habrá cambios, ambos códigos hacen exactamente lo mismo.

Ahora, entonces, podemos condicionar los tres posts con las limitaciones del caso pero, sin repetir el código de los contenidos:

<b:widget id='HTML6' locked='false' title='FRANKI' type='HTML'>

<b:includable id='main'>
  <b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada1.html&quot;'>
    <b:include name='franki'/>
  <b:else/>
    <b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada2.html&quot;'>
      <b:include name='franki'/>
    <b:else/>
      <b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada3.html&quot;'>
        <b:include name='franki'/>
      </b:if>
    </b:if>
  </b:if>
</b:includable>

<b:includable id='franki'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>

</b:widget>

Esto es lo que se puede ver en el mismo demo online si se navega y accede a estas tres entradas: 1 | 2 | 3. En ellas, se verá en la sidebar la cara del amigo Franki que no se verá en ninguna otra página.

Un detalle que también me preguntaban es más difícil de contestar en general ya que mucho depende de las plantillas. El tema es que muchas veces, al ocultar el contenido de un widget o condicionarlo, una parte de él se sigue viendo. Esto suele pasar si los elementos tienen algún tipo de propiedad CSS tal como margin o padding que hace que una etiqueta tenga una dimensión aún cuando no tenga contenido; lo mismo ocurre si tienen un borde o algún otro elemento gráfico que genere una altura.

La plantilla Mínima, por ejemplo, tiene una definición como esta:

sidebar .widget, .main .widget {
  border-bottom: 1px solid $bordercolor;
  margin: 0 0 0.5em;
  padding: 0 0 0.5em;
}

Como dije, no hay una solución genérica para ese detalle, se debería ver caso por caso; por ejemplo, en lugar de márgenes en los widgets pueden ponerse márgenes en los títulos; también sería bueno separar esa definción en dos ya que sino, afectará tanto a la sidebar como a las entradas y tal vez, no nos interese que tengan las misma propiedades:

.main .widget {
  .......
}
sidebar .widget {
  .......
}

Si se quiere mantener el borde, podría usarse otra clase genérica que es la del DIV que se ocultará y se llama widget-content:

.sidebar div.widget-content {
  .......
}