Ghim nhận xét blogspot lên trên cùng

Trong các ứng dụng tin nhắn, hay các bài viết ở forum thường có chức năng ghim nội dung bài viết, hình ảnh quan trọng nhằm tạo sự chú ý, nhắc nhở hoặc nhấn mạnh tới người khác. Và ở bài viết này mình sẽ hướng dẫn một thủ thuật nhỏ để áp dụng được việc này cho phần nhận xét của blogspot

Xem Demo tại phần nhận xét ở bài viết này

Cách thức hoạt động

Nói qua một chút về cách thức để đẩy một nhận xét lên trên cùng ta sẽ áp dụng cấu trúc như sau
Ví dụ ta có đoạn HTML sau

<ol>
  <li>dòng số 1</li>
  <li>dòng số 2</li>
  <li>dòng số 3</li>
  <li>dòng số 4</li>
  <li>dòng số 5</li>
</ol>

Vậy làm sao để dòng số 5 đẩy lên trên cùng? Ta sẽ áp dụng đoạn CSS sau

ol {
  display: flex;
  flex-direction: column;
}

.pin-cmt {
  order: -1; /* Đặt order là -1 để đưa mục có class "pin-cmt" lên trên cùng */
}

Sau đó ta phải gắn cho thẻ li chứa nội dung dòng số 5 một class là "pin-cmt" như sau

<ol>
  <li>dòng số 1</li>
  <li>dòng số 2</li>
  <li>dòng số 3</li>
  <li>dòng số 4</li>
  <li class="pin-cmt">dòng số 5</li>
</ol>

Và bằng JS ta sẽ cho nhận biết rằng nhận xét muốn ghim sẽ nội dung là "dòng số 5" để gắn class "pin-cmt" vào cho nó

document.addEventListener("DOMContentLoaded", function() {
    var listItems = document.querySelectorAll("li");
    listItems.forEach(function(item) {
        if (item.textContent.trim() === "dòng số 5") {
            item.classList.add("pin-cmt");
        }
    });
});

Áp dụng thực tế

Phía trên chỉ là một ví dụ đơn giản thôi, trên thực tế phần nhận xét của blogspot phức tạp hơn nhiều. Nhưng chỉ cần biết được cách thức hoạt động của nó chúng ta hoàn toàn có thể kiểm soát được

Và khi gắn được thêm class "pin-cmt" vào nhận xét rồi thì ta có thể dùng CSS để làm cho nó đặc biệt hơn so với những nhận xét khác ngoài việc nó làm ở trên cùng 😁

Như ở Demo về thủ thuật tại bài viết này, mình còn gắn thêm một điều kiện nữa là kiểm tra xem <li> có chứa một phần tử con có class là "comment-admin" không đồng thời trong nội dung có chứa từ "[pin]" hay không thì mới áp dụng thêm class "pin-cmt" cho <li> nhằm mục đích chỉ cho phép admin của blog mới có quyền ghim nhận xét

Anh em thử nhé, nếu có thắc mắc cùng để lại nhận xét để hoàn thiện hơn nhé, bye! 👌