最快速的繼續閱讀功能(Blogger)

最近文章即將突破20大關,加入兩個功能讓整個Blog更易閱讀 一個是大家幾乎都會加入的繼續閱讀(Read more),另一個是標籤,搜尋和歷史文章頁面只顯示標題(這部份後續再說明),雖然"繼續閱讀"已經有許多前輩寫到爛,不過發現有些修改方式太麻煩,有些是加了太多其他功能(例如加入文章收合),不然就是有小Bug(Read more在內文也會出現),或是在RSS閱讀器中會出現隱藏碼(我之前遇到的問題),所以在搜尋了一堆相關文章後,最終決定了目前所使用的繼續閱讀功能,至於為什麼說最快速,有以下幾點原因

• 不透過Script將內文置換成繼續閱讀字樣,此法須先讀出全文,再把摘要以外的內容換掉
• 字數少,瀏覽器讀取時縮短時間......我承認這條是硬擠出來的:P,不過Script越少越短,真的會有助瀏覽器讀取的速度

下面就將我的方法列出給大家參考

首先進入修改HTML,並點選"展開小裝置範本"(因為要修改Template,心臟不強的請先點選"下載完整模版"備份你的Template)

接著找到</html>這個字串,並在前面加入下列HTML

<style>
<b:if cond='data:blog.pageType != "item"'>
.fullpost {display: none;}
<b:else/>
.readmore {display: none;}
</b:if>
</style>


最後搜尋<p><data:post.body/></p>這個字串(這個字串就是Blogger會產生出文章的部份),並在下面加入下列HTML

<a class='readmore' expr:href='data:post.url' expr:title='data:post.title'>Read More</a>


以上是修改Template部分,再來則是文章要被隱藏部份需要使用下面的標籤框起來

<span class=fullpost> </span>


你也可以在設定-格式中加入(如下圖),這樣以後透過WYSIWYG編輯器就會自動幫你帶出這個標籤

大家應該可以發現我使用的方式沒用到半點Script吧,如此文章就不會先讀到瀏覽器,再透過Script換掉內容了,而最後Read More連結也是利用CSS的方式顯示/隱藏,不需使用Blogger的自訂標籤語法判斷(<b:if>是偷偷在背後幫你轉換)

如果你只是想要繼續閱讀功能,又不想速度被一堆Script拖慢的話可以考慮我使用的方式喔

我的方法還是有個小Bug,如果沒有使用<span class=fullpost> </span>標籤,在首頁顯示時最後還是會出現Read More