Menggunakan `b:tag` dan `b:attr`
Tabel Konten
b:tag
Tag <b:tag>
digunakan untuk membuat tag HTML dengan nama tag yang dapat ditentukan berdasarkan kondisi tertentu. Secara default dapat dinyatakan sebagai berikut:
<b:tag name='span'>
foo
</b:tag>
Hasil:
<span>
foo
</span>
Menggunakan ternary operator, kita bisa membuat nama tag berdasarkan kondisi tertentu:
<b:tag expr:name='data:view.isSingleItem ? "span" : "a"'>
foo
</b:tag>
Hasil ketika berada di halaman indeks:
<a>
foo
</a>
Hasil ketika berada di halaman item:
<span>
foo
</span>
Versi Lama
<b:if cond=' … '>
<a>
foo
</a>
<b:else/>
<span>
foo
</span>
</b:if>
b:attr
Tag <b:attr>
digunakan untuk membuat atribut HTML yang akan ditambahkan kepada tag induknya hanya ketika memenuhi kondisi tertentu. Secara default dapat dinyatakan sebagai berikut:
<div>
<b:attr cond='data:view.isHomepage' name='id' value='home'/>
</div>
Hasil ketika berada di halaman muka:
<div id='home'></div>
Hasil ketika berada di selain halaman muka:
<div></div>
Untuk atribut class
, Blogger sudah memiliki API yang sesuai yaitu b:class
. Kedua sintaks di bawah ini adalah identik:
<b:attr cond=' … ' name='class' value='home'/>
<b:class cond=' … ' name='home'/>
Versi Lama
<div<b:if cond=' … '> class='home'</b:if>>
foo
</div>
Tip
Kombinasi <b:tag>
dan <b:attr>
dapat meringkas beberapa markup HTML yang dulu perlu dituliskan berulang kali karena kita hanya bisa mengandalkan tag <b:if>
:
Sebelum
<h3 class='post-title'>
<b:if cond='data:blog.pageType === "item"'>
<span>
<data:post.title/>
</span>
<b:else/>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' target='_blank'>
<data:post.title/>
</a>
<b:else/>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
</b:if>
</b:if>
</h3>
Sesudah
<h3 class='post-title'>
<b:tag expr:name='data:view.isSingleItem ? "span" : "a"'>
<b:attr cond='data:view.isMultipleItems' name='href' value='data:post.link ?: data:post.url'/>
<b:attr cond='data:view.isMultipleItems and data:post.link' name='target' value='_blank'/>
<data:post.title/>
</b:tag>
</h3>
1 Komentar
Riedayme
nice post, menerapkan amp untuk versi mobile saja dengan menambahkan b:attr dibawah tag html dengan kondisi mobile pasti keren