Rangkuman tag bersyarat Blogger

Pada artikel ini, saya ingin meringkas tag kondisional Blogger yang sering digunakan dalam desain antarmuka Blogspot.

Dalam proses mendesain dan menggunakan Blogger, saya sering menggunakan beberapa tag untuk pemrograman. Sekarang, izinkan saya untuk meringkas dalam artikel ini untuk referensi Anda bila diperlukan.

Jenis dasar tag Blogger

JIKA / ELSE .Kartu

Kartu <b:if> / <b:else/> Ini adalah tag bersyarat dasar yang paling umum dalam desain antarmuka Blogger. Tag ini digunakan untuk mengatur kondisi eksekusi.

Contoh struktur tag IF/ELSE di bawah ini:

<!-- Ví dụ về cú pháp thẻ IF/ELSE -->
<b:if cond='data:view.isPost'>

<b:elseif cond='data:view.isPage'/>

<b:else/>

</b:if>

Kartu Lingkaran

Kartu <b:loop> di Blogger digunakan untuk mengimplementasikan loop. Tag ini sering digunakan untuk mengekstrak data dalam array.

<!-- Ví dụ về cú pháp vòng lặp LOOP -->
<b:loop index='i' values="data:links" var="link">
<a expr:title="data:link.name"/>
<data:link.target/>
</a>
</b:loop>

Pada contoh di atas, fungsi <b:loop> Digunakan untuk mengekstrak data dari array data:linksvariabel elemen dideklarasikan var="link".

Untuk mengekstrak nilai dalam fungsi <b:loop> di atas, kami menggunakan struktur: data:"phần tử"."thuộc tính". Pada contoh di atas, elemen tautan memiliki 2 atribut target Dan name.

Menandai

Kartu <b:tag> Digunakan untuk mendeklarasikan elemen HTML di Blogger. Jenis elemen HTML ditentukan oleh atribut name.

<!-- Ví dụ về cú pháp thẻ <b:tag/> -->
<b:tag expr:href="data:blog.homepageUrl.canonical" name="a">
   SAMPLE TEXT
</b:tag>

Pada contoh di atas, kami menggunakan .tag <b:tag> untuk mendeklarasikan suatu elemen <a>. Hasil di bawah ini:

<!-- Ví dụ về cú pháp thẻ <b:tag/> -->
<a href="https://omegakd.blogspot.com">
   SAMPLE TEXT
</a>

Kelas .Kartu

Tag digunakan untuk menambahkan nama kelas ke elemen induk yang berisi tag ini. Nama kelas ditentukan oleh atribut name.

<!-- Ví dụ về cú pháp thẻ <b:class/> -->
<div class="class1">
<b:class cond='data:view.isMultipleItems' name="index-post"/>
SAMPLE TEXT
</div>

Pada contoh di atas, akan memberikan hasil seperti di bawah ini jika kondisinya cocok cond='data:view.isMultipleItems' kembali true.

<!-- Ví dụ về cú pháp thẻ <b:class/> -->
<div class="class1 index-post">
SAMPLE TEXT
</div>

Kartu inklusif

Kartu <b:includable> digunakan untuk memanggil fungsi yang dideklarasikan sebelumnya. Fungsi yang akan dipanggil ditentukan oleh atribut namedan dideklarasikan oleh atribut id.

<!-- Ví dụ về cú pháp thẻ <b:includable/> -->

<!-- Khai báo nội dung cho thẻ <b:includable/> -->
<b:includable id='postMeta' var="post">
   SAMPLE CONTENT
</b:includable>
<!-- Ví dụ về cách sử dụng thẻ <b:includable/>-->
<b:include data="post" name="postMeta"/>

Tag bersyarat Blogger

Bagian ini akan membahas jenis tag bersyarat yang dapat digunakan dalam atribut cond. Atribut bersyarat ini digunakan oleh tag berikut: , , , , , dll.

Di bawah ini adalah ringkasan kondisi yang umum digunakan dalam atribut cond:

Data struktur data: lihat

• data:view.isError: benar jika halaman tidak ditemukan. Digunakan untuk mendesain halaman Error 404.
• data:view.isBeranda: true jika beranda.
• data:view.isLabelSearch: benar jika Anda melihat halaman Label.
• data:view.isMobile: benar jika melihat dalam mode seluler.
• data:view.isPage: benar jika melihat Halaman.
• data: view.isPost: benar jika melihat Posting.
• data: view.isSearch: true jika melihat hasil pencarian.
• data:view.isSingleItem: true jika melihat satu halaman: Page/Post
• data:view.isMultipleItems: true jika melihat beberapa halaman: HomePage/Search/Archive
• data:view.isLayoutMode: true jika dilihat di pengaturan Layout di dashboard Blogger.

Lihat lebih banyak:

• Terapkan Lazy loading untuk Blogger
• Petunjuk untuk mengganti Favicon untuk Blogger

Beberapa contoh tag bersyarat

Ekstrak data dari tautan lampiran

Kita bisa mendapatkan data dari tautan terlampir dengan menggunakan tag <b:loop> sebagai contoh berikut:

<!-- Ví dụ về trích xuất dữ liệu từ liên kết đính kèm -->
<b:loop index='i' values="data:post.enclosures" var="enclosure">
   <data:enclosure.url/>
   <data:enclosure.mimeType/>
</b:loop>

Selain itu, kami juga dapat menggabungkan tag kondisional untuk memeriksa terlebih dahulu konten tautan lampiran. Pada contoh di bawah ini, gunakan tag untuk memeriksa apakah ada jenis lampiran audio sebelum membuat tautan unduhan.

<!-- Ví dụ về trích xuất dữ liệu từ liên kết đính kèm -->
<b:if cond="data:post.enclosures any (l => l.mimeType in {&quot;audio&quot;})">
   <b:loop index="i" values="data:post.enclosures" var="enclosure">
      <b:if cond="data:enclosure.mimeType == &quot;audio&quot;">
         <a expr:href="data:enclosure.url">Download</a>
      </b:if>
   </b:loop>
</b:if>

Ekstrak konten artikel

Untuk mengekstrak artikel pendek, kita dapat menggunakan tag untuk mengekstrak kontennya data:post.snippets.

<!-- Ví dụ về trích xuất nội từ bài viết -->
<p class="entry-excerpt excerpt">
   <b:eval expr="data:post.snippets.long snippet { length: 125 }"/>
</p>

Pada contoh cuplikan di atas, konten artikel dibatasi hingga 125 karakter.

Semoga artikel ini membawa ilmu yang bermanfaat untuk referensi anda dalam proses mendesain blogspot.