當內文太長或圖片多的時候，進到首頁不但會變慢，版面也會拉很長，所以很多人的 Blog 首頁都會加上「繼續閱讀」、「閱讀全文」的連結，並且在首頁的新文章都只顯示部分內容，有興趣的再深入閱讀下去。好處就是剛剛講的，首頁如果能夠顯示十篇文章，頁面就不會因此要往下拉拉到死，也不會塞爆圖片慢得要死。
網路上看到兩種處理的辦法，一種是進首頁的時候還是全部都 Load，只是用收合折疊的方式讓首頁不要太長精簡一點，另外一種是只 Load 部分顯示出來，要閱讀全文就請你連到該文章的固定靜態連結。前者的好處是在首頁點開可以一目了然，但是圖多還是一樣很慢，後者的好處是載入很快，但是要跳轉到下一頁去看該篇文章，算是各有利弊。如果該長篇內容都是文字，我比較想用第一種，但如果有很多照片，第二種就比較好。我利用兩個標籤去實作了這兩種方法（算前無古人吧），隨便想用哪一種，只要指定不同的 ID 就好。
首先，登入 Blogger 管理介面，編輯範本 Template 的 HTML（要勾選"展開小裝置範本"="Expand Widget Templates"，用最完整的原始碼），先到最前面定義 CSS Style 的地方去，隨便哪裡都可以，貼入以下基本的定義：
/* Style of detail article toggle */
span.showDetail {
float: right;
border: 1px solid #333;
font-size: 8pt;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
}
span.hideDetail {
display: none;
float: right;
border: 1px solid #333;
font-size: 8pt;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
}
其中那兩個 <span> 用的 class "showDetail", "hideDetail" 是用來定義那個收合文章用的連結樣式，自己可以新增對該連結的設定。因為有文章收合的效果，需要用到 Javascript，我用 inline 的方式插入 template 裡面，可是要注意，script code 裡面的判斷符號像是 '<' 或是 '&' 要轉換，不然 template 格式檢查會失敗。這裡提供一個技巧，在自己電腦上測試 template 時，可以另存新檔，附檔名取 .xml，然後用瀏覽器打開，瀏覽器會幫你檢驗 template (XML) 的格式有沒有問題，如果有錯在第幾行，這樣可以幫助你 debug。找範本的 </head> 標籤，把下面幾行 javascript 貼到該標籤的前面：
<!-- User defined inline javascript -->
<script language='javascript' type='text/javascript'>
<!-- Script functions for show detail article checking: showDetail(), hideDetail(), checkDetail() -->
function showDetail(id) {
var spans = document.getElementById(id).getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == 'detail' || spans[i].id == 'hideDetail')
spans[i].style.display = 'inline';
if (spans[i].id == 'showDetail')
spans[i].style.display = 'none';
}
}
function hideDetail(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == 'detail' || spans[i].id == 'hideDetail')
spans[i].style.display = 'none';
if (spans[i].id == 'showDetail')
spans[i].style.display = 'inline';
}
post.scrollIntoView(true);
}
function checkDetail(id, link) {
var spans = document.getElementById(id).getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == 'detail') {
spans[i].style.display = 'none';
document.write('<span id=showDetail class=showDetail>');
document.write('<a onclick=javascript:showDetail(\"'+id+'\"); href=javascript:void(0);>完整閱讀...</a>');
document.write('</span>');
document.write('<span id=hideDetail class=hideDetail>');
document.write('<a onclick=javascript:hideDetail(\"'+id+'\"); href=javascript:void(0);>文章收合...</a>');
document.write('</span>');
}
else {
if (spans[i].id == 'fullpost') {
spans[i].style.display = 'none';
document.write('<span id=showDetail class=showDetail>');
document.write('<a href=\"'+link+'\">閱讀全文...</a>');
document.write('</span>');
}
}
}
}
</script>
接下來，搜尋下面這一行的程式：
<div class='post-header-line-1'/>
把上面那行後面幾行，本來應該是這樣的程式碼：（位置和版面會因樣版不同而有所差異）
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
改成這樣（變動的地方標註成紅色）：
<div class='post-body' expr:id='"post-" + data:post.id'> <!-- Add show detail check -->
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#detail, #fullpost {display:none;}</style>
<p><data:post.body/></p>
<script type='text/javascript'>
checkDetail("post-" + "<data:post.id/>", "<data:post.url/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
樣版存檔，搞定！這個是版面樣式的 Template，接著我們到 Settings -> Formatting 最下面編輯文章發表用的 Post Template，加入下面一行：
<span id="detail"></span>
以後每次要發表新文章的時候，只要被 span 標籤像這樣包圍起來：
<span id="detail">
這是要隱藏剩下的完整內文
</span>
標籤內的文字就會在首頁被隱藏起來，而標籤外（不管是前面或後面）的文字就變成該文章的前言或摘要。以上是只有在首頁才會有的效果，如果是單篇獨立文章的連結，不會有展開折疊的連結，至於在 RSS Feed 裡面，因為大部分的 Feed Reader 都會濾掉格式的標籤，所以全部的內文也還是看得到。如果你不想使用文章收合的效果，要用固定連結，只要把上面的 id 名稱從 detail 改成 fullpost，就可以有獨立文章連結的效果了。
參考文章：
讓首頁文章可開啟/摺疊 for Blogger Beta
Expandable posts with Peekaboo view
有關 Blogger in Beta
[更新]：
1. 增加 ID: "fullpost"，整合了網路上兩種「閱讀全文」的作法，如果 span 裡面指定成這個 ID，則連結前往該篇完整文章，不使用展開收合的效果。
2. 修正如果瀏覽器 script 功能關掉，看不到全文的問題（如果不支援 Javascript，則文章不隱藏，直接秀全文出來）。
Asus WL-500g 硬體規格剖析
回應: 46