Mecha versi 2.6.4 sudah dirilis!

Menggunakan `b:loop`

Tabel Konten
  1. Navigasi Otomatis 

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

<b:loop values='data:post.labels' var='label'>
  <b:if cond='data:label.name not in ["Pertanian", "Label 1", "Label 2", "Label 3"]'>
    <data:label.name/>
  </b:if>
</b:loop>

Komentar telah ditutup.