Blogger上最快速的繼續閱讀功能

Blogger上的文章越來越多,不過卻沒提供"繼續閱讀(Read more)"功能,沒關係,使用Blogger的優點就是想改什麼就改什麼,雖然"繼續閱讀(Read more)"已經有許多前輩寫到爛,不過有些修改方式太麻煩,有些是加了太多其他功能(例如加入文章收合),不然就是有小Bug(Read more在內文也會出現),或是在RSS閱讀器中會出現隱藏碼 ,所以在搜尋了一堆相關文章後,決定使用修改HTML/CSS的方式來達成這個功能,至於為什麼說最快速,有以下幾點原因

• 不透過Script將內文置換成繼續閱讀字樣,若用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)",所以每篇文章都多打一點吧:P

__________________________

喜歡啪啦報報嗎?歡迎免費註冊成為我們的夥伴!