Menggunakan `b:loop`
Tabel Konten
Tag <b:loop>
berfungsi untuk melakukan iterasi data berupa koleksi. Tag ini memerlukan setidaknya dua buah atribut yaitu var
untuk menamai variabel dan values
untuk menampung keseluruhan data.
<ul>
<b:loop values='["foo", "bar", "baz", "qux"]' var='v'>
<li><data:v/></li>
</b:loop>
</ul>
Hasil keluaran nantinya akan menjadi seperti ini:
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
<li>qux</li>
</ul>
Beberapa atribut opsional seperti index
dan reverse
juga dapat digunakan. Atribut index
berfungsi untuk menamai variabel yang nantinya dapat kita gunakan untuk menampilkan posisi data dimulai dari indeks 0
.
<ul>
<b:loop values='["foo", "bar", "baz", "qux"]' var='v' index='k'>
<li><b:eval expr='data:k + 1'/>. <data:v/></li>
</b:loop>
</ul>
Hasil keluaran nantinya akan menjadi seperti ini:
<ul>
<li>1. foo</li>
<li>2. bar</li>
<li>3. baz</li>
<li>4. qux</li>
</ul>
Atribut reverse
berfungsi untuk membalik koleksi data tanpa mengubah urutan indeks iterasi.
<ul>
<b:loop values='["foo", "bar", "baz", "qux"]' var='v' index='k' reverse='true'>
<li><b:eval expr='data:k + 1'/>. <data:v/></li>
</b:loop>
</ul>
Hasil keluaran nantinya akan menjadi seperti ini:
<ul>
<li>1. qux</li>
<li>2. baz</li>
<li>3. bar</li>
<li>4. foo</li>
</ul>
Navigasi Otomatis
Kalau kamu cukup percaya diri, kamu bisa menggunakan fitur ini untuk membuat deret navigasi atau tautan berbagi otomatis:
<b:with var='navigation' value='[{
title: "Home",
url: data:blog.homepageUrl
}, {
title: "About",
url: path(data:blog.url, "p/about.html")
}, {
title: "Contact",
url: path(data:blog.url, "p/cotact.html")
}, {
title: "Search",
url: path(data:blog.url, "search")
}, {
title: "Example",
url: "//example.com"
}]'>
<nav>
<ul>
<b:loop values='data:navigation' var='v'>
<li>
<b:class cond='data:blog.url == data:v.url' name='active'/>
<a expr:href='data:v.url'><data:v.title/></a>
</li>
</b:loop>
</ul>
</nav>
</b:with>
Hasil keluaran nantinya akan menjadi seperti ini:
<nav>
<ul>
<li class='active'>
<a href='http://www.dte.web.id/'>Home</a>
</li>
<li>
<a href='http://www.dte.web.id/p/about.html'>About</a>
</li>
<li>
<a href='http://www.dte.web.id/p/cotact.html'>Contact</a>
</li>
<li>
<a href='http://www.dte.web.id/search'>Search</a>
</li>
<li>
<a href='http://example.com'>Example</a>
</li>
</ul>
</nav>
Kelas active
akan ditambahkan secara otomatis pada item navigasi ketika URL pada address bar sama dengan URL pada tautan di dalam item navigasi terkait.
3 Komentar
Adi
Apa juga bisa ditaruh di luar tag
<b:widget>
dan<b:section>
?Untuk
values
pada<b:loop>
apa bisa diisi dengan data dari JSON?bas manga
min mau tanya kalau memfilter label gimana cara nya ? misal ane punya postingan dengan judul = "mengunjungi desa jambu saat panen cabe" labe = "Pertanian", "Travel" dengan kode : <b:if cond='data:post.labels'><b:loop index='i' values='data:post.labels' var='label'><data:label.name/><data:post.title/></b:loop></b:if><data:post.body/>
hasil nya :
Pertanian,Travel, mengunjungi desa jambu saat panen cabe
isi postingan dari kode data:post.body
Nah biar hasil render nya seperti ini bagaimana :
Travel, mengunjungi desa jambu saat panen cabe
isi postingan dari kode data:post.body
NB : jadi label "Pertanian" di hilangkan... gitu
Taufik Nurrohman