2013年4月13日

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

A+
本篇的內容為 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 範本」系列標題:
一、各種註解方式及區塊的修改
二、標頭、導覽列、側邊欄、頁尾區塊的程式碼
三、文章及留言區塊的程式碼

➢➢ 快速選單:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。