Etiquetas de widgets para los diseños

Si usas el tema de Diseños para crear la sección del cuerpo de tu blog, puedes usar widgets para agregar elementos de página; por ejemplo, fotos o un Blogroll.

Tipos de etiquetas

Esta sección describe el código HTML que puedes usar dentro de las etiquetas de cierre.

Inclusiones (b:include)

¿Cuándo debes usar las inclusiones?

Las inclusiones son muy útiles si tienes una selección de código que quieres volver a utilizar en varios lugares diferentes o solo incluir en determinadas circunstancias.

Para ello, escribe el contenido dentro de una etiqueta b:includable y, luego, usa b:include donde quieres que aparezca.

Formato

 

<b:includable id='main' var='thiswidget'>
  [Inserta el contenido que quieras aquí]
</b:includable>

 

Atributos

• id (obligatorio): Un identificador único compuesto por letras y números. Cada widget debe tener un "includable" con id='main' (principal).
• var (opcional): Un identificador compuesto por letras y números para remitir a datos de esta sección.

Si creas más "includables" con diferentes ID, no se mostrarán de forma automática. Sin embargo, si creas un "includable" con id='new' (nuevo), puedes remitir a él en tu "includable" principal con <b:include name='new' />, y se mostrará de esa manera.

Los siguientes son los atributos de la etiqueta b:include:

• name (obligatorio): Un identificador compuesto por letras y números. Debe coincidir con la ID de un b:includable existente en el mismo widget.
• data (opcional): Una expresión o fragmento de datos para pasar a la sección "includable". Se convertirá en el valor del atributo "var" en dicha sección.
• cond (opcional): Una expresión que hace que la inclusión solo se ejecute cuando el resultado es verdadero. Es igual que el atributo "cond" en una "b:if".

Ejemplo

A continuación, incluimos un ejemplo de uso de b:includable y b:include.

Lo más importante que debe comprenderse aquí es cómo la sección "main" (principal) incluye la sección "post" (entrada). Pasa una entrada ("post") que denomina "p", y la sección incluida remite a ella como la "var" "post"; luego, imprime el título.

Ten en cuenta que la inclusión solo funciona en la medida en que el índice sea menor de 10, de modo que, en este ejemplo, solo se mostraría un máximo de 10 entradas (el índice comienza en 0).

 

<b:includable id='main'>
  <b:loop var='p' index='index' values='posts'>
    <b:include name='post' data='p' cond='index < 10'/>
  </b:loop>
</b:includable>
<b:includable id='post' var='post'>
  Title: <data:post.title/>
</b:includable>

 

Salida de datos (data:)

Ejemplos

• <data:title/> imprimiría el título de un widget

• <data:photo.url/> - Size: <data.photo.width /> x <data.photo.height /> imprimiría atributos de un componente de una foto. Las fotos pueden tener componentes como la URL, la altura y el ancho. Al usar ".", estamos indicando que queremos la URL de la foto, no de otra cosa.

Consulta otros ejemplos

Consulta una lista completa de las etiquetas de datos de diseños compatibles.

 

Bucles (b:loop)

¿Cuándo debes utilizar b:loop?

La etiqueta b:loop te permite repetir una sección de contenido varias veces. Se utiliza con mayor frecuencia para imprimir cada una de las entradas de una lista de entradas de una página dada, o cada comentario, etiqueta, etc.

Formato

El siguiente es el formato general para usar bucles:

 

<b:loop var='identifier' values='set-of-data'>
  [el contenido repetido va aquí]
</b:loop>

 

La parte del identificador (i) puede ser un nombre a elección, que se utilizará para representar cada nuevo elemento de la lista, cada vez que pase por el bucle. El conjunto de datos que especifiques para los valores puede ser cualquier fragmento de datos descrito en el artículo sobre etiquetas de datos como lista de elementos.

Por ejemplo, en el widget de entradas del blog, posts (entradas) es una lista. En cada entrada, se repetirá un código como el siguiente para imprimir su título, y, a ambos lados del título, habrá etiquetas de cabecera.

 

<b:loop var='i' values='data:posts'>
  <h2><data:i.title/></h2>
</b:loop>

 

Fíjate cómo "i" toma el valor de las entradas de a una para obtener el título de cada una de ellas.

Intervalo numérico

La etiqueta de bucle te permite iterar un intervalo numérico inclusivo, como "1 a 3" o "-3 a -9", donde el valor de la variable toma el valor del número. El siguiente ejemplo crearía una lista no ordenada de 1, 2 y 3.

 

<b:loop var='i' values='1 to 3'>
  <li><data:i /></li>
</b:loop>

 

Atributo de índice

Las etiquetas de bucle también tienen un atributo opcional de índice ("index"), que da el índice basado en cero de la iteración actual del bucle.

 

<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>Index: <data:index />, Number: <data:number /></li>
  </b:loop>
</ul>

 

Este ejemplo crearía una lista no ordenada de:

• Índice: 0, Número: 9
• Índice: 1, Número: 8
• Índice: 2, Número: 7

If, elseif y else (b:if)

¿Cuándo debes usar if, elseif o else?

Puedes usar las etiquetas b:if, b:elseif y b:else para mostrar determinado contenido en ciertos casos y otro en circunstancias diferentes. Por ejemplo, podrías querer mostrar un determinado texto en la página principal y otro al ver entradas individuales.

Formato

 

<b:if cond='condition'>
  [el contenido que se mostrará si la condición es verdadera]
<b:elseif cond='another condition'/>
  [el contenido que se mostrará si las condiciones previas if o elseif no fueron verdaderas y esta condición elseif es verdadera]
<b:else/>
  [el contenido que se mostrará si no se cumple ninguna condición if ni elseif]
