Làm thế nào để Lazy Load Disqus Nhận xét trên Blog Blogger - KIEMLUA24H
   

Làm thế nào để Lazy Load Disqus Nhận xét trên Blog Blogger

How to Lazy Load Disqus Comments on a Blogger Blog
How to Lazy Load Disqus Comments on a Blogger BlogSố lượng lớn các trang web sử dụng hệ thống nhận xét Disqus để thu hút khách truy cập của họ. Một số lượng lớn các trang web này chạy trên hệ thống quản lý nội dung có hệ thống nhận xét riêng. Tuy nhiên, một số lượng lớn chủ sở hữu trang web từ bỏ giải pháp gốc của nền tảng để ủng hộ Disqus. Hướng dẫn từng bước này đặc biệt nhằm vào các blog chạy trên nền tảng Blogger của Google. Kỹ thuật tải bình luận lười biếng được sử dụng để tăng tốc thời gian tải trang. Điều này mang lại trải nghiệm duyệt web tốt hơn cho những khách truy cập sử dụng kết nối internet chậm hơn. Nó cũng tốt cho các trang web nhận được nhiều bình luận trên mỗi trang. Giải pháp được giải thích bên dưới hoạt động với IE9 + và tất cả các trình duyệt web hiện đại. Thực hiện kỹ thuật tải chậm này vào cuối tuần khi lưu lượng truy cập ở mức thấp nhất. Kiến thức cơ bản về mã hóa CSS có thể giúp bạn triển khai kỹ thuật này theo cách tốt hơn nhiều. Ngoại trừ điều đó, bạn chỉ cần sao chép và dán mã vào đúng vị trí trong mẫu thiết kế. Hãy tải chậm hệ thống Disqus trên blog Blogger của chúng tôi.

Biểu trưng nhận xét Disqus màu xanh lam

Phương pháp này để tải chậm nhận xét Disqus (được sửa đổi cho nền tảng Blogger) được lấy cảm hứng từ Bài báo về thủ thuật CSS nơi ban đầu nó được chia sẻ bởi Osvaldas Valutis.

Bắt đầu với việc sao lưu mẫu thiết kế

Luôn luôn thực hành sao lưu mẫu thiết kế Blogger của bạn trước khi tích hợp các loại tùy chỉnh như vậy. Nó đảm bảo rằng nếu có sự cố, bạn có thể dễ dàng áp dụng lại mẫu thiết kế cũ.

Đối với kiểu tùy chỉnh mã như vậy, việc sao lưu nội dung là không cần thiết vì nó không liên quan trực tiếp đến mẫu thiết kế.

Lời nhắc đối thoại sao lưu mẫu Blogger
Để sao lưu mẫu blog của bạn, hãy mở trang tổng quan và đi tới Chủ đề → Sao lưu / Khôi phục Lựa chọn. Sử dụng Tải xuống chủ đề để lưu một bản sao giống nhau.

Như đã đề cập trong hình trên, chỉ lưu bản sao trên màn hình nền là không đủ. Lưu nó vào một trong những nền tảng lưu trữ đám mây ưa thích của bạn để hoàn toàn yên tâm.

Hủy kích hoạt và loại bỏ hệ thống nhận xét Disqus Gốc hoặc Hiện tại

Sau khi sao lưu mẫu, đã đến lúc xóa hệ thống bình luận hiện đang hoạt động trên blog. Việc xóa bỏ hệ thống nhận xét đang hoạt động rõ ràng là cần thiết để hệ thống nhận xét tải chậm của chúng tôi có thể thay thế.

Có 3 tình huống khác nhau khi xóa hệ thống nhận xét hiện có khỏi blog Blogger. Blog Blogger có thể có hệ thống nhận xét của Google+, hệ thống nhận xét gốc của Blogger hoặc hệ thống nhận xét của bên thứ ba như Disqus ở trạng thái hoạt động.

Cài đặt hệ thống nhận xét blog trên Blogger
Nếu blog của bạn đang sử dụng nhận xét trên Google+ hoặc hệ thống nhận xét gốc của Blogger, hãy truy cập Cài đặt → Bài đăng, nhận xét và chia sẻ → Nhận xét phần.

Tại đây, chọn Ẩn giấu cho Nhận xét Vị trí tùy chọn phụ. Và, trong Nhận xét trên Google+ phần, chọn Không cho Sử dụng Google+ Nhận xét trên blog này tùy chọn phụ.

Các cài đặt này đảm bảo rằng cả hai hệ thống nhận xét này đều bị vô hiệu hóa và bị xóa khỏi blog.

Xóa tiện ích Blogger Disqus
Nếu bạn đang sử dụng hệ thống nhận xét Disqus trên blog của mình, hãy truy cập Bố trí và nhấp vào Biên tập liên kết cho tiện ích Disqus. Sau đó, nhấp vào Tẩy để xóa hệ thống Disqus khỏi blog.

Sau khi xóa, hãy xóa bộ nhớ cache của trình duyệt web của bạn và sau khi tải lại blog của bạn để đảm bảo hệ thống nhận xét hiện có thực sự biến mất. Bạn có thể nhận thấy một thời gian tải trang nhanh hơn sau khi hoàn thành bước này.

Tích hợp hệ thống Lazy-Loading Disqus trong Mẫu

Và bây giờ, đã đến lúc làm công việc thực sự. Chúng tôi đã thực hiện sao lưu mẫu trong bước đầu tiên để chúng tôi có thể bắt đầu trực tiếp quá trình chỉnh sửa mẫu để cài đặt hệ thống nhận xét Disqus tải chậm.

