Teg Widget untuk Reka Letak

Penggunaan termasuk

Termasuk paling berguna jika anda mempunyai bahagian kod yang ingin digunakan semula di pelbagai tempat atau hanya masukkan dalam keadaan tertentu.

Untuk melakukan perkara ini, tulis kandungan dalam b:includable, kemudian gunakan b:include di setiap tempat anda mahu kandungan itu dipaparkan.

Format

 

<b:includable id='main' var='thiswidget'>
  [sisipkan apa-apa kandungan yang diingini di sini]
</b:includable>

 

Atribut

• id (diperlukan): Pengecam unik yang terdiri daripada huruf dan nombor. Setiap widget mesti mempunyai satu item 'includable' (boleh termasuk) dengan id='main'.
• var (pilihan) Pengecam yang terdiri daripada huruf dan nombor, untuk merujuk data dalam bahagian ini.

Jika anda membuat lebih banyak item 'includable' (boleh termasuk) dengan ID yang berbeza, item itu tidak akan dipaparkan secara automatik. Walau bagaimanapun, jika anda membuat item 'includable' (boleh termasuk) dengan id='new', maka anda boleh merujuk item itu dalam 'includable' (boleh termasuk) utama anda dengan <b:include name='new' /> dan item tersebut akan dipaparkan dengan cara itu.

Atribut teg b:include adalah seperti yang berikut:

• name (diperlukan): Pengecam yang terdiri daripada huruf dan nombor. Pengecam ini mesti sepadan dengan ID b:includable yang sedia ada dalam widget yang sama.
• data (pilihan): Ungkapan atau data untuk disertakan dalam bahagian 'includable' (boleh termasuk). Ini akan menjadi nilai atribut var dalam bahagian 'includable' (boleh termasuk).
• cond (pilihan) Ungkapan yang menyebabkan termasuk dilaksanakan hanya apabila hasilnya adalah benar. Perkara ini serupa dengan atribut cond pada b:if.

Contoh

Berikut ialah contoh yang menunjukkan cara menggunakan b:includable dan b:include.

Perkara utama yang perlu difahami di sini ialah cara bahagian "main" menyertakan bahagian "post" di dalamnya. Kod ini menyalurkan catatan yang dipanggil "p" dan bahagian yang disertakan merujuknya sebagai var "post", kemudian mencetak tajuk itu.

