Tag dei widget per i layout

Grazie ai widget, quando utilizzi il tema Layout per creare la sezione "body" del tuo blog puoi aggiungere elementi di pagina, come immagini e blogroll.

Tipi di tag

In questa sezione viene descritto il codice HTML che puoi utilizzare all'interno dei tag di chiusura.

Inclusioni (b:include)

Quando utilizzare le inclusioni

Le inclusioni sono particolarmente utili quando vuoi riutilizzare una sezione di codice in più posizioni diverse o se vuoi includerla solo in determinate circostanze.

A questo scopo, scrivi i tuoi contenuti all'interno di un tag b:includable, quindi utilizza b:include ovunque desideri vengano visualizzati.

Formato

 

<b:includable id='main' var='thiswidget'>
  [inserisci qui i contenuti che desideri]
</b:includable>

 

Attributi

• id (obbligatorio): un identificatore univoco composto da lettere e numeri. Ciascun widget deve avere un tag includable con id='main'.
• var (facoltativo): un identificatore composto da lettere e numeri che serve a fare riferimento ai dati all'interno di questa sezione.

Se crei più sezioni "includable" con ID diversi, queste non verranno visualizzate automaticamente. Se tuttavia crei una sezione "includable" con id='new', puoi farvi riferimento nell'includable principale con <b:include name='new' /> e in questo modo verrà visualizzata.

Gli attributi del tag b:include sono i seguenti:

• name (obbligatorio): un identificatore univoco composto da lettere e numeri. Deve corrispondere all'ID di un tag b:includable esistente nello stesso widget.
• data (facoltativo): un'espressione o un dato da passare alla sezione "includable". Questo diventerà il valore dell'attributo var nell'includable.
• cond (facoltativo): un'espressione mediante la quale la sezione "include" viene eseguita solo se il risultato è vero. È uguale all'attributo cond in b:if.

Esempio

Di seguito un esempio che mostra come utilizzare b:includable e b:include.

Ciò che è importante comprendere è in che modo la sezione "post" viene inclusa nella sezione "main" . La sezione "main" distribuisce un post che chiama "p" e la sezione inclusa vi fa riferimento come propria variabile "post", per poi visualizzarne il titolo.

Tieni presente che la sezione "include" viene eseguita solamente quando l'indice è inferiore a 10, pertanto in questo esempio verrebbero visualizzati solo 10 post (l'indice inizia dallo 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>

 

Output dati (data:)

Esempi

• <data:title/> mostra il titolo di un widget

• <data:photo.url/> - Dimensioni: <data.photo.width /> x <data.photo.height /> mostra gli attributi del componente di una foto. Una foto può avere diversi componenti, come ad esempio URL, altezza e larghezza. La notazione "." indica che l'URL desiderato è quello della foto e non di altro.

Altri esempi

Visualizza l'elenco completo dei tag di dati per i layout supportati.

 

Loop (b:loop)

Quando utilizzare b:loop

Con il tag b:loop puoi ripetere una sezione di contenuti più volte. Questo tag viene utilizzato principalmente per visualizzare ciascun post (o commento, etichetta ecc.) in un elenco di post (o commenti, etichette ecc.) in una pagina specifica.

Formato

Il formato generale per l'uso dei tag loop è il seguente:

 

<b:loop var='identifier' values='set-of-data'>
  [i contenuti ripetuti vanno qui]
</b:loop>

 

Puoi chiamare 'identifier' (i) come più desideri; questo nome verrà utilizzato al posto di ogni nuovo elemento nell'elenco, ogni volta tramite il loop. Il "set-of-data" specificato per "values" può essere un qualsiasi dato descritto nell'articolo sui tag dei dati sotto forma di elenco di elementi.

Ad esempio, nel widget dei post del blog, posts è un elenco. Un codice come il seguente si ripeterà per ogni post, indicando il titolo tra tag di intestazione.

 

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

 

Osserva come "i" assume di volta in volta il valore di ciascun post, in modo da poter ottenere il titolo per ognuno.

Intervallo numerico

Un tag loop ti permette di ripetere un intervallo numerico definito, come ‘da 1 a 3', ‘da -3 a -9', laddove il valore della variabile assume il valore del numero. L'esempio seguente crea un elenco non ordinato di 1, 2 e 3.

 

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

 

Attributo index

I tag loop hanno inoltre un attributo index facoltativo, che fornisce l'indice con base zero dell'iterazione corrente attraverso il loop.

 

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

 

L'esempio crea un elenco non ordinato di:

• Indice: 0, Numero: 9
• Indice: 1, Numero: 8
• Indice: 2, Numero: 7

If, elseif e else (b:if)

Quando utilizzare if, elseif o else

I tag b:if, b:elseif e b:else consentono di mostrare determinati contenuti in alcuni casi e altri contenuti in altri casi, ad esempio se desideri mostrare un testo nella home page e un testo diverso quando si leggono i singoli post.

Formato

 

<b:if cond='condition'>
  [content to display if condition is true]