</b:if>

 

Las etiquetas b:elseif y b:else son opcionales. Si no están presentes, el resultado será el contenido incluido en la sección b:if o no se mostrará nada. Ten en cuenta, sin embargo, que el </b:if> de cierre es obligatorio en todos los casos.

En "condition" (condición), puedes incluir cualquier cosa que desees que se evalúe como verdadera o falsa. Algunas etiquetas de datos implican valores verdaderos o falsos en sí mismos; por ejemplo, allowComments (permitir comentarios) en una entrada. Con otros fragmentos de datos, puedes compararlos con valores específicos para obtener un resultado verdadero o falso. Estos son algunos ejemplos:

• <b:if cond='data:post.showBacklinks'>
  Verdadero si la entrada actual está configurada para mostrar ("show") vínculos externos.
• <b:if cond='data:blog.pageType == "item"'>
  Verdadero si la página actual es una página de elemento (página de entrada).
• <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
  Verdadero si la página actual es una página de elemento (página de entrada) y la entrada actual está configurada para mostrar vínculos externos.
• <b:if cond='data:displayname != "Manuel"'>
  Verdadero si ese no es el nombre que Manuel quiere mostrar ("displayname").
• <b:if cond='data:displayname == "Manuel" or data:blog.pageType == "static_page"'>
  Verdadero si Manuel es el nombre que se quiere mostrar o si la página actual es una página estática ("static"), no una página de entrada.
• <b:if cond='data:post.numComments > 1'>
  Verdadero si la entrada actual tiene más de un comentario.
• <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
  Verdadero si la página actual es una entrada específica o una página.

Conmutadores (b:switch)

¿Cuándo debes usar un conmutador?

La etiqueta b:switch es similar a una etiqueta b:if con varias etiquetas b:elseif. La ventaja de una rama "switch" es que no tienes que repetir el nombre de la variable. Se puede ver con claridad qué define cada caso y cuál es el caso predeterminado.

Formato

<b:switch var='[Expresión de datos]'>
<b:case value="[Valor 1]" />
 [Resultado si la evaluación de la variable es igual a Valor 1]
<b:case value="[Valor 2]" />
 [Resultado si la evaluación de la variable es igual a Valor 2]
[… y cualquier otro valor]
<b:default />
 [Resultado si la evaluación de la variable no es igual a ninguna otra etiquetada como "b:case"]
</b:switch>

Ejemplo

Este ejemplo indica cómo mostrar distintas cabeceras para cada tipo de página.

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>Página</h1>
<b:case value="item" />
  <h1>Entrada</h1>
<b:default />
  <h2>Entradas del blog</h2>
</b:switch>

Expresiones de atributos (expr:)

¿Cuándo debes usar las expresiones?

Con el atributo "expr", puedes configurar valores de atributos basados en los valores del diccionario de datos. 

Ejemplos

• <a expr:href='data:blog.homepageUrl'>Página principal</a>
  Un vínculo con la URL de la página principal del blog.
• <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Entradas RSS</a>
  Un vínculo con la URL del feed RSS de las entradas del blog. El operador "+" une las dos cadenas.
• <a expr:class='data:post.allowComments ? "comment" : "no-comment">Comentario</a>
  Un vínculo con la clase "comment" cuando los comentarios están permitidos y "no-comment" cuando no lo están. El operador ternario (?:) adopta el valor booleano dado y toma el primer valor (después del signo "?") si el booleano es verdadero o el segundo (después de ":") si es falso.

Expresiones evaluadas (b:eval)

¿Cuándo debes usar una expresión evaluada?

Con la etiqueta b:eval, puedes evaluar una expresión más complicada que una etiqueta de datos regular.

Formato

<b:eval expr='[Expresión]' />

Ejemplos

• min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
  Muestra una altura relativa calculada en función de un nuevo valor de ancho.
• <b:eval expr="data:post.labels[0].url" />
  Muestra la URL de la primera etiqueta de la entrada.
• <b:eval expr='data:post.allowComments ? "Comentario" : "Comentarios inhabilitados" />
  Si están permitidos los comentarios, muestra "Comentario". Si no lo están, muestra "Comentarios inhabilitados". En esta expresión, se utiliza el operador ternario.

Alias de variables (b:with)

¿Cuándo debes usar un alias de variables?

Con la etiqueta b:with, puedes almacenar el valor de una expresión computada de manera temporal para no tener que insertar expresiones complicadas.

Formato

<b:with var='myComputedValue' value='[Expresión de datos]' />

Ejemplos

Si deseas usar un atributo de estilo complicado basado en variables de datos, puedes computarlo antes que el resto del código HTML, de modo que el código HTML anidado resulte más fácil de leer.

<b:with var='style'
       value='"background-image: url(\"" + data:sourceUrl "\"); "
           + " width: " + data:width + "px; " '>
 <div id='header-outer'>   
   <div id='header-inner' expr:style='data:style'>
     <h1>Mi cabecera</h1>
   </div>
 </div>
</b:with>

Ten en cuenta que la variable solo existirá para los nodos secundarios de la etiqueta b:with.

Consulta un ejemplo

Haz clic para ver un ejemplo de uso de todas estas etiquetas en el código HTML de un widget PageList (lista de página) de tu blog.

Ejemplo

En este widget, se muestran ejemplos de uso de las etiquetas b:widget, b:includable (y b:include), b:if (y b:else) y b:loop.

 

<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:mobile'>
        <select expr:id='data:widget.instanceId + "_select"'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option> 
          </b:if>
        </b:loop>
        </select>
        <span class='pagelist-arrow'>&amp;#9660;</span>
      <b:else/>
        <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          <b:else/>
            <li>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          </b:if>
        </b:loop>
        </ul>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>