Để làm như vậy, hãy truy cập Chủ đề → Chỉnh sửa HTML và mở mã nguồn mẫu thiết kế. Trong khuôn mẫu <head> gắn thẻ, tìm kết thúc </style> và ngay trước thẻ này, hãy dán mã CSS sau.


.disqus-loading {
 border: 2px solid #8d8888;
 text-align: center;
 background-color: #e1e1e1;
 font-size: 18px;
 font-weight: 300;
 color: #777;
 padding: 12px 0;
}

.disqus-loading.is-hidden { 
 display: none;
}

 

Mã CSS này tạo kiểu cho thanh thông báo tải nhận xét và cũng ẩn nó qua một lớp riêng biệt thông qua mã JavaScript. Vui lòng sửa đổi giao diện của thanh thông báo này theo sở thích của bạn.

Tiếp theo, tìm đoạn mã HTML sau trong mẫu.


<div class='post-footer-line post-footer-line-3'>

 

Ngay bên dưới dòng này, dán phần sau if câu lệnh điều kiện.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='disqus-loading'>Loading comments&amp;hellip;</div>
<div class='disqus'/>
<!-- Paste JavaScript code given below - here! -->
</b:if>

 

Bạn có thể nhận thấy rằng trong đoạn mã được đưa ra ở trên, có một nhận xét về việc chèn mã JavaScript vào chính vị trí đó. Sau đây là đoạn mã JavaScript mà bạn nên thay thế bằng nhận xét đó.


<script>
/*<![CDATA[*/
!function(t,e,n){"use strict";var o=function(t,e){var n,o;return function(){var i=this,r=arguments,d=+new Date;n&&d<n+t?(clearTimeout(o),o=setTimeout(function(){n=d,e.apply(i,r)},t)):(n=d,e.apply(i,r))}},i=!1,r=!1,d=!1,s=!1,a="unloaded",u=!1,l=function(){if(!u||!e.body.contains(u)||"loaded"==u.disqusLoaderStatus)return!0;var n,o,i=t.pageYOffset,l=(n=u,o=n.getBoundingClientRect(),{top:o.top+e.body.scrollTop,left:o.left+e.body.scrollLeft}).top;if(l-i>t.innerHeight*r||i-l-u.offsetHeight-t.innerHeight*r>0)return!0;var c,f,p,y=e.getElementById("disqus_thread");y&&y.removeAttribute("id"),u.setAttribute("id","disqus_thread"),u.disqusLoaderStatus="loaded","loaded"==a?DISQUS.reset({reload:!0,config:d}):(t.disqus_config=d,"unloaded"==a&&(a="loading",c=s,f=function(){a="loaded"},(p=e.createElement("script")).src=c,p.async=!0,p.setAttribute("data-timestamp",+new Date),p.addEventListener("load",function(){"function"==typeof f&&f()}),(e.head||e.body).appendChild(p)))};t.addEventListener("scroll",o(i,l)),t.addEventListener("resize",o(i,l)),t.disqusLoader=function(t,n){n=function(t,e){var n,o={};for(n in t)Object.prototype.hasOwnProperty.call(t,n)&&(o[n]=t[n]);for(n in e)Object.prototype.hasOwnProperty.call(e,n)&&(o[n]=e[n]);return o}({laziness:1,throttle:250,scriptUrl:!1,disqusConfig:!1},n),r=n.laziness+1,i=n.throttle,d=n.disqusConfig,s=!1===s?n.scriptUrl:s,(u="string"==typeof t?e.querySelector
/*]]>*/
</script>
<script>
 disqusLoader( &#39;.disqus&#39;,
 {
  scriptUrl:  &#39;//username.disqus.com/embed.js&#39;,
  disqusConfig: function()
  {
   this.page.identifier  = &#39;<data:post.id/>&#39;;
   this.page.url   = &#39;<data:blog.canonicalUrl/>&#39;;
   this.page.title   = &#39;<data:post.title/>&#39;;
   this.callbacks.onReady = [function()
   {
    var el = document.querySelector( &#39;.disqus-loading&#39; );
    if( el.classList )
     el.classList.add( &#39;is-hidden&#39; ); // IE 10+
    else
     el.className += &#39; &#39; + &#39;is-hidden&#39;; // IE 8-9
   }];
  }
 }); 
</script>

 

Sau khi dán mã JavaScript này vào đúng vị trí, bạn chỉ phải thực hiện một thay đổi nhỏ trong đó. Đơn giản, thay thế username với tên người dùng tài khoản Disqus thực của bạn. Không làm như vậy sẽ làm cho mã trở nên vô dụng, vì vậy hãy đảm bảo rằng bước quan trọng này không bị bỏ qua.

Bây giờ hãy lưu mẫu và xóa bộ nhớ cache của trình duyệt. Sau đó, mở bất kỳ bài đăng blog nào để xem mọi thứ có hoạt động bình thường hay không. Cuộn xuống để đến cuối bài viết và bạn sẽ thấy quá trình tải phần nhận xét của Disqus diễn ra ngay lúc đó.

Sau khi mở bài đăng blog đầu tiên, nếu khách truy cập mở thêm bài viết, dữ liệu chuỗi nhận xét cho chính bài đăng đó sẽ được tìm nạp ngay khi anh ta cuộn xuống trang.

Quá trình này để lại dấu vết rất nhẹ vì phần lớn dữ liệu Disqus đã có ở dạng được lưu trong bộ nhớ cache. Hãy nhớ rằng, hệ thống tải bình luận lười được tối ưu hóa này sẽ chỉ hoạt động trên các trang bài đăng duy nhất. Nó sẽ không xuất hiện trên các trang tĩnh.

Chia sẻ ngay
  
 
 
   

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Vui lòng bật JavaScript!
Nếu không bật trang không thể hoạt động bình thường![ ? ]