<b:elseif cond='another condition'/>
  [content to display if no previous if or elseif conditions have been true, and this elseif condition is true]
<b:else/>
  [content to display if no if or elseif conditions are met]
</b:if>

 

I tag b:elseif e b:else sono facoltativi. Senza di essi si ottengono i contenuti elencati nella sezione b:if oppure nulla. Il tag di chiusura </b:if> è tuttavia obbligatorio in ogni caso.

Al posto di "condition" puoi inserire qualsiasi cosa abbia come valore vero o falso. Alcuni tag dei dati sono di per sé semplici valori vero/falso, come il tag allowComments in un post. Altri dati possono essere confrontati con valori specifici per ottenere un valore vero o falso. Di seguito sono riportati alcuni esempi:

• <b:if cond='data:post.showBacklinks'>
  Vero se il post attuale è impostato per mostrare i backlink.
• <b:if cond='data:blog.pageType == "item"'>
  Vero se la pagina corrente è una pagina di elementi (pagina di post).
• <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
  Vero se la pagina corrente è una pagina di elementi (pagina di post) e il post corrente è impostato per mostrare i backlink.
• <b:if cond='data:displayname != "Fred"'>
  Vero se il nome visualizzato non è Fred.
• <b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
  Vero se Fred è il nome visualizzato o se la pagina corrente è statica (non una pagina di post).
• <b:if cond='data:post.numComments > 1'>
  Vero se per il post attuale è presente più di un commento.
• <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
  Vero se la pagina attuale è un post o una pagina specifica.

Switch (b:switch)

Quando utilizzare un tag switch

Puoi utilizzare un tag b:switch in modo molto simile a come utilizzeresti un tag b:if che contiene più tag b:elseif. Il vantaggio di un ramo di tipo switch è il non dover ripetere il nome della variabile. È di facile lettura per la definizione di ciascun tag case e per stabilire quale sia il tag case predefinito.

Formato

<b:switch var='[Data expression]'>
<b:case value="[Value 1]" />
 [Restituisce se la valutazione dell'attributo var è uguale al Valore 1]
<b:case value="[Value 2]" />
 [Restituisce se la valutazione dell'attributo var è uguale al Valore 2]
[… qualsiasi altro valore]
<b:default />
 [Restituisce se la valutazione dell'attributo var non è uguale agli altri tag b:case definiti]
</b:switch>

Esempio

Questo esempio mostra come ottenere risultati da un'intestazione diversa, a seconda del tipo di pagina ottenuta.

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>Pagina</h1>
<b:case value="item" />
  <h1>Post<h1>
<b:default />
  <h2>Post del blog</h2>
</b:switch>

Attributo espressioni (expr:)

Quando utilizzare le espressioni

Puoi utilizzare l'attributo expr per impostare valori in base ai valori del dizionario di dati. 

Esempi

• <a expr:href='data:blog.homepageUrl'>Home</a>
  Un link all'URL della home page del blog.
• <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a>
  Un link con l'URL del feed RSS del post del blog. L'operatore ‘+' concatena le due stringhe.
• <a expr:class='data:post.allowComments ? "comment" : "no-comment">Comment</a>
  Un link con classe "comment" quando sono consentiti i commenti e con "no-comment" quando non lo sono. L'operatore ternario (?:) prende il valore dell'operatore booleano e seleziona il primo valore (dopo "?") se l'operatore booleano è vero, il secondo valore (dopo ":") se l'operatore booleano è falso.

Espressioni valutate (b:eval)

Quando utilizzare un'espressione valutata

Puoi utilizzare il tag b:eval per valutare un'espressione complicata rispetto a un tag di dati standard.

Formato

<b:eval expr='[Espressione]' />

Esempi

• Altezza minima: <b:eval expr="data:newWidth * data:height / data:width" />px;
  Restituisce un'altezza relativa calcolata in base al nuovo valore della larghezza.
• <b:eval expr="data:post.labels[0].url" />
  Restituisce l'URL della prima etichetta del post.
• <b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
  Restituisce “Comment” quando sono ammessi commenti, "Comments Disabled” in caso contrario. Tieni presente che questa espressione utilizza l'operatore ternario.

Alias di variabile (b:with)

Quando utilizzare un alias di variabile

Puoi utilizzare il tag b:with per archiviare temporaneamente il valore di un'espressione calcolata ed evitare complicate espressioni in linea.

Formato

<b:with var='myComputedValue' value='[Data expression]' />

Esempi

Puoi calcolare un attributo di stile complesso basato sulle variabili di dati prima del resto dell'output HTML, in modo che il codice HTML annidato sia di più semplice lettura.

<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>Intestazione</h1>
   </div>
 </div>
</b:with>

Tieni presente che la variabile esisterà solo per i nodi figlio del tag b:with.

Esempio

Fai clic per visualizzare un esempio del modo in cui tutti questi tag vengono utilizzati in HTML per un widget PageList nel tuo blog.

Esempio

Questo widget mostra esempi di utilizzo dei tag 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>