Menggunakan `B:Loop` - Dewa Blogger

Halaman

    Social Items

Buy Now

Menggunakan `B:Loop`

Tag <b:loop> berfungsi untuk melaksanakan iterasi data berupa koleksi. Tag ini memerlukan setidaknya dua buah atribut yakni 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 ibarat ini:

<ul>   <li>foo</li>   <li>bar</li>   <li>baz</li>   <li>qux</li> </ul>

Beberapa atribut opsional ibarat index dan reverse juga sanggup digunakan. Atribut index berfungsi untuk menamai variabel yang nantinya sanggup 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 ibarat 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 ibarat ini:

<ul>   <li>1. qux</li>   <li>2. baz</li>   <li>3. bar</li>   <li>4. foo</li> </ul>

Navigasi Otomatis

Kalau kau cukup percaya diri, kau sanggup memakai fitur ini untuk menciptakan deret navigasi atau tautan membuatkan 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 ibarat 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 saat URL pada address bar sama dengan URL pada tautan di dalam item navigasi terkait.


Sumber https://www.dte.web.id/