建立可擴充的文章摘要 - 修正版

Tags: blogger-tips

果然太久沒有碰 CSS 與 Javascript 了。在之前的文章中有提到製作文章摘要的方法，某些文章不需要 Read More! 這個連結設定，那時候想說只要在該篇文章後面這個敘述

<style type="text/css"> .readmore {display:none;} </style>

就會把 Read More! 這個連結隱藏起來。然而我卻忘記這個效果會到用到整篇文章，一但有某篇文章加入這行指令之後在其他文章的 Read More! 連結也都會被隱藏起來。唉，真是放空太久人都變笨了，看來只好用 JavaScript重新改寫來處理這個問題。

先說明一下大概的原理，在網頁上每個放置文章的 <div> 標籤都給予它一個 id 屬性以供識別使用。然後在文章節結尾處去檢查這篇文章的內文中，是否有任何標籤使用 fullpost ，有的話就意味著該文章有區分內文與摘要需自動加上詳細內文的連結，沒有的話當然就不需要囉。用講的當然很快，實做的話範本要修改的地方就比較多了。
先在 style 的標籤內加入下列內容

<MainOrArchivePage>div.fullpost {display:none;}</MainOrArchivePage>
<ItemPage>div.fullpost {display:inline;}</ItemPage>

然後在 </head> 前加入下列 javascript

<MainOrArchivePage>
<script type="text/javascript">
//<![CDATA[
function readmore (ItemNum,ItemURL)
{
var content=document.getElementById(ItemNum).childNodes ;
var i;
for (i in content)
{
if (content.item(i).className=="fullpost")
{
document.write('<a href="' + ItemURL + '"><span style="font-size:150%;">Read more!</span><br />')
break;
}
}
}
//]]>
</script>
</MainOrArchivePage>

接下來是比較麻煩的部分了，需要一點 HTML 的技巧。我們要找出範本內存放文章內容的位置。文章的內文是 <$BlogItemBody$> 這個標記，稍微往上看一下這個標記包夾在哪一個標籤內，隨著不同的範本可能有不同的設計，有些是可能是 <div> 容器標記，有寫可能是 <p>段落標記。如果是 div 標記的話直接在這個標記內加入 id 屬性並修改這個標記的內容成為下列樣式：

<div id="_<$BlogItemNumber$>">
<$BlogItemBody$>
<MainOrArchivePage>
<script type="text/Javascript">
//<![CDATA[
readmore("_<$BlogItemNumber$>","<$BlogItemPermalinkURL$>");
//]]>
</script>
</MainOrArchivePage>
</div>

如果文章內容是包夾在 p 段落標記的話，就自己取捨看是要直接將這個 p 標記修改為 div 標記，或是在這組 p 段落外新增一個 div 標籤，將上面這些程式碼移植進去。

這樣就完成了。以後寫文章的時候，將不想要在主頁上顯示出來的部分用 <div class="fullpost"> </div>這組標籤內就可以了，例如下面這個範例：

這是文章的摘要，會顯示在blog的主頁上
<div class="fullpost">這邊的內容不會顯示在blog的主頁上，必須要點選 Read More! 才看得到。</div>

當沒有這個標籤的時候，就不會在主頁上顯示 Read More! 的連結，這樣問題就解決了。