感謝你的造訪,如果你是第一次參觀我的網站可以訂閱我的RSS feed.這個Blog提供許多建立Blog的小技巧,三不五時提供有趣的新聞,現在立即訂閱吧.如果你不會使用訂閱功能可以先參考之前寫的文章 免安裝的RSS閱讀器-Google Reader:基本訂閱說明

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

2007年11月23日

最近文章即將突破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


8 回應:

Bryan 提到...

什麼時候會改版修正這個bug呢?

Kevin Tsai 提到...

只透過CSS的方式還想不到解決的辦法,大概只能透過script才有辦法解決

Bryan 提到...

小弟用了你的方法之後,IE的左下角都會出現"已完成,但是網頁發生錯誤"的訊息,可不可以幫我看一下?謝謝

Kevin Tsai 提到...

你除了使用CSS的方式,還另外用了Script的方式喔,把script的延伸閱讀關閉就可以了

岳納珊 提到...

採用了您的方法,很不錯用!跟您說一聲謝謝分享!!

Notme 提到...

感謝您的分享
找了好久這個功能

本來想直接套用羊男的 template
但是 又看上其他的版型
正苦惱不知該如何是好

還好有您這篇分享 讓我豁然開朗!!

世界還是很可愛 提到...

我照著您的方法改
只顯示標題那部份成功了
接著要改的顯示幾行文字 要按繼續閱讀 才能看整篇文章
結果這部份加上去以後 就又取讀整篇文章了@@

不知道能不能幫我修改 還是能給我範本套用
這是我的網址 http://joyce2331.blogspot.com/
覺得你的版面看起來很舒服 希望我的也能改成這樣 麻煩您了

匿名 提到...

thanks for sharing....