Tạo Auto Readmore cho Blogger với Cutter.js

Bài này của tác giả Noct, bài gốc các bạn xem tại đây
Tuy nhiên file JS của tác giả đã bị die nên mình xin phép được viết lại để hướng dẫn theo yêu cầu từ bạn @Downphim

Cách đây mấy tháng thì tôi có đọc bài giới thiệu về thư viện Cutter.js ở hỗn tạp blog, nhận thấy nó khá là thú vị. Thế là vào một ngày Chủ nhật rãnh rỗi mới thử áp dụng Cutter.js trên Blogger, kết quả thu được là một thủ thuật tạo readmore tự động mới, bèn đăng lên đây để mọi người tham khảo.

Khác với các thủ thuật auto readmore từ trước đến nay, Cutter.js giúp ta giữ lại được các thẻ HTML như in đậm, in nghiêng, màu chữ... Noct

Bước 1: Chèn đoạn code bên dưới vào trước </head>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.post-body img { display:block; float:left; margin-right: 10px; width:100px; height:100px}
</style>
<script type='text/javascript'>//<![CDATA[
(function(c,b){var d=null;d=function(){this.oApplyTo=null;this.oBackupApplyTo=null;this.oTarget=null;this.nWords=0;this.nWordsCounter=0;this.oSerialized={};this.oDocumentFragment=b.createDocumentFragment();this.bTest=false;this.nIdTest=0};d.prototype.applyTo=function(f){if(!f)return this;this.oApplyTo=f;this.oBackupApplyTo=f.cloneNode(true);return this};d.prototype.setTarget=function(f){if(!f)return this;this.oTarget=f;return this};d.prototype.setWords=function(f){if(!f)return this;this.nWords=f- 1;return this};d.prototype.trim=function(f){return f.replace(/^\s+/g,"").replace(/\s+$/g,"")};d.prototype.countWords=function(f){return this.trim(f).split(" ").length};d.prototype.getOnlyNumberOfWords=function(g,f){return this.trim(g).split(" ").splice(0,f).join(" ")};d.prototype.getFirstElementOfObject=function(g){var f=null,h="";for(h in g)if(g.hasOwnProperty(h)){f=g[h];break}return f};d.prototype.deserializeObject=function(i,h){var f=null,g="";if(i.nodeType===1){f=b.createElement(i.tagName);if(typeof i.attributes!== "undefined")for(g in i.attributes)if(i.attributes.hasOwnProperty(g))f.setAttribute(g,i.attributes[g]);h.appendChild(f)}else if(i.nodeType===3){if(typeof i.textContent!=="undefined")f=b.createTextNode(i.textContent);else if(i.data)f=b.createTextNode(i.data);else f=b.createTextNode(i.innerText);h.appendChild(f)}if(typeof i.childNodes!=="undefined")this.loopOnDeserialize(i.childNodes,f)};d.prototype.loopOnDeserialize=function(h,g){var f="";for(f in h)if(h.hasOwnProperty(f))this.deserializeObject(h[f], g)};d.prototype.deserializeSerializedObject=function(i,h){var g=false,f=null;if(typeof i==="undefined"){i=this.getFirstElementOfObject(this.oSerialized);this.oDocumentFragment=b.createDocumentFragment();g=true}if(typeof h==="undefined"){f=b.createElement("div");this.oDocumentFragment.appendChild(f);h=f}this.deserializeObject(i,h);if(typeof i.childNodes!=="undefined")this.loopOnDeserialize(i.childNodes,h)};d.prototype.serializeDomObject=function(l,i){var g=Math.random()*15412457562,f=null,n=[],p=null, h=0,m=0,k=0,o=0,j=l.childNodes.length;if(this.bTest)g="__"+(this.nIdTest+=1)+"__";if(this.nWordsCounter<this.nWords){f={};f.nodeType=l.nodeType;if(typeof l.tagName!=="undefined")f.tagName=l.tagName.toLowerCase();n=l.attributes;if(n){f.attributes={};m=n.length;for(;h<m;h+=1){p=n[h];if(p.nodeValue)f.attributes[p.name]=p.value}}if(f.nodeType===3){k=this.nWordsCounter;if(typeof l.textContent!=="undefined")this.nWordsCounter+=this.countWords(this.trim(l.textContent));else if(l.data)this.nWordsCounter+= this.countWords(this.trim(l.data));else this.nWordsCounter+=this.countWords(this.trim(l.innerText));if(this.nWordsCounter<this.nWords)if(typeof l.textContent!=="undefined")f.textContent=l.textContent;else if(l.data)f.innerText=l.data;else f.innerText=l.innerText;else if(k<this.nWords&&this.nWordsCounter>this.nWords)if(typeof l.textContent!=="undefined")f.textContent=this.getOnlyNumberOfWords(l.textContent,this.nWords-k);else if(l.data)f.innerText=this.getOnlyNumberOfWords(l.data,this.nWords-k);else f.innerText= this.getOnlyNumberOfWords(l.innerText,this.nWords-k);else if(b.body.textContent)f.textContent="";else f.innerText=""}if(l.hasChildNodes()){f.childNodes={};o=0;j=l.childNodes.length;for(;o<j;o+=1)this.serializeDomObject(l.childNodes[o],f.childNodes)}if(typeof i==="undefined")this.oSerialized[g]=f;else i[g]=f}};d.prototype.addEvent=function(f,h,g){if(f.addEventListener)f.addEventListener(h,g,false);else if(f.attachEvent)f.attachEvent("on"+h,g)};d.prototype.showAll=function(){var f=this.oTarget,g=f.parentNode; g.insertBefore(this.oBackupApplyTo,f);g.removeChild(f)};d.prototype.init=function(){this.serializeDomObject(this.oApplyTo);this.deserializeSerializedObject();var f=this.oDocumentFragment.childNodes[0];f.removeChild(this.oDocumentFragment.childNodes[0].childNodes[0]);this.oTarget.innerHTML="";this.oTarget.appendChild(this.oDocumentFragment)};d.run=function(k,f,j,g,i){var h=new d;h.applyTo(k).setTarget(f).setWords(j);h.init()};c.Cutter=d})(window,document);
//]]></script>
</b:if>

Bạn có thể thay đổi kích thước ảnh đại diện (100x100)

Bước 2: tìm đến đoạn <data:post.body/> và thay thế bằng

<div class='post-body'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<span expr:id='data:post.id'><data:post.body/></span>
<script type='text/javascript'>
var snippet = document.getElementById(&quot;<data:post.id/>&quot;);
Cutter.run(snippet, snippet, 40);
</script>
<b:else/><data:post.body/></b:if>
<div class='clear'/>
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Read More</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>
</b:if></b:if>
</div>

Lưu ý:

Theo cơ chế hoạt động của đoạn js Cutter bạn có thể thay đổi các giá trị như số kí tự (40), và như đoạn code trên sẽ được cắt 40 kí tự đầu tiên trong bài đăng để hiển thị ra trang chủ và dĩ nhiên là giữ nguyên định dạng HTML. Cũng vì vậy nên nếu không có ảnh nào được chèn giữa 40 kí tự này thì sẽ không có ảnh thumbnail, bạn cần lưu ý điều này và nên đặt một tấm ảnh lên trên cùng của bài đăng để làm ảnh đại diện ở trang chủ.