Add "Read More" Link

這是

從 referral 中發現有人在搜尋 Blogger.com Beta 改版後 Read more 與 Archive 只顯示標題的作法,我是「遵循 Blogger 古法」的邏輯再配上新系統內建的語法後,自己摸出來感覺比較簡潔的作法(這個方法也已經變成官方建議作法) 。
首先在版面配置(Layout) / 編輯HTML (EDIT HTML) 頁面中點選 Expand Widget Templates 後,尋找</b:skin>標籤,在之後加入下列語法:
..........略
]]></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>
在語法中搜尋 <data:post.body/>,原本的樣子是:
<p><data:post.body/><p>
改成:
<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>
加<br/>是為了讓 read more 接本文時可以斷行;

寫文章完畢、發佈文章前,切換到 Html 的文章編輯模式,把想要隱藏的區段用<span class="fullpost">...</span>包起來即可,像這樣:
文章(摘要的部分).....<span class="fullpost">...文章(要隱藏的部分)...</span>
收工。

用這個方法跟網友所提供以 JavaScript 一樣的地方是,使用者都要自己下語法去包要隱藏的文字部分
不一樣的是,這個方法只用系統平台所提供的 IF/ELSE 來做,簡單易改容易變化,平常在編輯 Tamplate 時沒有展開 Widget 是不會看到多餘語法的,編輯 Template 的時候比較簡潔之外,輸出頁面的檔頭也比較簡潔;

另外是內文的部分並非是區塊的部分,在CSS通用性上儘量使用 span 標籤與 class 層級來進行設定(而非用 div 與 id ) 才符合一般規則,且 Blog 文章於網頁開啟的檔頭中 JavaScript 越少,開啟速度一定越快;同時 CSS 設定可以跟 Blogger 舊版依照 Blogger Help 教學所做出來的設定相容,不用回頭一篇一篇改。

另外我也試過,如果要在Archive 中只顯示標題的作法,這也是我所說簡單易改的地方,只要在同樣的位置改成:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<data:post.body/>
<br/><a expr:href='data:post.url'> read more... </a>
<b:else/>
<br/><a expr:href='data:post.url'> read more... </a>
</b:if> 
</b:if>
即可直接二合一;

於 Label 標籤頁當中還可以看到沒有被隱藏的本文,知道文章的內容在講啥,不過這樣就變成在 Archive 頁面中完全沒有本文(文章都只剩下標題而已),減少被搜尋引擎搜尋到的機會,並不建議使用;如果要連 Label 都設定成只出現標題,可以直接去參考網友寫的教學。

雖然這種方式比較符合網頁的設定方式,但是一定還是有人不太願意學習這種新增的方式,可以考慮套用「繼續閱讀」懶人包:

Comments