Menggunakan `b:loop`

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.

Share this post