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

Tags: blogger-tips

Blogger 系統所提供的功能真的不多，例如在 Blog 主頁上的文章只顯示摘要，點選該文章才會出現全文的功能在 blogger 的系統上就必須要自己來。 Blooger 有官方的教學說明：
[Blogger 說明] -> [Blogger 駭客] -> [如何建立可擴充的文章摘要？]
不過依舊存在部分缺點，例如 「 Read More! 」的字樣無論該文章在主頁上是否有被截短都會顯示出來，感覺有些不便。只好來改進這個方法了。

大部分的操作皆與 Blogger 官方教學類似。首先是範本的修改。在範本放置 CSS 的地方 ( 範本 head 標記下的 style 標記內) 插入下列敘述：

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

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

在這裡我們捨棄了原始教學中的 span 標記改用 div 標記，因為 div 標記相對於 span 在使用上會有更大的彈性 ( 例如 div 標記內可以在包含 div 或 span 標記，但 span 標記內無法包含 div 標記 ) ，可以避免往後出現網頁編排的不合法錯誤 ( 雖然大部分的瀏覽器還是有可能正常的顯示 ) 。

接下來要放置 「 Read More! 」 連結了，大約是在 <$BlogItemBody$> 標記之後插入

<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>" class="readmore">Read more!</a>
</MainOrArchivePage>

你可以把「 Read more! 」替換成任何你想要的句子。範本的修改到此就大致完成了。接下來就是每次在發表文章的時候，將你不想要在主頁顯示的區段全部用 <div class="fullpost"></div> 這組標籤包夾起來，例如：

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

若有些文章過短，或沒有使用此功能的話在該文章的最後加入下列敘述：

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

這樣該文章就不會在主頁中顯示出 「 Read More! 」的連結了。這樣就大功告成囉。