[教學]Blogger 範本﹍(3) 文章及留言區塊的程式碼

本篇的內容為 Blogger 範本中，文章及留言區塊的程式碼整理，並附帶簡單說明。建議參考系列文「第一篇」，將範本中的每個區塊加上註解，如此日後搜尋、修改都很方便。

為了避免提供的程式碼錯誤，特地開了一個全新的網誌(使用新範本)，以確保本系列文提供的程式碼是最乾淨的狀態。如果各位讀者範本裏的程式碼跟本文的有所出入，很可能該區塊曾經修改過了。

<b:widget id='Blog1' locked='true' title='網誌文章' type='Blog'>
.
. 文章及留言區塊程式碼
.
</b:widget>
本文要說明的「文章及留言區塊程式碼」全都在以上的「網誌文章」小工具中，以下程式碼內容依照範本中出現的順序排列，但不一定是顯示的順序；另外，行動版的內容跳過。


一、上下頁區塊

<b:includable id='nextprev'>....</b:includable>
以上區間為文章區塊底部的上、下頁區塊，常見修改之處為：

• <data:homeMsg/>：代表預設字串「首頁」
• <data:newerPageTitle/>：代表預設字串「較新的文章」
• <data:olderPageTitle/>：代表預設字串「較舊的文章」

以上這幾個可改為自訂字串、圖案。



二、分享按鈕區塊

<b:includable id='shareButtons' var='post'>....</b:includable>
以上區間為分享按鈕的程式碼呼叫區域(非顯示區域)。想要修改這部分的內容、或是新增分享按鈕(例如 Plurk)，可以參考這篇「【Blogger】新增 Plurk 分享按鈕」 →「2.2. 修改 XML」→「2.2.4.」，這裡的程式碼將分享按鈕個別分開顯示，可以看得更清楚、更容易修改。



三、文章區塊

<b:includable id='post' var='post'>....</b:includable>
以上區間為文章區塊的程式碼，算是本文最重要的部分，以下分段詳細列出。列出這些內容的主要應用方法為，當想要安插一些自訂文字、圖片、或小工具，卻不知要安插在什麼位置時，可查閱這個部分的程式碼。

例如想安插在「文章標題」的前面或後面，那麼找到「1. 文章標題」的程式碼後，安插在其前面或後面即可。


1. 文章標題

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
以上代表「文章標題」字串的程式碼為 <data:post.title/>


2. 文章內容

<b:if cond='data:blog.metaDescription == ""'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
以上代表「全部文章內容」的程式碼為 <data:post.body/>

若想一次替換多篇文章內容的字串，可參考「Blogger 能否一次修改多篇文章的文字或內容？」，在「文章內容」的程式碼後面加入替換字串的語法。


3. 繼續閱讀

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
以上代表「繼續閱讀」字串的程式碼為 <data:post.jumpText/>

若想安裝圖片延遲外掛 Lazy Load，可參考「圖片延遲載入外掛 Lazy Load__Blogger 最佳安裝方式」，在「繼續閱讀」的程式碼後面加入 Lazy Load 語法。


4. 文章作者資訊

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</b:if>
</span>

• 以上代表「張貼者：」字串的程式碼為<data:top.authorLabel/>
• 代表「作者名稱」字串的程式碼為 <data:post.author/>

5. 發文時間

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

• 以上代表「於」字串的程式碼為 <data:top.timestampLabel/>
• 代表「發文時間」字串的程式碼為 <data:post.timestamp/>

6. 留言數量

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comment_count_picker'/>
</b:if>
</b:if>
</b:if>
</span>

7. email 圖示

<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
想變更 email 圖示可更改 img 標籤裡的圖片網址。


8. 快速編輯圖示

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>

9. 分享按鈕

<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>
這段程式碼會顯示分享按鈕，但要 hack 分享按鈕的程式碼，得從「二、分享按鈕區塊」下手。


10. 反向連結

<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</b:if>
</span>

11. 標籤

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

• 以上代表「標籤」兩個字的程式碼為<data:postLabelsLabel/>
• 代表「標籤名稱」的字串為 <data:label.name/>

12. 星號評等

<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
</b:if>
</span>

13. 反應

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

14. 位置

<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>


四、標籤訊息區塊

<b:includable id='status-message'>....</b:includable>
這個區間的程式碼的作用是，當按下標籤時，最上方會顯示「顯示具有 XXXX 標籤的文章....」這樣的字串。

如果不想顯示這些字串，可將這個區間的程式碼全部註解起來(或刪除, 記得備份)。



五、串聯式留言區塊

<b:includable id='threaded_comments' var='post'>....</b:includable>
以上區間為串聯式留言的程式碼，基本上這個區塊 Blogger 的程式碼寫法與舊版留言差異很大，擺明不希望使用者 hack，稍微能夠修改的就是變更一下 CSS 而已，例如把「站長回覆」的留言用不同顏色標示，建議參考這一篇「Highlight Author Comments in Blogger's New Threaded Comment System」。

另外，如果想要自訂「留言欄訊息」(也就是張貼意見）」的版面，可參考「Blogger "留言欄訊息"自訂版面及樣式的方法」。

2014.1.17 補充

這則「Blogger中文社群討論串」詢問：

我的blogger網誌是選擇英文語系，
一般文章如果沒有留言數量會自行顯示『No comments:』...如何設定或是顯示『0 comments』？

請在範本搜尋字串 <h4><data:post.commentLabelFull/>:</h4>，然後置換為以下程式碼即可：




六、主程式區塊

<b:includable id='main' var='top'>....</b:includable>
這部分是「網誌文章」工具的主程式執行區域，想要把版面大風吹得從這個區塊下手，但危險性太高、對程式碼不熟不建議這麼做。

這裡面風險性不高的修改是發文日期，程式碼為──

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>。



七、訂閱區塊

<b:includable id='feedLinksBody' var='links'>....</b:includable>

• 這個區塊位於「一、上下頁區塊」的下方
• 以上代表「訂閱：」字串的程式碼為 <data:feedLinksMsg/>
• 代表「文章 (Atom)」字串的程式碼為 <data:f.name/> (<data:f.feedType/>)

八、舊範本留言區塊

<b:includable id='comments' var='post'>....</b:includable>
新範本不會執行這個區塊；如果是舊範本，留言區塊可以玩的花樣可就多了，可參考「本站留言相關的 hack」，在這個標籤 2012 年以前的文章都是針對舊範本的留言區塊來 hack。


「Blogger 範本」系列標題：
一、各種註解方式及區塊的修改
二、標頭、導覽列、側邊欄、頁尾區塊的程式碼
三、文章及留言區塊的程式碼

➢➢ 快速選單： １ ２ ３