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