2008年8月19日 星期二

繼續閱讀功能

Blogger「繼續閱讀之實作

來源網頁: 白花花


節錄步驟如下:
1. 設定→格式→底端文章範本區→貼入下段span標籤→儲存設定
這是以後發文要用到的語法,放在文章範本裡後發文時可以省一道手續

<span class="fullpost">

</span>

2. 接著到範本→修改Html→展開小裝置範本→啟用瀏覽器的尋找功能,
a.尋找]]></b:skin>,然後在它後面貼入下段程式碼

<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>

如果你曾經用過別種繼續閱讀是採<span id="fullpost"></span>的話
那這步驟語法中所有的span.fullpost可以改成span#fullpost
b.再利用尋找功能找到<data:post.body/>,在它後面貼入下段程式碼
  其中程式碼內被小括號圍起來的中文字部分可以替換成自己想要的文字

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>(繼續閱讀...)</a>
</b:if>

基本上到這裡為止整個繼續閱讀的功能就已經大致建置好了
以後新增文章的時候,只要把當作摘要的部份寫在<span class="fullpost">的上面
而要按繼續閱讀才看的到的東西則寫在<span class="fullpost">和</span>的中間

至於要讓繼續閱讀靠右的方法,則是可以在第二段程式碼動手腳
只要在第二行開頭加入<p align="right">
或是<p style="text-align:right;">
結尾加入</p>,即可讓繼續閱讀靠右
不過這樣會讓繼續閱讀跟摘要最後一行之間的距離變大

此作法的優點:
1.完全沒有使用到javascript
 不必擔心會跟其他的blogger外掛有互相衝突的情形發生
 但若是想用阿土伯的那套程式或是相關的懶人包,可能就無法用All in one
 要用進階安裝的方式避開阿土伯版本的繼續閱讀比較保險~
2.用的是span class的標籤,不會自成一個區塊,可以相容於先前在範本裡就設定好的內文樣式
 (像是字體大小啊、顏色啊、行距之類的樣式)

不過此作法也有缺點:
1。已經發表的文章不會自動套用,要自行修改加入<span class="fullpost">和</span>
2。就算你把所有的文章內容寫在<span class="fullpost">的上面,繼續閱讀的超連結字樣仍然會出現





沒有留言:

張貼留言