Tag Widget untuk Tata Letak

Kapan include digunakan

Include paling berguna jika Anda memiliki bagian dari kode yang ingin digunakan kembali di beberapa tempat yang berbeda, atau hanya disertakan dalam keadaan tertentu.

Untuk melakukannya, tulis konten dalam b:includable, lalu gunakan b:include di tempat Anda ingin menampilkannya.

Format

 

<b:includable id='main' var='thiswidget'>
  [sisipkan konten yang Anda inginkan di sini]
</b:includable>

 

Atribut

• id (wajib): Pengenal unik yang terdiri dari huruf dan angka. Setiap widget harus memiliki satu includable dengan id='main'.
• var (opsional): Pengenal yang terdiri dari huruf dan angka, untuk referensi data dalam bagian ini.

Jika Anda membuat lebih banyak includable dengan ID berbeda, includable tidak akan ditampilkan secara otomatis. Namun, jika membuat includable dengan id='new', Anda dapat mereferensikannya dalam includable utama dengan <b:include name='new' /> dan akan ditampilkan seperti itu.

Atribut-atribut untuk tag b:include adalah sebagai berikut:

• name (wajib): Pengenal yang terdiri dari huruf dan angka. Ini harus sesuai dengan ID b:includable yang ada dalam widget yang sama.
• data (opsional): Ekspresi atau potongan data untuk diteruskan ke bagian includable. Ini akan menjadi nilai atribut var di includable.
• cond (opsional): Ekspresi yang menyebabkan include hanya dijalankan ketika hasilnya benar. Ini sama dengan atribut cond pada b:if.

Contoh

Berikut ini adalah contoh yang memperlihatkan cara menggunakan b:includable dan b:include.

Hal utama yang harus dipahami di sini adalah cara bagian "main" menyertakan bagian "post" di dalamnya. Sebuah pos yang disebut "p" dan bagian disertakan yang direferensikan sebagai var "post"-nya akan diteruskan, kemudian judulnya akan dicetak.

