Etichete de widgeturi pentru Aspecte

Când puteți folosi etichete de includere

Etichetele de includere sunt foarte utile când vreți să refolosiți o secțiune de cod în alte locuri sau să o includeți doar în anumite situații.

Pentru a face acest lucru, scrieți conținutul dorit în interiorul unei etichete b:includable, apoi folosiți b:include acolo unde doriți să se afișeze.

Format

 

<b:includable id='main' var='thiswidget'>
  [inserați aici conținutul dorit]
</b:includable>

 

Atribute

• id (obligatoriu): un identificator unic compus din litere și cifre. Fiecare widget trebuie să aibă o etichetă de includere cu atributul id='main'.
• var (opțional) Un identificator compus din litere și cifre, pentru datele de referință din această secțiune.

În cazul în care creați mai multe etichete de includere cu diferite ID-uri, acestea nu sunt afișate automat. Însă, dacă ați creat o etichetă de includere cu atributul id='new', atunci o puteți menționa în eticheta principală de includere cu atributul <b:include name='new' /> și va fi afișată astfel.

Atributele pentru eticheta b:include sunt următoarele:

• nume (obligatoriu): un identificator compus din litere și cifre. Trebuie să corespundă ID-ului unei etichete b:includable din același widget.
• date (opțional): o expresie sau un fragment de date de transmis etichetei de includere. Aceasta va fi valoarea atributului „var” din eticheta de includere.
• cond (opțional) O expresie care determină eticheta de includere să execute numai când rezultatul său este adevărat. Este la fel ca pentru atributul „cond” dintr-o etichetă b:if.

Exemplu

Iată un exemplu care ilustrează cum să folosiți etichetele b:includable și b:include.

În principal, trebuie înțeles modul în care secțiunea „main” (principală) include secțiunea „post” (postare) în ea. Ea transmite o postare denumită „p”, iar secțiunea inclusă o menționează ca fiind atributul său „var” cu valoarea „post”, apoi publică titlul.

