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

Tags: blogger-tips

原本以為這個功能不會再修改。直到用 Zaurus 上的 Opera 瀏覽自己的 blog ，才發現所有「 Read More! 」連結都沒有顯示出來，造成閱讀時很大的不便。或許使用 Zaurus 的人相當悉少，做為一個吹毛求疵的網頁設計者，還是希望這項基本功能在所有的瀏覽器上正常顯示，所以趁著空檔又進行了一次小改版。

有關於這項功能可以參考之前的這兩篇文章。

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

除非有特殊需要，否則我並不建議你使用這兩個舊的版本。

這次的更新，在程式邏輯上做了一些變革。為了搭配一些較為功能較為陽春或版本及為老舊的網頁瀏覽器，這次「 Read More! 」的連結預設會顯示在螢幕上。如果使用者端的瀏覽器支援 javascript 與 HTML DOM ，才會進行處理將首頁部份文章的連結隱藏。如此一來就不會因為使用者端的瀏覽器功能不夠齊全而令讀者找不到瀏覽全文的鏈結，因為只要瀏覽器無法支援則所有文章都會這個鏈結出現。或許這不是最完美的情況，不過相對來講總比找不到連結好多了。用講的很簡單，現在來看看新的程式碼吧。

照慣例，在 Blog 範本中設定 CSS 的區段加入下列 CSS 設定：

/* Read More!
----------------------------------------------- */
<MainOrArchivePage>div.fullpost {display:none;}</MainOrArchivePage>
<ItemPage>div.fullpost {display:inline;}</ItemPage>

然後在 head 標記結束前插入下列 javascript

<MainOrArchivePage>
<script type="text/javascript">
//<![CDATA[
function readmore (ItemNum)
{
try
{
var content=document.getElementById(ItemNum).parentNode.childNodes;
var i;
document.getElementById(ItemNum).style.display="none";
for (i=1; i < content.length; i++)
{
if (content.item(i).nodeType==1 && content.item(i).className=="fullpost")
{
document.getElementById(ItemNum).style.display="block";
break;
}
}
}
catch(err)
{}
}
//]]>
</script>
</MainOrArchivePage>

恩，我想程式碼比之前看起來複雜多了。為了增加網頁的相容性我想這是值得的。

最後請找到範本中的 <$BlogItemBody$> 標記，在後面增加下列程式碼：

<MainOrArchivePage>
<div style="font-size:150%;" id="_<$BlogItemNumber$>"><a href="<$BlogItemPermalinkURL$>">Read more!</a></div><br />
<script type="text/Javascript">
//<![CDATA[
readmore("_<$BlogItemNumber$>");
//]]>
</script>
</MainOrArchivePage>

當中的 「 Read more! 」可以隨喜好替換成「延伸閱讀」、「繼續閱讀」等文字，這樣就大功告成了。不過忙了老半天才發現， Zaurus 上的 Opera 7.55 其實是有支援 javascript 與 HTML DOM 的。因無法支援 for (i in content) 這行敘述才造成問題，只要將其修改為 for (i=1; i < content.length; i++) 功能會正常。網頁的開發稍不注意就會遇上這種瀏覽器間相容性的問題，處理這些問題往往比開發網頁還要更費功夫，這問題等有空再來談吧。以上程式碼本身版權沒有，翻印不就。有需要的就自己拿去用囉。