Layoutsin widget-tagit

Sisältää-tagin käyttäminen

Sisältää-toiminto on hyödyllisin, jos haluat käyttää tiettyä koodinpätkää useissa eri paikoissa tai vain tietyissä tapauksissa.

Tee näin kirjoittamalla sisältö kohtaan b:includable ja lisää b:include sinne, missä haluat sisällön näkyvän.

Muoto

 

<b:includable id='main' var='thiswidget'>
  [Lisää haluamasi sisältö tähän.]
</b:includable>

 

Attribuutit

• id (vaaditaan): Ainutkertainen tunniste, joka koostuu kirjaimista ja numeroista. Jokaisella widgetillä on oltava yksi sisällytettävä teksti tunnuksella id='main'.
• var (valinnainen) Kirjaimista ja numeroista koostuva tunniste, joka viittaa tämän osion tietoihin.

Jos lisäät sisällytettäviä tekstejä, joilla on eri tunnus, niitä ei näytetä automaattisesti. Jos kuitenkin teet sisällytettävän tekstin, jonka tunnus on id='new', voit viitata siihen sisällytettävässä päätekstissä tunnuksella <b:include name='new' />, jolloin kyseinen teksti näkyy.

Tunnisteen b:include attribuutit ovat seuraavat:

• name (vaaditaan): Kirjaimista ja numeroista koostuva tunnistebers. Sen on vastattava saman widgetin tunnistetta b:includable.
• data (valinnainen): Lauseke tai tietopätkä, joka siirretään sisällytettävään osioon. Tästä tulee var-attribuutin arvo sisällytettävässä tekstissä.
• cond (valinnainen): Lauseke, joka saa sisällytettävän tekstin näkymään vain, kun sen tulos on tosi. Tämä vastaa arvon b:if attribuuttia cond.

Esimerkki

Seuraavassa on esimerkki arvojen b:includable ja b:include käyttämisestä.

Tärkeintä on ymmärtää, miten post-osio sisältyy main-osioon. Se kulkee pitkin viestiä nimeltä p ja sisällytetty osio viittaa siihen var-viestinä ja tulostaa sitten otsikon.

