2007年8月4日 星期六

在Blogger建立「繼續閱讀」功能

當有比較長文章放在部落格的首頁時,會顯得過於冗長,且會拖慢讀取速度,此時只在首頁顯示文章的摘要,再讓讀者以「繼續閱讀」的連結進入整篇文章的功能就顯得重要了,不過Blogger並沒有內建此功能,只能自己做。

網路上有許多高手提供了各式各樣的做法,像是繼續閱讀懶人加強版的功能就相當完善。

因為這個功能太重要了,Blogger本身官方的教學文件也有提供一個簡單的方法:如何建立可擴充的文章摘要,我自己是用這個方法,這個方法比較陽春,還有很多發展改進的空間,不過以我的需求來說已經足夠了。中文官方是從英文版直接翻譯過來,感覺翻得不是很好,可以直接看英文版的How can I create expandable post summaries?,或是參考我這篇提供的較白話的說明,希望可以比較容易了解。

Step 1:到「範本」裡的「修改 HTML」,在「修改範本」中找到<head>標籤,把 <style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
貼到>head>後面。
解說:這段帶有條件判斷式的CSS意思是當pageType為item的狀態,也就是進入單一文章頁面時,放在<span class="fullpost">中的文章部分會顯示出來,其他狀況(如在首頁時),這部分的文章則不顯示。

Step 2:選取「展開小裝置範本」方塊,搜尋<data:post.body/>所在位置,將
<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>繼續閱讀</a>
</b:if>
貼在<data:post.body/>後面。
解說:這段同樣帶有條件判斷式,當pageType不是item的狀態,也就是不在單一文章頁面時,像是在首頁,會顯示出「繼續閱讀」的字樣,並建立超連結到這篇文章的網址。

Step 3: 回到我們原本編輯文章的地方,切成「修改Html」的模式,把不想在首頁文章顯示的部分用包起來:
文章開頭
<span class="fullpost">
不想顯示的部分
</span>

如此一來就大功告成了,不過每次發文都要貼這些很麻煩,所以到「設定」裡的「格式」,裡面有個「文章範本」,把
<span class="fullpost">

</span>
貼到裡面,這樣以後每次要打新的文章,這段碼會先自動顯示在上面,就不用每次手動加入了。

這個方法的優點是只有很單純的修改CSS,缺點是以前的文章要手動修改,而且不管文章是否需要這功能,每篇文章「繼續閱讀」字樣在首頁都會顯示出來,Blogger官方教學表示這個問題要交給使用者自己去練習解決了。@@

2 則留言:

  1. 請教一下
    如何將文章設定為摘要顯示的方式
    就是不全文刊出
    而顯示"繼續閱讀"的點選
    blogger內建設定有此功能嗎?
    謝謝~

    回覆刪除
  2. 提供了一些方法,希望能有所幫助~~~

    回覆刪除