Tampilan Posting Berbeda-Beda Berdasarkan Label Tanpa JavaScript

Opsi 1: Dengan Label itu Sendiri

Kekurangan: Nama label harus valid sebagai nama kelas dalam CSS. Satu karakter spasi dalam sebuah nama label akan membuatnya berlaku sebagai dua buah kelas CSS, dua sebagai tiga, tiga sebagai empat, begitu seterusnya.

<div class='post
<b:loop values='data:post.labels' var='label'>
  post-<data:label.name/>
</b:loop>
&#39;&gt;

<!-- konten posting di sini… -->

&lt;div&gt;

Opsi 2: Dengan Nama Kelas Khusus

Kekurangan: Kondisional untuk menentukan nama kelas adalah hard-coded, karena label tidak memiliki nilai abstrak seperti halnya ID pada posting dan komentar.

<div class='post
<b:loop values='data:post.labels' var='label'>
  <b:switch var='data:label.name'>
    <b:case value='Menyenangkan'/>
post-red
    <b:case value='Jelek'/>
post-green
    <b:case value='Bosan'/>
post-blue
    <b:default/>
post-white
  </b:switch>
</b:loop>
&#39;&gt;

<!-- konten posting di sini… -->

&lt;div&gt;

Contoh CSS

.post {border-left:4px solid white}
.post-red {border-left-color:red}
.post-green {border-left-color:green}
.post-blue {border-left-color:blue}

---

Terkait: Tampilan Posting Berbeda-Beda Berdasarkan Label

Share this post