3.6 Tag Widget untuk Tata Letak
Bila
menggunakan template Tata Letak untuk membuat bagian badan blog, Anda
dapat menggunakan widget untuk menambahkan elemen laman seperti gambar
dan blogroll.
Untuk melakukannya, tulis konten dalam
Jika Anda membuat lebih banyak includable dengan ID berbeda, includable tidak akan ditampilkan secara otomatis. Namun, jika membuat includable dengan
Atribut-atribut untuk tag b:include adalah sebagai berikut:
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).
Tag
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,
Perhatikan bagaimana "i" mengambil nilai setiap pos bergiliran, sehingga Anda bisa mendapatkan judul dari setiap pos.
Tag loop juga memiliki atribut indeks opsional, yang memberikan indeks berbasis nol dari pengulangan saat ini melalui loop.
Contoh ini akan membuat daftar tidak berurutan dari:
Tag
Untuk "condition", Anda dapat memasukkan apa pun yang mengevaluasi benar atau salah. Beberapa tag data hanya sekadar nilai benar/salah itu sendiri, misalnya
Anda dapat menggunakan atribut expr untuk menyetel nilai atribut berdasarkan nilai-nilai dalam kamus data.
Untuk atribut gaya yang rumit berdasarkan variabel data, Anda dapat menghitungnya sebelum sisa keluaran HTML, sehingga HTML bertingkat lebih mudah dibaca.
Perhatikan bahwa variabel hanya akan ada untuk nodus anak dari tag
Klik untuk melihat contoh bagaimana semua tag ini digunakan dalam HTML untuk widget PageList di blog Anda.
Jenis tag
Bagian ini menjelaskan HTML yang dapat Anda gunakan dalam tag penutup.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 menggunakanb: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 tagb: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 tautan balik.<b:if cond='data:blog.pageType == "item"'>
Benar jika laman saat ini adalah laman item (laman pos).<b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
Benar jika laman saat ini adalah laman item (laman pos) dan pos saat ini disetel untuk menampilkan tautan 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 laman saat ini adalah laman statis (bukan laman 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 laman saat ini adalah pos tertentu, atau sebuah laman.
Kapan Switch digunakan
Anda dapat menggunakan tagb: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>
Tautan beranda dengan URL beranda blog.<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>RSS Pos</a>
Tautan dengan URL umpan RSS pos blog. Operator ‘+' merangkai dua string.<a expr:class='data:post.allowComments ? "comment" : "no-comment">Komentar</a>
Tautan 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 tagb: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. Lihat artikel Ekspresi dalam tag tata letak.
Kapan menggunakan variable alias
Anda dapat menggunakan tagb: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
.Lihat contoh
Klik untuk melihat contoh bagaimana semua tag ini digunakan dalam HTML untuk widget PageList di blog Anda.
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'>
<selectexpr:id='data:widget.instanceId + "_select"'
><b:loop values='data:links' var='link'> <b:if cond='data:link.isCurrentPage'>
<optionexpr:value='data:link.href'
selected='selected'><data:link.title/></option><b:else/>
<optionexpr:value='data:link.href'
><data:link.title/></option></b:if> </b:loop>
</select> <span class='pagelist-arrow'>&#9660;</span><b:else/>
<ul><b:loop values='data:links' var='link'> <b:if cond='data:link.isCurrentPage'>
<li class='selected'> <aexpr:href='data:link.href'
><data:link.title/>
</a> </li> <b:else/> <li> <aexpr: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>
<<< KEMBALI