Rețineți că eticheta de includere rulează numai atunci când indexul este mai mic de 10. Prin urmare, pot fi redate maximum 10 postări în acest exemplu (indexul începe de la 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>

 

Exemple

• <data:title/> trebuie să publice titlul unui widget

• <data:photo.url/> - Dimensiune: <data.photo.width /> x <data.photo.height /> indică atributele unei componente foto. O fotografie poate avea componente precum adresă URL, înălțime și lățime. Folosindu-se notația "." se indică faptul că vrem adresa URL pentru această fotografie și nu o adresă URL din altă sursă.

Vedeți mai multe exemple

Consultați lista completă de etichete de date pentru aspecte care sunt acceptate.

 

Când să folosiți eticheta b:loop

Folosind eticheta b:loop puteți repeta o secțiune de conținut de mai multe ori. Aceasta este folosită cel mai frecvent pentru publicarea tuturor postărilor într-o listă de postări pentru o anumită pagină sau a tuturor comentariilor, a tuturor etichetelor etc.

Format

Formatul general pentru folosirea buclelor este următorul:

 

<b:loop var='identifier' values='set-of-data'>
  [conținutul repetat se introduce aici]
</b:loop>

 

Partea „Identificator” (i) poate fi orice nume doriți și va fi folosit pentru a înlocui orice element nou din listă, de fiecare dată în cuprinsul buclei. Setul de date pe care îl specificați pentru valori poate fi orice fragment de date descris în articolul de etichete pentru date ca fiind o listă de elemente.

De exemplu, în widgetul pentru postări de blog, posts este o listă. Codați ca și cum următorul fragment va parcurge în buclă fiecare postare, publicând titlul pentru fiecare, cu etichete de antet în jurul său.

 

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

 

Remarcați cum „i” preia valoarea fiecărei postări pe rând pentru a putea obține titlul din fiecare.

Interval de date

O etichetă buclă vă permite să repetați un interval de cifre, de exemplu „de la 1 la 3”, „de la -3 la -9”, unde valoarea variabilei ia valoarea cifrei. Următorul exemplu ar crea o listă neordonată de 1, 2 și 3.

 

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

 

Atributul Index

Etichetele buclă au și un atribut opțional de index, care dă indexul cu pornire de la zero a repetiției actuale din buclă.

 

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

 

Acest exemplu ar crea o listă neordonată pentru:

• Index: 0, Număr: 9
• Index: 1, Număr: 8
• Index: 2, Număr: 7

Când puteți folosi etichetele „if”, „elseif” sau „else”

Puteți folosi etichetele b:if, b:elseif și b:else pentru a afișa un anumit conținut în anumite cazuri, iar alte conținuturi în alte cazuri. De exemplu, doriți să se afișeze un anumit text doar pe pagina de pornire și alt text când se afișează postările individuale.

Format

 

<b:if cond='condition'>
  [conținut de afișat dacă condiția este adevărată]
<b:elseif cond='another condition'/>
  [conținut de afișat dacă nicio condiție anterioară if sau elseif nu a fost adevărată, iar această condiție elseif este adevărată]
<b:else/>
  [conținut de afișat dacă nicio condiție if sau elseif nu sunt îndeplinite]
</b:if>

 

Etichetele b:elseif și b:else sunt opționale. Fără acestea, rezultatul este fie conținutul enumerat în secțiunea b:if, fie nimic. Eticheta de închidere </b:if> este însă obligatorie în toate cazurile.

Pentru „condition” (condiție) puteți introduce orice este evaluat ca adevărat sau fals. Unele etichete sunt simple valori adevărat/fals de sine stătătoare, de ex.,allowComments (permite comentarii) într-o postare. Alte fragmente de date le puteți compara cu valori specifice pentru a obține valorile adevărat sau fals. Iată câteva exemple:

• <b:if cond='data:post.showBacklinks'>
  Adevărat dacă postarea actuală este setată să afișeze backlinkuri.
• <b:if cond='data:blog.pageType == "item"'>
  Adevărat dacă pagina actuală este o pagină de elemente (pagină de postări).
• <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
  Adevărat dacă pagina actuală este o pagină de elemente (pagină de postări), iar postarea actuală este setată să afișeze backlinkuri.
• <b:if cond='data:displayname != "Fred"'>
  Adevărat dacă acesta nu este numele afișat al lui Fred.
• <b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
  Adevărat dacă Fred este numele afișat sau dacă pagina actuală este una statică (nu o pagină de postări).
• <b:if cond='data:post.numComments > 1'>
  Adevărat dacă postarea actuală are mai mult de un comentariu.
• <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
  Adevărat dacă pagina actuală este o anumită postare sau o pagină.

Când puteți folosi o etichetă de comutare

Puteți folosi eticheta b:switch la fel cum ați folosi o etichetă b:if care are mai multe etichete b:elseif. Avantajul unei ramuri de comutare este că nu trebuie să repetați numele variabilei. Le puteți citi cu ușurință pentru a vedea ce definește fiecare caz și care este cazul prestabilit.

Format

<b:switch var='[Expresie de date]'>
<b:case value="[Valoare 1]" />
 [Rezultatul dacă evaluarea atributului var este egală cu Valoarea 1]
<b:case value="[Valoare 2]" />
 [Rezultatul dacă evaluarea atributului var este egală cu Valoarea 2]
[… orice alte valori]
<b:default />
 [Rezultatul dacă evaluarea atributului var nu este egală cu nicio altă valoare precizată b:case]
</b:switch>

Exemplu

Acest exemplu arată cum să publicați un antet diferit, în funcție de tipul de pagină redat.

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>Pagină</h1>
<b:case value="item" />
  <h1>Postare</h1>
<b:default />
  <h2>Postări de pe blog</h2>
</b:switch>

Când puteți folosi expresiile

Puteți folosi atributul „expr” ca să setați valorile atributului pe baza valorilor din dicționarul de date. 

Exemple

• <a expr:href='data:blog.homepageUrl'>Pagina de pornire</a>
  Un link către pagina de pornire cu adresa URL a paginii de pornire a blogului.
• <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Postări RSS</a>
  Un link cu adresa URL a feedului RSS a postărilor de pe blog. Operatorul „+“ concatenează cele două șiruri.
• <a expr:class='data:post.allowComments ? "comment" : "no-comment">Comentariu</a>
  Un link cu clasa „comment (comentariu)” când sunt permise comentariile și cu clasa „no-comment (fără-comentarii)” atunci când nu sunt permise. Operatorul ternar (?:) ia valoarea booleană dată și alege prima valoare (după semnul ?) dacă valoarea booleană e adevărată sau a doua valoare (după semnul :) dacă valoarea booleană este falsă.

Când puteți folosi o expresie evaluată

Puteți folosi eticheta b: eval pentru a evalua o expresie mai complexă decât o etichetă de date standard.

Format

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

Exemple

• min-înălțime: <b:eval expr="data:newWidth * data:height / data:width" />px;
  Rezultatul este o înălțime relativă calculată pe baza unei valori noi a lățimii.
• <b:eval expr="data:post.labels[0].url" />
  Rezultatul este adresa URL a etichetei primei postări.
• <b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
  Rezultatul este „Comment (Comentariu)” când comentariile sunt permise și „Comments Disabled” (comentarii dezactivate) când nu sunt permise. Rețineți că această expresie utilizează operatorul ternar.

Când puteți folosi un alias de variabilă

Puteți folosi eticheta b:with pentru a stoca temporar valoarea unei expresii calculate și pentru a evita expresii inline complicate.

Format

<b:with var='myComputedValue' value='[Expresie de date]' />

Exemple

Pentru un atribut de stil complicat pe baza variabilelor de date, îl puteți calcula înaintea rezultatului HTML rămas, astfel încât codul HTML imbricat să fie mai ușor de citit.

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

Rețineți că variabila va exista numai pentru nodurile copii ale etichetei b:with.

În acest widget, puteți vedea utilizări exemplu ale etichetelor b:widget, b:includable (și b:include), b:if (și b:else) și 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>