首頁長篇文章的收合

當內文太長或圖片多的時候，進到首頁不但會變慢，版面也會拉很長，所以很多人的 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 &lt; 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 &lt; 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 &lt; spans.length; i++) {
    if (spans[i].id == 'detail') {
      spans[i].style.display = 'none';
      document.write('&lt;span id=showDetail class=showDetail&gt;');
      document.write('&lt;a onclick=javascript:showDetail(\&quot;'+id+'\&quot;); href=javascript:void(0);&gt;完整閱讀...&lt;/a&gt;');
      document.write('&lt;/span&gt;');
      document.write('&lt;span id=hideDetail class=hideDetail&gt;');
      document.write('&lt;a onclick=javascript:hideDetail(\&quot;'+id+'\&quot;); href=javascript:void(0);&gt;文章收合...&lt;/a&gt;');
      document.write('&lt;/span&gt;');
    }
    else {
      if (spans[i].id == 'fullpost') {
        spans[i].style.display = 'none';
        document.write('&lt;span id=showDetail class=showDetail&gt;');
        document.write('&lt;a href=\"'+link+'\"&gt;閱讀全文...&lt;/a&gt;');
        document.write('&lt;/span&gt;');
      }
    }
  }
}
</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(&quot;post-&quot; + &quot;<data:post.id/>&quot;, &quot;<data:post.url/>&quot;);
      </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，則文章不隱藏，直接秀全文出來）。