2007/1/9

How To : "read more" for blogger

如果有在用blogger在寫blog的人,一定都會發現blogger並不像一些BSP或是blog程式一樣,有支援"read more",也就是"繼續閱讀"的功能,但是其實有一些方式可以幫blogger加入這樣的功能。

因為新版blogger提供了一些可以直接去改網頁程式的template方式,而我們也可以利用這樣的途徑來修改,不過記得再修改前都先講你原先的template儲存一份,以防之後修改有問題的時候,可以復原整個blog template。首先我們先打開管理介面"Edit HTML"的頁面,然後在下面我們就可以看到現在你blog所使用的template程式。然後將上面的"Expand Widget Templates"的選項打勾,因為這樣我們才可以看到全部的template程式碼。之後我們就在template之中找出</b:skin>這個tag,在它之後加入下面這些程式碼:

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
span.fullpost {display:inline;}
</style>
<b:else/>
<style type='text/css'>
span.fullpost {display:none;}
</style>
</b:if>

然後再搜尋<data:post.body/>這個tag,改成以下的程式碼:

<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <data:post.body/> <br/><a expr:href='data:post.url'> read more... </a>
</b:if>

這樣大致上就完工了,再把修改後的template儲存起來就可以了。之後在寫文章的時候,再把要隱藏文字的部份用<span class="fullpost"></span>給包起來就可以了,如下面的程式碼所示:

<span class="fullpost">這裡是要被隱藏的內容</span>

這樣做也不是沒有缺點,缺點就是每次在寫文章都要自己切換成編輯HTML的模式去加入fullpost的tag,而且之前的舊文章就要手動一篇一篇改才行。另外就是如果你文章沒有很長,並不想要用fullpost的tag來包,可是在首頁的文章下方,還是會出現"read more . . . "這樣的連結,會讓人家以為還有更多的內容。不過這樣的修改作法已經算是相當簡單易懂,對於一般的使用者是蠻容易修改的方式。每一個作法都有其優缺點,就看你比較能夠接受怎樣的作法囉,青菜蘿蔔都有人愛嘛。在此感謝METAMUSE的教學。

相關連結:
[METAMUSE] - Blogger Beta 中 Read More 與 Archive 只顯示標題 作法