![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdthONM4WrbWbUQqD4DzIQiZrSXrvrRg9qwYd3t5629Dt8Xpc-XH55dlAU0kM_Tj0D2UvZEvfkuRWG-l345fdGKR3M87LLfiRGrwT_T0j189zONVoYOaLnHR4FQkqcB6e7Q3ojavDeZpQ/s1600/pic002%255B2%255D%25284%2529.png)
Blogger早在數年前已提供「繼續閱讀」(Read more)的功能,在編輯文章的區塊,工具列上有一個插入的功能如下圖,將它插入想要中斷的位置,就可以在首頁中顯示中斷位置以上的文字或圖片,並自動加入「繼續閱讀」(Read more),因為可以自己控制想要在首頁上顯示的方式,避免一句話被從中間截掉,所以這是最簡單、也是比較好的做法。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4nf3VoOS8iNkgUMtZ7x9Jn_i3hZwy8BzaVAsfMgvk4sqFGAhxcVqpC-NBaOSNvMFaZm8fL0DfG1jc-WhYPMPDxBzhQ28nJtjdFgjiSAhL55Ay9VhTJcshxnFZ1G1676xUU2rDu2I-wUk/s640/pic008%255B2%255D%25284%2529.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHIunhFJHJlvo2aMXoZdG-tA28sdY26_RlfFCR6iY1UoNCi-2RY0JsIQgo3xePko-0MqKjCsqzVqaWKkJCw3yOCtWO7219jBKuCVB-TUlk9HpuMLenxYRbgVE3O2qNHQKuQFw6ys4ReTc/s1600/pic001%255B2%255D%25283%2529.png)
但是我的文章已經有好幾百篇,而且之前也沒有用上述的方法,如今要一篇一篇修正,就覺得全身無力。其實也可以用Javascript的方式,為我們自動加入「繼續閱讀」(Read more)的功能,不過只能限制字數,也就難免會有語句斷行的現象。
首先來到設計模式,選擇「範本」,再選擇「編輯HTML」
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRWXHbwo2sAZcviopIwhJX1dEY8cRH7DHS9UTCSPDpQofW6a2LDhMLfi8mKNMvjrgLtTmlkLqXO3DrfDWoMVpEnpte2ML0vWWYTaKluskf150RbSG1-HBgz5jFumqYc4Hs_3ssbAqwwfY/s640/pic003%255B2%255D%25283%2529.png)
接下來就會看見密密麻麻的程式碼,我是將程式碼全部複製到Notepad++編輯器上,也可以用自己習慣的文書編輯器,方便後續的修改。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDSNpe-SfW0wQ2tEzLNb0q7BQ8HMrhKor0NVUavUGLmbnTz5Km1b6R6EQqHbfy6Qf8IOgvF6lHi0KCKdALEEOlh4sXKP4hvfPNz1sBSNZmLUxaAzr9nbWEVCcpWpLHiOh6223Lz94XWfs/s640/pic004%255B2%255D%25285%2529.png)
在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 == "index"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</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 == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><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 != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <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上,按下「儲存範本」就可以試著檢視成果。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlFazTt0oDyyQt0V1xuqbnU7ZjUbBGz5tWYkCOOuzabAQyQa1LEVmvg5eKpN2g3fX5mauArUZ5zPJl0Gi9dl6kka2DFjGcujDobzxy4dPH-nQqaVrxgUel23pBu2CnQ8g2vm5ReJpiAyk/s1600/pic001%255B2%255D%25283%2529.png)
Blogger預設是用「Read more」來表示繼續閱讀,如果想要修改這段文字的話,可以依下列的方式:
1、開啟「版面配置」
2、在「Blog Posts」的區塊上,點選「編輯」
3、修改 Read more 成自己想要呈現的文字
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxGXpcuJ76YXMXMo7R1IMogX-C4LhCTFkG-jDB5JNSR620dgrNCjMNjUo8TmvP42iEzbdgjmF13ud3rV-y-jP5tKHjsxYSddVbgci2NzZovjX0586_C87V72RIPjuPO_ppUEormbAo_rA/s400/pic005%255B5%255D.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilsi_3bo3lxXpaLh2Q768rO4yUkEO5OUHyhCD_W4wU5n9sWSYe1lG2SnSGAyrXUY92xCPyMg1B83LUztu08hRPolF7vkCOYXGe0vEPwl4kGRkk4M578a3wpEOWuaCT0FT1eKJ2lpAQdtA/s1600/pic006%255B5%255D.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPPi51GVXEtngP1vvO8gwlmfphUgjf338NZGVxOzk0N3UMAaHgcdFVFWn6OfBzJXkr53MkygfoEu40CONfoWeynURs5qxsfvtZhBHzImVpU8GX4RWZgehI_WH2GfbC-jpo1Gctb9sSqNQ/s1600/pic007%255B5%255D.png)