Huomaa, että sisällytettävää osiota käytetään vain, kun indeksi on alle 10, joten tässä esimerkissä enintään 10 viestiä hahmonnettaisiin (indeksi alkaa arvosta 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'>
  Otsikko: <data:post.title/>
</b:includable>

 

Esimerkkejä

• <data:title/> tulostaisi widgetin otsikon

• <data:photo.url/> – Koko: <data.photo.width /> x <data.photo.height /> tulostaisi valokuvan komponentin attribuutit. Valokuvan komponentteja voivat olla esimerkiksi URL-osoite, korkeus ja leveys. Merkinnän "." käyttäminen osoittaa, että haluamme tämän kuvan URL-osoitteen muun kohteen URL-osoitteen sijaan.

Katso lisää esimerkkejä

Katso täydellinen luettelo ulkoasun tietotunnisteista, joita tuetaan.

 

Tunnisteen b:loop käyttäminen

Voit toistaa sisältöosion useita kertoja käyttämällä tunnistetta b:loop. Tätä käytetään yleensä, kun halutaan tulostaa jokainen tietyn sivun luettelon viesti tai jokainen kommentti, tunniste jne.

Muoto

Silmukoiden käyttämisen yleinen muoto on seuraava:

 

<b:loop var='identifier' values='set-of-data'>
  [toistuva sisältö kirjoitetaan tähän]
</b:loop>

 

Identifier-osa (i) voi olla mikä tahansa valitsemasi nimi. Sitä käytetään jokaiselle luettelon kohteelle, aina silmukan läpi. Arvoille määrittelemäsi tiedot voivat olla mitä tahansa tietokappaleita, jotka on kuvattu tietotunnisteartikkelissa luettelokohteiksi.

Esimerkiksi blogiviestiwidgetissä posts on luettelo. Seuraavanlainen koodi kiertää jokaisen viestin kautta ja tulostaa otsikon jokaiselle viestille, jonka ympärillä on otsikkotunnisteet.

 

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

 

Huomaa, miten i saa kunkin viestin arvon vuorotellen, jotta saat mukaan jokaisen viestin otsikon.

Numeroväli

Silmukkatunnisteen avulla voit toistaa numeroväliä, kuten 1–3, -3–-9, jossa muuttujan arvo saa numeron arvon. Seuraava esimerkki saisi aikaan järjestämättömän luettelon, jossa ovat 1, 2 ja 3.

 

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

 

Indeksiattribuutti

Silmukkatunnisteilla on myös valinnainen indeksiattribuutti, joka antaa nollapohjaiselle indeksille senhetkisen toiston silmukan kautta.

 

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

 

Tämä esimerkki saisi aikaan seuraavanlaisen järjestämättömän luettelon:

• Indeksi: 0, numero: 9
• Indeksi: 1, numero: 8
• Indeksi: 2, numero: 7

Tagien if, elseif ja else käyttäminen

Tunnisteiden b:if, b:elseif ja b:else avulla voit näyttää tiettyä sisältöä tietyissä tapauksissa ja muuta sisältöä muissa tapauksissa. Voit esimerkiksi näyttää tietyn tekstin kotisivulla ja eri tekstin tarkasteltaessa yksittäisiä viestejä.

Muoto

 

<b:if cond='condition'>
  [Sisältö näytetään, jos ehto on tosi.]
<b:elseif cond='another condition'/>
  [Sisältö näytetään, jos mikään aikaisempi if‑ tai elseif-ehto ei ole ollut tosi ja tämä elseif-ehto on tosi.]
<b:else/>
  [Sisältö näytetään, jos mikään if‑ tai elseif-ehdoista ei täyty.]
</b:if>

 

Tunnisteet b:elseif ja b:else ovat valinnaisia. Ilman niitä tuloksena on joko b:if-osiossa lueteltu sisältö tai ei mitään. Sulkeva </b:if> vaaditaan kuitenkin joka tapauksessa.

Voit merkitä condition-kohtaan mitä tahansa, jonka arvo voi olla tosi tai epätosi. Jotkin tietotunnisteet ovat itsessään tosi-/epätosi-arvoja, esim allowComments (salli kommentit) viestissä. Voit verrata niitä muihin tieto-osioihin ja saada tulokseksi tosi tai epätosi. Esimerkkejä:

• <b:if cond='data:post.showBacklinks'>
  Tosi, jos viittaajan linkit näytetään senhetkisessä viestissä.
• <b:if cond='data:blog.pageType == "item"'>
  Tosi, jos senhetkinen sivu on nimikesivu (viestisivu).
• <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
  Tosi, jos senhetkinen sivu on nimikesivu (viestisivu) ja viittaajan linkit näytetään senhetkisessä viestissä.
• <b:if cond='data:displayname != "Fred"'>
  Tosi, jos tämä ei ole Fredin näyttönimi.
• <b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
  Tosi, jos Fred on näyttönimi tai jos senhetkinen sivu on staattinen sivu (ei viestisivu).
• <b:if cond='data:post.numComments > 1'>
  Tosi, jos senhetkisessä viestissä on enemmän kuin yksi kommentti.
• <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
  Tosi, jos senhetkinen sivu on tietty viesti tai sivu.

Switch-tagin käyttäminen

Tagia b:switch voidaan käyttää samalla tavalla kuin b:if-tagia, joka sisältää useita b:elseif-tageja. Switch-tagien käytön etuna on, ettei muuttujan nimeä tarvitse toistaa. Niistä on helppo lukea, mikä tagi määrittää mitäkin tapausta ja mikä on oletustapaus.

Muoto

<b:switch var='[Data expression]'>
<b:case value="[Value 1]" />
 [Var-attribuutin arvioinnin tulos on sama kuin Value 1.]
<b:case value="[Value 2]" />
 [Var-attribuutin arvioinnin tulos on sama kuin Value 2.]
[… any other values]
<b:default />
 [Var-attribuuti arvioinnin tulos ei ole sama kuin mikään ilmoitettu b:case.]
</b:switch>

Esimerkki

Tästä esimerkistä näet, miten erilaiset otsikot muotoillaan. Ulkoasuun vaikuttaa hahmonnettavan sivun tyyppi.

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

Ilmauksien käyttäminen

Attribuutin expr avulla voit määrittää attribuuttien arvot tietosanakirjan arvojen perusteella. 

Esimerkkejä

• <a expr:href='data:blog.homepageUrl'>Home</a>
  Kotisivulinkki, jossa on blogin kotisivun URL-osoite.
• <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a>
  Linkki, jossa on blogiviestin RSS-syötteen URL-osoite. Operaattori + liittää yhteen kaksi merkkijonoa.
• <a expr:class='data:post.allowComments ? "comment" : "no-comment">Comment</a>
  Linkki, jossa on kommentti, kun kommentit ovat sallittuja, ja ei ole kommenttia, kun ne eivät ole sallittuja. Kolmiarvoinen operaattori (?:) ottaa annetun loogisen arvon ja valitsee ensimmäisen arvon (?-merkin jälkeen), jos looginen arvo on tosi, tai toisen arvon (:-merkin jälkeen), jos looginen arvo on epätosi.

Arvioidun lausekkeen käyttäminen

Tagia b:eval voidaan käyttää tavallista datatagia monimutkaisempien lausekkeiden arviointiin.

Muoto

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

Esimerkkejä

• min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
  Lasketun suhteellisen korkeuden tulos, joka perustuu uuteen leveysarvoon.
• <b:eval expr="data:post.labels[0].url" />
  Ensimmäisen blogitekstitunnisteen URL.
• <b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
  Tuloksena on ”Comment”, kun kommentit ovat sallittuja ja ”Comments Disabled”, kun ne eivät ole sallittuja. Huomaa, että tämä lauseke käyttää kolmiarvoista operaattoria.

Muuttuja-aliaksen käyttäminen

Tagilla b:with voidaan tallentaa lasketun lausekkeen arvo väliaikaisesti ja välttää monimutkaiset upotetut lausekkeet.

Muoto

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

Esimerkkejä

Datamuuttujiin perustuva monimutkainen tyyliattribuutti voidaan laskea ennen HTML-tulosta, jotta sisäkkäinen HTML on helpompi lukea.

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

Huomaa, että muuttuja on voimassa vain b:with-tagin alisolmuissa.

Tässä widgetissä näet esimerkkejä tunnisteiden b:widget, b:includable (ja ), b:if (ja b:else) ja b:loop käyttötilanteista.

 

<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>