Harap maklum bahawa termasuk hanya berjalan semasa bilangan indeks kurang daripada 10, jadi hanya maksimum 10 catatan akan dipaparkan dalam contoh ini (indeks bermula dengan 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'>
  Tajuk: <data:post.title/>
</b:includable>

 

Contoh

• <data:title/> akan mencetak tajuk widget

• <data:photo.url/> - Saiz: <data.photo.width /> x <data.photo.height /> akan mencetak atribut unsur foto. Foto mungkin mempunyai komponen seperti url, tinggi dan lebar. Penggunaan tatatanda "." menunjukkan bahawa URL yang dikehendaki ialah URL foto ini, bukan URL daripada perkara lain.

Lihat lagi contoh

Lihat senarai lengkap teg data reka letak yang disokong.

 

Penggunaan b:loop

Teg b:loop membolehkan anda mengulang bahagian kandungan berbilang kali. Teg ini paling lazim digunakan untuk mencetak setiap catatan dalam senarai catatan untuk suatu halaman atau setiap ulasan, mahupun setiap label, dsb.

Format

Format umum untuk menggunakan gelung ialah:

 

<b:loop var='identifier' values='set-of-data'>
  [kandungan berulang diletakkan di sini]
</b:loop>

 

Bahagian 'identifier' (i) boleh jadi sebarang nama yang anda pilih dan akan digunakan bagi menggantikan setiap item baharu dalam senarai, setiap kali melalui gelung. Set data yang anda tentukan untuk nilai boleh jadi sebarang data yang diterangkan dalam artikel teg data sebagai senarai item.

Contohnya, dalam widget catatan blog, posts ialah senarai. Kod seperti di bawah ini akan berpusing melalui setiap catatan, mencetak tajuk setiap satu catatan itu dengan teg pengepala di keliling tajuk tersebut.

 

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

 

Perhatikan cara "i" mengambil nilai setiap catatan mengikut giliran, supaya anda boleh mendapatkan tajuk daripada setiap catatan.

Julat Nombor

Teg gelung membenarkan anda mengulang julat nombor yang termasuk kedua-dua nilai minimum dan maksimumnya, seperti ‘1 hingga 3', ‘-3 hingga -9', dengan nilai pemboleh ubah mengambil nilai nombor itu. Contoh berikut akan menghasilkan senarai 1, 2 dan 3 yang tidak tersusun.

 

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

 

Atribut Indeks

Teg gelung turut mempunyai atribut indeks pilihan yang memberikan indeks lelaran semasa berasaskan sifar melalui gelung.

 

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

 

Contoh ini akan membuat senarai tidak tersusun:

• Indeks: 0, Nombor: 9
• Indeks: 1, Nombor: 8
• Indeks: 2, Nombor: 7

Penggunaan if, elseif atau else

Anda boleh menggunakan teg b:if, b:elseif dan b:else untuk memaparkan kandungan tertentu dalam keadaan tertentu dan kandungan lain dalam keadaan lain. Contohnya, anda mungkin mahu menunjukkan teks tertentu sahaja pada laman utama tetapi teks lain apabila melihat pada catatan individu.

Format

 

<b:if cond='condition'>
  [kandungan untuk dipaparkan jika syarat adalah benar]
<b:elseif cond='another condition'/>
  [kandungan untuk dipaparkan jika tiada syarat if atau elseif sebelumnya yang benar dan syarat elseif ini adalah benar]
<b:else/>
  [kandungan untuk dipaparkan jika syarat if atau elseif tidak dipenuhi]
</b:if>

 

Teg b:elseif dan b:else adalah pilihan. Tanpa teg ini, hasilnya ialah kandungan yang disenaraikan dalam bahagian b:if atau tiada apa-apa. Walau bagaimanapun, penutup </b:if> diperlukan dalam setiap keadaan.

Untuk "condition", anda boleh meletakkan apa-apa sahaja yang dapat dinilaikan sebagai benar atau palsu. Sesetengah teg data adalah nilai benar/palsu sahaja, mis. allowComments pada catatan. Dengan data lain, anda boleh membandingkannya dengan nilai khusus untuk mendapatkan nilai benar atau palsu. Berikut ialah beberapa contoh:

• <b:if cond='data:post.showBacklinks'>
  Syarat ini benar jika catatan semasa ditetapkan untuk menunjukkan pautan balik.
• <b:if cond='data:blog.pageType == "item"'>
  Syarat ini benar jika halaman semasa ialah halaman item (halaman catatan).
• <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
  Syarat ini benar jika halaman semasa ialah halaman item (halaman catatan) dan catatan semasa ditetapkan untuk menunjukkan pautan balik.
• <b:if cond='data:displayname != "Fred"'>
  Syarat ini benar jika ini bukan nama paparan Fred.
• <b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
  Syarat ini benar jika Fred ialah nama paparan atau halaman semasa ialah halaman statik (bukan halaman catatan).
• <b:if cond='data:post.numComments > 1'>
  Syarat ini benar jika catatan semasa mempunyai lebih daripada satu ulasan.
• <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
  Syarat ini benar jika halaman semasa ialah catatan khusus atau satu halaman.

Penggunaan Suis

Anda boleh menggunakan teg b:switch seperti anda gunakan teg b:if yang mempunyai beberapa teg b:elseif. Kelebihan cabang suis ialah anda tidak perlu mengulangi nama pemboleh ubah. Anda dapat membacanya dengan mudah untuk melihat perkara yang mentakrif setiap keadaan dan keadaan lalainya.

Format

<b:switch var='[Ungkapan data]'>
<b:case value="[Nilai 1]" />
 [OUtput jika penilaian var adalah sama dengan Nilai 1]
<b:case value="[Nilai 2]" />
 [Output jika penilaian var adalah sama dengan Nilai 2]
[… sebarang nilai lain]
<b:default />
 [Output jika penilaian var tidak sama dengan sebarang b:case lain yang dinyatakan]
</b:switch>

Contoh

Contoh ini menunjukkan cara membuat output pengepala yang berbeza, bergantung pada jenis halaman yang dipaparkan.

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

Penggunaan Ungkapan

Anda boleh menggunakan atribut expr untuk menetapkan nilai atribut berdasarkan nilai dalam kamus data. 

Contoh

• <a expr:href='data:blog.homepageUrl'>Laman Utama</a>
  Pautan laman utama dengan url halaman utama blog.
• <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>RSS Catatan</a>
  Pautan dengan url suapan RSS catatan blog. Pengendali ‘+' merangkaikan kedua-dua rentetan.
• <a expr:class='data:post.allowComments ? "comment" : "no-comment">Ulasan</a>
  Pautan dengan kelas "comment" apabila ulasan dibenarkan dan "no-comment" apabila ulasan tidak dibenarkan. Pengendali ternar (?:) mengambil nilai boolean yang diberikan dan memilih nilai yang pertama (selepas ?) jika boolean adalah benar atau nilai yang kedua (selepas :) jika boolean adalah palsu.

Penggunan Ungkapan Dinilai

Anda boleh menggunakan teg b:eval untuk menilai ungkapan yang lebih rumit berbanding teg data standard.

Format

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

Contoh

• tinggi-min: <b:eval expr="data:newWidth * data:height / data:width" />px;
  Memberi output tinggi relatif yang dikira berdasarkan nilai lebar baharu.
• <b:eval expr="data:post.labels[0].url" />
  Memberi output url bagi label catatan yang pertama.
• <b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
  Memberi output “Comment” apabila ulasan dibenarkan dan “Comments Disabled” apabila ulasan tidak dibenarkan. Harap maklum bahawa ungkapan ini menggunakan pengendali ternar.

Penggunaan alias boleh ubah

Anda boleh menggunakan teg b:with untuk menyimpan nilai ungkapan terhitung untuk sementara waktu dan mengelakkan ungkapan sebaris yang rumit.

Format

<b:with var='myComputedValue' value='[Ungkapan data]' />

Contoh

Untuk atribut gaya rumit berdasarkan pemboleh ubah data, anda boleh mengiranya sebelum output HTML yang lain supaya HTML tersarang lebih mudah dibaca.

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

Harap maklum bahawa pemboleh ubah hanya wujud untuk nod anak teg b:with.

Dalam widget ini, anda dapat melihat contoh penggunaan teg b:widget, b:includable (dan b:include), b:if (dan b:else) dan 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>