Perhatikan bahwa include hanya berjalan jika indeksnya kurang dari 10, sehingga hanya maksimal 10 pos yang akan dirender dalam contoh ini (indeks dimulai dari 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'>
  Judul: <data:post.title/>
</b:includable>

 

Contoh

• <data:title/> akan mencetak judul widget

• <data:photo.url/> - Ukuran: <data.photo.width /> x <data.photo.height /> akan mencetak atribut komponen foto. Foto mungkin memiliki komponen seperti URL, tinggi, dan lebar. Menggunakan notasi "." menunjukkan bahwa kita menginginkan URL untuk foto ini, dan bukan URL dari hal lainnya.

Lihat contoh lainnya

Lihat daftar lengkap tag data tata letak yang didukung.

 

Kapan b:loop digunakan

Tag b:loop memungkinkan Anda mengulangi sebuah bagian konten beberapa kali. Hal ini paling sering digunakan untuk mencetak setiap pos dalam daftar pos bagi laman tertentu, atau setiap komentar, atau setiap label, dll.

Format

Format umum penggunaan loop adalah:

 

<b:loop var='identifier' values='set-of-data'>
  [konten yang diulang ditempatkan di sini]
</b:loop>

 

Bagian 'identifier' (i) dapat berupa nama apa pun yang Anda pilih, dan akan digunakan untuk menggantikan setiap item baru dalam daftar, setiap kali melalui lingkaran (loop). Kumpulan data yang Anda tentukan untuk nilai dapat merupakan potongan data mana pun seperti yang dijelaskan dalam artikel tag data sebagai daftar item.

Misalnya, dalam widget pos blog, posts adalah sebuah daftar. Kode seperti di bawah ini akan melingkar (loop) melalui setiap pos, mencetak judul untuk setiap pos, dengan tag header di sekitarnya.

 

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

 

Perhatikan bagaimana "i" mengambil nilai setiap pos bergiliran, sehingga Anda bisa mendapatkan judul dari setiap pos.

Rentang Angka

Tag loop memungkinkan Anda mengulang seluruh rentang angka inklusif, seperti '1 sampai 3', '-3 sampai -9', dengan nilai variabel mengambil nilai angka. Contoh berikut akan membuat daftar 1, 2, dan 3 yang tidak berurutan.

 

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

 

Atribut Indeks

Tag loop juga memiliki atribut indeks opsional, yang memberikan indeks berbasis nol dari pengulangan saat ini melalui loop.

 

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

 

Contoh ini akan membuat daftar tidak berurutan dari:

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

Kapan if, elseif, atau else digunakan

Anda dapat menggunakan tag b:if, b:elseif, dan b:else untuk menampilkan konten tertentu dalam kasus tertentu, dan konten lainnya dalam kasus lain. Misalnya, Anda mungkin hanya ingin menampilkan teks tertentu pada beranda dan teks lain ketika melihat setiap pos.

Format

 

<b:if cond='condition'>
  [konten untuk ditampilkan jika kondisi benar]
<b:elseif cond='another condition'/>
  [konten untuk ditampilkan jika tidak ada kondisi if atau elseif sebelumnya yang benar, dan kondisi elseif ini benar]
<b:else/>
  [konten untuk ditampilkan jika tidak ada kondisi if atau elseif yang terpenuhi]
</b:if>

 

Tag b:elseif dan b:else adalah opsional. Tanpa tag tersebut, hasilnya bisa berupa konten yang tercantum dalam bagian b:if atau tidak ada sama sekali. Namun, penutup </b:if> diperlukan dalam setiap kasus.

Untuk "condition", Anda dapat memasukkan apa pun yang mengevaluasi benar atau salah. Beberapa tag data hanya sekadar nilai benar/salah itu sendiri, misalnya allowComments di pos. Dengan potongan data lain, Anda dapat membandingkannya dengan nilai-nilai tertentu untuk mendapatkan benar atau salah. Berikut ini beberapa contohnya:

• <b:if cond='data:post.showBacklinks'>
  Benar jika pos saat ini disetel untuk menampilkan link balik.
• <b:if cond='data:blog.pageType == "item"'>
  Benar jika halaman saat ini adalah halaman item (laman pos).
• <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
  Benar jika halaman saat ini adalah halaman item (halaman pos) dan pos saat ini disetel untuk menampilkan link balik.
• <b:if cond='data:displayname != "Fred"'>
  Benar jika ini bukan nama tampilan Fred.
• <b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
  Benar jika Fred adalah nama tampilan, atau halaman saat ini adalah halaman statis (bukan halaman pos).
• <b:if cond='data:post.numComments > 1'>
  Benar jika pos saat ini memiliki lebih dari satu komentar.
• <b:if cond='data:blog.pageType in {"static_page", "item"}'> ATAU <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
  Benar jika halaman saat ini adalah pos tertentu, atau sebuah halaman.

Kapan Switch digunakan

Anda dapat menggunakan tag b:switch dengan cara yang sangat mirip seperti saat menggunakan tag b:if yang memiliki beberapa tag b:elseif. Keuntungan dari cabang switch adalah bahwa Anda tidak perlu mengulang nama variabel. Anda dapat dengan mudah membacanya untuk melihat apa yang menentukan setiap kasus, dan apa kasus default-nya.

Format

<b:switch var='[Ekspresi data]'>
<b:case value="[Nilai 1]" />
 [Keluaran jika evaluasi var sama dengan Nilai 1]
<b:case value="[Nilai 2]" />
 [Keluaran jika evaluasi var sama dengan Nilai 2]
[... nilai lainnya]
<b:default />
 [Keluaran jika evaluasi var tidak sama dengan b:case lainnya yang dinyatakan]
</b:switch>

Contoh

Contoh ini menunjukkan cara mendapatkan keluaran header yang berbeda, tergantung pada jenis laman yang sedang dirender.

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

Kapan Expression digunakan

Anda dapat menggunakan atribut expr untuk menyetel nilai atribut berdasarkan nilai-nilai dalam kamus data. 

Contoh

• <a expr:href='data:blog.homepageUrl'>Beranda</a>
  Link beranda dengan URL beranda blog.
• <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>RSS Pos</a>
  Link dengan URL umpan RSS pos blog. Operator ‘+' merangkai dua string.
• <a expr:class='data:post.allowComments ? "comment" : "no-comment">Komentar</a>
  Link dengan kelas "comment" jika komentar diperbolehkan, dan "no-comment" jika tidak diperbolehkan. Operator terner (?:) mengambil nilai boolean tertentu dan memilih nilai pertama (setelah ?) jika boolean itu benar, atau nilai kedua (setelah :) jika boolean salah.

Kapan menggunakan Evaluated Expression

Anda dapat menggunakan tag b:eval untuk mengevaluasi ekspresi yang lebih rumit dari tag data standar.

Format

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

Contoh

• ketinggian minimal: <b:eval expr="data:newWidth * data:height / data:width" />px;
  Output berupa ketinggian relatif yang dihitung berdasarkan nilai lebar yang baru.
• <b:eval expr="data:post.labels[0].url" />
  Output berupa URL label pos pertama.
• <b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
  Output berupa "Comment" jika komentar diperbolehkan, dan "Comment Disabled" jika tidak diperbolehkan. Perhatikan bahwa ekspresi ini menggunakan operator terner.

Kapan menggunakan variable alias

Anda dapat menggunakan tag b:with untuk menyimpan sementara nilai ekspresi yang dihitung dan menghindari ekspresi sebaris yang rumit.

Format

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

Contoh

Untuk atribut gaya yang rumit berdasarkan variabel data, Anda dapat menghitungnya sebelum sisa keluaran HTML, sehingga HTML bertingkat 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>Header saya</h1>
   </div>
 </div>
</b:with>

Perhatikan bahwa variabel hanya akan ada untuk nodus anak dari tag b:with.

Dalam widget ini, Anda dapat melihat contoh penggunaan dari tag 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>