BCL BLOG: [轉載] 如何在Blogger中加入「繼續閱讀」（Read more）

2019年2月2日星期六

[轉載] 如何在Blogger中加入「繼續閱讀」（Read more）

Google的Blogger預設首頁會把文章所有的內容顯示出來，遇到較長文章的時候，後面的文章就會被排到非常下面的位置，如果可以快速預覽部份內容，對文章有興趣的人再自行點進去閱讀全文，對使用者的操作體驗是比較好的做法。如下圖整篇文章都顯示出來，首頁就會變得很長。

Blogger早在數年前已提供「繼續閱讀」（Read more）的功能，在編輯文章的區塊，工具列上有一個插入的功能如下圖，將它插入想要中斷的位置，就可以在首頁中顯示中斷位置以上的文字或圖片，並自動加入「繼續閱讀」（Read more），因為可以自己控制想要在首頁上顯示的方式，避免一句話被從中間截掉，所以這是最簡單、也是比較好的做法。

但是我的文章已經有好幾百篇，而且之前也沒有用上述的方法，如今要一篇一篇修正，就覺得全身無力。其實也可以用Javascript的方式，為我們自動加入「繼續閱讀」（Read more）的功能，不過只能限制字數，也就難免會有語句斷行的現象。
首先來到設計模式，選擇「範本」，再選擇「編輯HTML」

接下來就會看見密密麻麻的程式碼，我是將程式碼全部複製到Notepad++編輯器上，也可以用自己習慣的文書編輯器，方便後續的修改。

在Notepad++上按「Ctrl + F」開啟搜尋字串功能，找到字串 <data:post.body/> ，將所有找到的字串都取代成下列的程式碼

<!-- Auto Read More Body Start -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<span class='jump-link' style='float:right;'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
<!-- Auto Read More in Body End -->

再按「Ctrl + F」，找到字串 </head>，在 </head> 之前加上下列的程式碼

<!-- Auto Read More Body Script Start -->
<script type='text/javascript'>
post_no_pic_sum = 300;
post_pic_sum = 200;
pic_h = 220;
pic_w = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(t,e){if(-1!=t.indexOf("<")){for(var n=t.split("<"),i=0;i<n.length;i++)-1!=n[i].indexOf(">")&&(n[i]=n[i].substring(n[i].indexOf(">")+1,n[i].length));t=n.join("")}for(e=e<t.length-1?e:t.length-2;" "!=t.charAt(e-1)&&-1!=t.indexOf(" ",e);)e++;return t=t.substring(0,e-1),t+"..."}function createSummaryAndThumb(t,e,n){var i=document.getElementById(t),m="",r=i.getElementsByTagName("img"),s=post_no_pic_sum;r.length>=1&&(m='<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+e+'" title="'+n+'"><img src="'+r[0].src+'" width="'+pic_w+'px" height="'+pic_h+'px" /></a></span>',s=post_pic_sum);var g=m+"<div>"+removeHtmlTag(i.innerHTML,s)+"</div>";i.innerHTML=g}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.jump-link  {float: right; }
.jump-link a {text-decoration: none; }
</style>
</b:if>
</b:if>
<!-- Auto Read More Body Script End -->

其中有幾個地方可以稍做修改：
post_no_pic_sum = 300; –> 這裡是指文章內沒有夾帶圖片時要顯示的字數
post_pic_sum = 200; -> 這裡是指文章內有夾帶圖片時要顯示的字數
pic_h = 220; -> 圖片的高度
pic_w = 300; -> 圖片的寬度
完成後，將程式碼複製到Blogger的編輯HTML上，按下「儲存範本」就可以試著檢視成果。