Chia sẻ Blog

Light ModeDark Mode

Blog chia sẻ về thủ thuật.

[Jekyll] Hướng dẫn thêm button tải Disqus comment

Published 4 years ago - 1 min read

Để tăng tốc độ trang blog, mặc định bạn có thể không cho phép tải comment Disqus. Khi người đọc muốn comment chỉ cần click vào nút "Add/Load comments" (Thêm/tải comment) là hệ thống comment sẽ được tải về.

Bước 1

Trong thư mục _include tạo file có tên disqus_comments.html với nội dung:

<div id="disqus_thread">
  <a class="comment-btn" href="#" onclick="disqus();return false;" role="button" rel="nofollow">Add/Load Comments</a>
</div>
<script type="text/javascript">
    var disqus_shortname = "chiasewebapp";
    var disqus_loaded = false;
    function disqus() {
       if (!disqus_loaded)  {
           disqus_loaded = true;
           var e = document.createElement("script");
        e.type = "text/javascript";
        e.async = true;
        e.src = "//" + disqus_shortname + ".disqus.com/embed.js";
        (document.getElementsByTagName("head")[0] ||
         document.getElementsByTagName("body")[0])
        .appendChild(e);
      }
    }  
</script>

Chú ý thay chiasewebapp bằng tên trên Disqus (shortname), xem thêm cách đăng ký Disqus hướng dẫn đăng ký Disqus

Bước 2

Trong thư mục _layout, mở file posst.html để chỉnh sửa. Phía dưới cùng thêm dòng bên dưới (vị trí có thể thay đổi tùy theo bố cục trang bài viết của blog):

<center>{% include disqus_comments.html %}</center>

Xong, bạn có thể thêm/ chỉnh sửa CSS để trang trí cho button tải comment, hoặc sử dụng:

.comment-btn {
    color: #fff;
    background-color: #9E9E9E;
    padding: 10px;
}

Lưu lại và xem kết quả