在 blogger 加入「繼續閱讀」 | Friday, July 22, 2005 |
老王賣瓜，現學現賣…好像不是這樣接…

在陽春的 blogger 中加入其他 blogger 平台都習以為常理所當然的事情（嘆）。大致上循著 eliza 提供的 link 稍微地簡化…又弄複雜了一點。

覺得把他說的順序倒過來，可能比較好瞭解一點。就從怎麼把文章切成兩半開始吧。先在「settings設定」的「formatting格式」最下面找到「post template發表模版」，在裡面貼上
前言
<span class="fullpost">
繼續閱讀
</span>
按下儲存鍵後，以後要 po 新文章，點進發文區，便自動送上這幾行。這樣子文章被分成了兩個區塊，同時給「繼續閱讀」的部分一個新的類別（class）叫做 "fullpost"。

再 來就是要讓這個fullpost 類別在首頁上消失，變成「繼續閱讀」的連結。這就要靠樣式表（stylesheet），也就是模版中<style>跟</style>中間那一大串東西。

先把模版全部 c+p 下來存成文字檔，免得後悔莫及。

在「template模版」裡面找到</style>，在他的前面貼上
<MainOrArchivePage>
.fullpost {display:none;}
</MainOrArchivePage>
（我 把.前面的span拿掉了，留著也沒關係）也就是在首頁時 "fullpost" 這個類別不顯示。但是弄不見了以後，還得用個連結代替。同樣在模版裡找到 <$BlogItemBody$>，也就是文章會出現的地方，在他的後面貼上
<MainOrArchivePage>
<a href="<$BlogItemPermalinkURL$>">繼續閱讀</a>
</MainOrArchivePage>
在首頁每篇文章的後面加上一個往文章頁的連結，而同時又把文章的一部份隱藏起來，就完成了。

接下來的部分，可看可不看…這有個問題，像是以前的文章並沒有加上 "fullpost" 這個類別，或是沒有需要分成兩段的短文，文章已經結束，但是在首頁上仍會有「繼續閱讀」的連結，變成有點畫蛇添足、騙點擊數的感覺。所以接下來就要教電腦分辨哪些文章有 "fullpost" 的部分，需要「繼續閱讀」的連結，哪些不用。

參考了動態的 expand/collapse （也是節省首頁空間很好的方法），回頭把上一個步驟改成
<MainOrArchivePage>
<div id="readlink<$BlogItemNumber$>" style="display: none;">
<a href="<$BlogItemPermalinkURL$>">繼續閱讀</a></div>
<script type="text/javascript" language="JavaScript">
showReadMore('<$BlogItemNumber$>');</script>
</MainOrArchivePage>
這裡幫每個連結取了個 id，到時候會在第四行所呼叫的程式碼中用到。同樣地，也得幫每篇文章取個 id。在 <$BlogItemBody$> 前面找到
<div class="post-body"> 改成
<div class="post-body" id="postbody<$BlogItemNumber$>">

然後就是程式的部分，在<head>後面貼上
<script type="text/javascript" language="JavaScript">
function showReadMore(postId)
{
 postBodyId = "postbody" + postId;
 showExtLink = "readlink" + postId;

 if (document.getElementById)
 {
  var postElement=document.getElementById(postBodyId);
  var showExtLinkElement=document.getElementById(showExtLink);

  if (postElement)
  {
   for (var j=0; j<postElement.childNodes.length; j++)
   {
    if (postElement.childNodes.item(j).className=="fullpost")
    {
     showExtLinkElement.style.display="block";
     break;
    }
   }
  }
 }
}
</script>
簡單說，呼叫程式時，會檢查該篇文章有沒有 fullpost 的部分，然後決定要不要顯示「繼續閱讀」的連結。