[WebDesign] Hướng dẫn tích hợp plugin Reading Time cho website

Đây là 1 tiện ích khá hay cho các website, nó giúp người đọc ước lượng được thời gian cần thiết để đọc hết nội dung của bài viết thông qua đo đếm số lượng từ có trong nội dung bài. Chức năng này cũng xuất hiện ở 1 vài trang docs của Microsoft.

Tại thời điểm viết bài tiện ích đang có phiên bản 2.0.0. Bạn có thể truy cập vào https://cdnjs.com/libraries/reading-time để cập nhật bản mới nhất

Để áp dụng nó cho blog của bạn hãy theo chỉ dẫn sau đây

Tìm trong template của mình với từ khóa class='post-meta . Đây có thể tạm gọi là phần mô tả ngắn gọn của bài viết, hầu hết template đều dùng để hiển thị tác giả, ngày đăng bài, nhận xét,... bạn đặt đoạn code sau vào vị trí mong muốn

<span class='reading-time'><i class='fa fa-bar-chart'></i> <span class='eta'/> to read</span>

Trong đó class eta sẽ dùng để hiển thị số phút cần thiết để đọc xong bài viết, các thành phần khác bạn có thể tùy chỉnh theo ý muốn

Chức năng này chỉ dùng cho bài viết nên ta có thể dùng cặp thẻ b:if để giới hạn js, tối ưu load trang. Chèn đoạn mã sau trước thẻ đóng </body>

<b:if cond='data:view.isPost'> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(function(){$(".post-body").readingTime()});
//]]></script>
</b:if> 

Trong đó .post-body là class chứa toàn bộ nội dung của bài viết và hầu hết template đều có nên bạn không nhất thiết phải quan tâm đến nó

Trong trường hợp không muốn load tài nguyên từ cdn có thể dùng code trực tiếp

<b:if cond='data:view.isPost'> 
<script type='text/javascript'>//<![CDATA[
!function(e){e.fn.readingTime=function(n){var t={readingTimeTarget:".eta",wordCountTarget:null,wordsPerMinute:270,round:!0,lang:"en",lessThanAMinuteString:"",prependTimeString:"",prependWordString:"",remotePath:null,remoteTarget:null,success:function(){},error:function(){}},i=this,r=e(this);i.settings=e.extend({},t,n);var a=i.settings;if(!this.length)return a.error.call(this),this;if("it"==a.lang)var s=a.lessThanAMinuteString||"Meno di un minuto",l="min";else if("fr"==a.lang)var s=a.lessThanAMinuteString||"Moins d'une minute",l="min";else if("de"==a.lang)var s=a.lessThanAMinuteString||"Weniger als eine Minute",l="min";else if("es"==a.lang)var s=a.lessThanAMinuteString||"Menos de un minuto",l="min";else if("nl"==a.lang)var s=a.lessThanAMinuteString||"Minder dan een minuut",l="min";else if("sk"==a.lang)var s=a.lessThanAMinuteString||"Menej než minútu",l="min";else if("cz"==a.lang)var s=a.lessThanAMinuteString||"Méně než minutu",l="min";else if("hu"==a.lang)var s=a.lessThanAMinuteString||"Kevesebb mint egy perc",l="perc";else var s=a.lessThanAMinuteString||"Less than a minute",l="min";var u=function(n){if(""!==n){var t=n.trim().split(/\s+/g).length,i=a.wordsPerMinute/60,r=t/i;if(a.round===!0)var u=Math.round(r/60);else var u=Math.floor(r/60);var g=Math.round(r-60*u);if(a.round===!0)e(a.readingTimeTarget).text(u>0?a.prependTimeString+u+" "+l:a.prependTimeString+s);else{var o=u+":"+g;e(a.readingTimeTarget).text(a.prependTimeString+o)}""!==a.wordCountTarget&&void 0!==a.wordCountTarget&&e(a.wordCountTarget).text(a.prependWordString+t),a.success.call(this)}else a.error.call(this,"The element is empty.")};r.each(function(){null!=a.remotePath&&null!=a.remoteTarget?e.get(a.remotePath,function(n){u(e("<div>").html(n).find(a.remoteTarget).text())}):u(r.text())})}}(jQuery);

$(function(){$(".post-body").readingTime()});
//]]></script>
</b:if> 

Ngoài ra nếu bạn muốn vọc vạch thêm thì có thể đọc file docs của tác giả để cấu hình theo ý thích tại https://github.com/michael-lynch/reading-time/blob/master/README.md

Vậy thôi, thủ thuật không quá khó đúng không !

Good Luck !