Widgets para Blogger

Tags de widget para layouts do Blogger

Ao usar o modelo Layouts para criar a seção de corpo do seu blog, você pode usar widgets para adicionar elementos de página, como imagens e uma lista de links.

Tipos de tags

Esta seção descreve os códigos HTML que você pode usar dentro das tags de fechamento.

Includes (b:include)

Quando usar includes

As tags includes são mais úteis se você tiver uma seção de código que queira reutilizar em vários locais diferentes ou incluir somente em determinadas circunstâncias.

Para fazer isso, escreva o conteúdo dentro de um b:includable. Em seguida, use b:includeonde quiser que ele apareça.

Formato

 

<b:includable id='main' var='thiswidget'>
  [insira o conteúdo desejado aqui]
</b:includable>

 

Atributos

• id (obrigatório): um identificador exclusivo composto de letras e números. Cada widget precisa ter um includable com id='main'.
• var (opcional): um identificador composto de letras e números para fazer referênciaa dados nesta seção.

Se você criar mais includables com diferentes IDs, eles não serão exibidos automaticamente. No entanto, se você criar um includable com id='new', será possível fazer referência a ele no seu includable principal com <b:include name='new' /> e ele será exibido dessa forma.

Atributos para a tag b:include:

• name (obrigatório): um identificador composto de letras e números. Ele precisa corresponder ao ID de um b:includable existente no mesmo widget.
• data (opcional): uma expressão ou um dado a ser transmitido para a seção includable. Isso se tornará o valor do atributo thevar no includable.
• cond (opcional): uma expressão que faz com que include seja executado somente quando seu resultado for true. É o mesmo que o atributo cond em b:if.

Exemplo

Apresentamos aqui um exemplo de como usar b:includable e b:include.

A principal questão a ser compreendida é como a seção "main" inclui a seção "post". Ela é transmitida com uma postagem que é chamada de "p" e a seção incluída faz referência a ela como sua variável "post" e, em seguida, imprime o título.

