如何在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上,按下「儲存範本」就可以試著檢視成果。



Blogger預設是用「Read more」來表示繼續閱讀,如果想要修改這段文字的話,可以依下列的方式:
1、開啟「版面配置」
2、在「Blog Posts」的區塊上,點選「編輯」
3、修改 Read more 成自己想要呈現的文字