Hiển thị phân loại nhãn (label) theo ý muốn

Bài viết này mình sẽ hướng dẫn phân loại hiển thị các label (nhãn) theo ý muốn
Các bạn vào link demo và xem ở phần như hình ảnh dưới Và ở trong bài viết demo trên mình đã đặt các nhãn là "Tác giả: Motoki Monma" , "Hài hước", "Hành động", "Thể thao", "Hoàn thành" và các nhãn này tự sắp xếp nằm đúng vị trí của nó

Cài đặt

Chỉ định chỉ hiển thị nhãn nào đấy

<b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:label.name contains &quot;Tác giả:&quot;'>
          <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
        </b:if>
      </b:loop>
</b:if>

Như đoạn code trên là sẽ chỉ hiển thị những nhãn trong đó có chứa Tác giả:

Hiển thị tất cả các nhãn trừ nhãn chỉ định

<b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
        <b:if cond='!(data:label.name contains &quot;Tác giả:&quot;) and !(data:label.name contains &quot;Hoàn thành&quot;) and !(data:label.name contains &quot;Đang cập nhật&quot;)'>
          <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
        </b:if>
      </b:loop>
</b:if>

Như đoạn code trên là hiển thị tất cả các nhãn trừ nhãn có chứa Tác giả: và Hoàn thành và Đang cập nhật

Kết hợp lại

<div class='thongtin'>  
   <div class='info'><h3>Tác giả:</h3>
    <span class='post-labels'>
      <b:if cond='data:post.labels'>
        <b:loop values='data:post.labels' var='label'>
          <b:if cond='data:label.name contains &quot;Tác giả:&quot;'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
          </b:if>
        </b:loop>
      </b:if>
    </span>
  </div>

  <div class='info'><h3>Thể loại:</h3>
    <span class='post-labels'>
      <b:if cond='data:post.labels'>
        <b:loop values='data:post.labels' var='label'>
          <b:if cond='!(data:label.name contains &quot;Tác giả:&quot;) and !(data:label.name contains &quot;Hoàn thành&quot;) and !(data:label.name contains &quot;Đang cập nhật&quot;)'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:if>
        </b:loop>
      </b:if>
    </span>
  </div>  

  <div class='info'><h3>Trạng Thái:</h3>
    <span class='post-labels'>
      <b:if cond='data:post.labels'>
        <b:loop values='data:post.labels' var='label'>
          <b:if cond='data:label.name contains &quot;Hoàn thành&quot; or data:label.name contains &quot;Đang cập nhật&quot;'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
          </b:if>
        </b:loop>
      </b:if>
    </span>
  </div>
</div>

Trong đoạn code trên ta phân tích như sau:

• Ở phần thông tin: Chỉ hiển thị nhãn có chứa Tác giả:
• Ở phần thể loại: Hiển thị tất cả nhãn chỉ trừ 3 nhãn có chứa từ Tác giả:, Hoàn thành, Đang cập nhật
• Ở phần trạng thái:Chỉ hiển thị nhãn có chứa Hoàn thành, Đang cập nhật

Như vậy có lẽ anh em cũng biết về cơ chế hoạt động của đoạn code rồi đúng không?
Thêm chút style

.thongtin h3 {
    margin: 0 10px 0 0;
    padding: 0;
    font-size: unset;
    font-weight: bold;
    line-height: normal;
    color: #cc6600;
}
.info {
    display: flex;
    margin: 0 0 10px;
}

Bonus

Đối với ví dụ trên, nếu như áp dụng đúng như trên thì phần tác giả sẽ hiển thị cả như sau Tác giả: Motoki Monma, như vậy sẽ xuất hiện 2 lần từ Tác giả:. Mà nếu không đặt tên nhãn có từ Tác giả: thì phần hiển thị không hiểu để chỉ định nó phải nằm ở vị trí đấy. Phương án để khắc phục là ta dùng đoạn js sau để loại bỏ từ Tác giả: trong link của nhãn đi để không ảnh hưởng đến việc hiển thị

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var labels = document.querySelectorAll('.post-labels a');
    labels.forEach(function(label) {
      var labelText = label.textContent;
      labelText = labelText.replace('Tác giả:', '');
      label.textContent = labelText.trim();
    });
  });
</script>

Vậy là xong, anh em có thắc mắc cứ để lại nhận xét, chúc anh em một ngày vui! 👌