Observe que include executa somente o índice inferior a 10. Portanto, um máximo de 10 postagens seriam renderizadas nesse exemplo (o índice inicia com 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'>
  Título: <data:post.title/>
</b:includable>

 

Saída de dados (data:)

Exemplos

• <data:title/>: imprimiria o título de um widget

• <data:photo.url/> - Tamanho: <data.photo.width /> x <data.photo.height />: imprimiria atributos de impressão de um componente de foto. Uma foto pode ter componentes como url, height e width. O uso da notação "." indica que queremos o URL desta foto em vez de outro.

Mais exemplos

Veja nossa lista completa de tags de dados de layouts aceitas.

 

Loops (b:loop) 

Quando usar b:loop

A tag b:loop permite que você repita uma seção de conteúdo várias vezes. Ela é mais comumente usada para impressão de cada postagem em uma lista de postagens de uma determinada página, ou cada comentário ou cada etiqueta etc.

Formato

O formato geral de uso de loops é o seguinte:

 

<b:loop var='identifier' values='set-of-data'>
  [o conteúdo é inserido aqui]
</b:loop>

 

A parte "identifier" (i) pode ser qualquer nome que você escolher e será usada para cada novo item da lista a cada vez que ele passar pelo loop. O conjunto de dados que você especificar para os valores pode ser qualquer dado descrito no artigo de tags de dados como uma lista de itens.

Por exemplo, no widget de postagens de blog, posts é uma lista. O código a seguir passará em loop por cada postagem, imprimindo o título de cada uma delas, com tags de cabeçalho em torno dele.

 

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

 

Observe como "i" assume o valor de cada postagem para que você possa adquirir o título de cada uma delas.

Intervalo de números

Uma tag de loop permite que você repita um intervalo de números exclusivo, como "1 a 3", "-3 a -9", onde o valor da variável assume o valor do número. O exemplo a seguir criaria uma lista não ordenada de 1, 2 e 3.

 

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

 

Atributo index

Tags de loop também têm um atributo index opcional, que fornece o índice de base zero da repetição atual do loop.

 

<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>Índice: <data:index />, Número: <data:number /></li>
  </b:loop>
</ul>

 

Esse exemplo criaria uma lista não ordenada de:

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

If, elseif & else (b:if)

Quando usar if, elseif ou else

Você pode usar as tags b:if, b:elseif e b:else para exibir determinado conteúdo em casos específicos, e outro conteúdo em outros casos. Por exemplo, talvez você queira mostrar somente determinado texto na página inicial, mas um texto diferente ao verificar postagens individuais.

Formato

 

<b:if cond='condition'>
  [conteúdo a ser exibido se a condição for true]
<b:elseif cond='another condition'>
  [conteúdo a ser exibido se nenhuma condição if ou elseif true anterior for true e esta condição elseif for true]
<b:else/>
  [conteúdo a ser exibido se nenhuma condição if ou elseif for atendida]
</b:if>

 

As tags b:elseif e b:else são opcionais. Sem elas, o resultado seria o conteúdo incluído na seção b:if ou nada. No entanto, a tag de fechamento </b:if> é necessária em todos os casos.

Em "condition", você pode inserir qualquer item avaliado como true ou false. Algumas tags de dados são simplesmente valores true/false por si só, por exemplo, allowComments em uma postagem. Com outros dados, você pode compará-los com valores específicos para receber um valor true ou false. Veja alguns exemplos:

• <b:if cond='data:post.showBacklinks'>
  True se a postagem atual estiver configurada para mostrar backlinks.
• <b:if cond='data:blog.pageType == "item"'>
  True se a página atual for uma página de item (página de postagem).
• <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
  True se a página atual for uma página de item (página de postagem) e a postagem atual estiver configurada para mostrar backlinks.
• <b:if cond='data:displayname != "Pedro"'>
  True se o valor não for o nome de exibição de Pedro.
• <b:if cond='data:displayname == "Pedro" or data:blog.pageType == "static_page"'>
  True se Pedro for o nome de exibição ou a página atual for uma página estática (não for uma página de postagem).
• <b:if cond='data:post.numComments > 1'>
  True se a postagem atual tiver mais de um comentário.
• <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
  True se a página atual for uma página ou postagem específica.

Switches (b:switch)

Quando usar um Switch

É possível usar a tag b:switch de forma bem parecida com o uso de uma tag b:if com várias tags b:elseif. A vantagem de uma ramificação switch é que você não precisa repetir o nome da variável. Você pode lê-las facilmente para ver o que define cada caso e qual é o caso padrão.

Formato

<b:switch var=’[Expressão de dados]’>
<b:case value=”[Valor 1]” />
 [Saída se a avaliação de var for igual ao Valor 1]
<b:case value=”[Valor 2]” />
 [Saída se a avaliação de var for igual ao Valor 2]
[… qualquer outro valor]
<b:default />
 [Saída se a avaliação de var não for igual a qualquer outro b:case declarado]
</b:switch>

Exemplo

Este exemplo mostra como produzir um cabeçalho diferente, dependendo do tipo de página que estiver sendo renderizado.

<b:switch var=’data:blog.pageType’>
<b:case value=”static_page” />
  <h1>Página</h1>
<b:case value=”item” />
  <h1>Postagem</h1>
<b:default />
  <h2>Postagens no blog</h2>
</b:switch>

Expressões de atributo (expr:)

Quando usar expressões

Você pode usar o atributo expr para definir valores de atributo com base em valores no dicionário de dados. 

Exemplos

• <a expr:href='data:blog.homepageUrl'>Início</a>
  Um link "Início" com o URL da página inicial do blog.
• <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>RSS de postagens</a>
  Um link com o URL do feed RSS de postagens do blog. O operador "+" concatena as duas strings.
• <a expr:class='data:post.allowComments ? "comment" : "no-comment">Comentar</a>
  Um link com a classe "comment" quando comentários são permitidos e "no-comment" quando não são. O operador ternário (?:) assume o valor booleano determinado e seleciona o primeiro valor (depois de ?) se o booliano for true ou o segundo valor (depois de :) se o booliano for false.

Expressões avaliadas (b:eval)

Quando usar uma expressão avaliada

É possível usar a tag b:eval para avaliar uma expressão mais complicada do que uma tag de dados padrão.

Formato

<b:eval expr='[Expressão]' />

Exemplos

• min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
  Produz uma altura relativa calculada, com base em um novo valor de largura.
• <b:eval expr=”data:post.labels[0].url” />
  Produz o URL do primeiro rótulo da postagem.
• <b:eval expr='data:post.allowComments ? "Comentário" : "Comentários desativados" />
  Produz “Comentário” quando comentários forem permitidos e “Comentários desativados” quando não forem. Observe que essa expressão faz uso do operador ternário. Consulte o artigo Expressões em tags de layouts.

Alias variável (b:with)

Quando usar um alias variável

É possível usar a tag b:with para armazenar temporariamente o valor de uma expressão calculada e evitar expressões in-line complicadas.

Formato

<b:with var='myComputedValue' value=’[Expressão de dados]’ />

Exemplos

Para um atributo de estilo complicado com base em variáveis de dados, você pode calculá-lo antes do resto da saída do HTML, de modo que o HTML aninhado fique mais fácil de ler.

<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>Meu cabeçalho</h1>
   </div>
 </div>
</b:with>

Observe que a variável existirá apenas para os nós filhos da tag b:with.

Veja um exemplo de como todas essas tags são usadas no código HTML de um widget PageList em seu blog.

Exemplo

Nesse widget, você pode ver exemplos de uso das tags b:widget, b:includable (e b:include), b:if (e b:else) e b:loop.

 

<b:widget id='PageList1' locked='false' title='Pages' 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>