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

23.3.24 | 3 nhận xét | lượt xem
Nội Dung Chính [Ẩn] [Hiển thị]
    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ả:Hoàn thànhĐ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! 👌
    Bạn đang xem bài viết "Hiển thị phân loại nhãn (label) theo ý muốn" tại chuyên mục: Blogspot , Tips

      3

      nhận xét
      Mới nhất ⇅

      Chèn hình ảnh: Chỉ cần dán link hình ảnh - Upload ảnh

      Chèn code: [pre]Code đã mã hóa [/pre]

      Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

      Chèn link: Click để chèn link