2015年2月2日

Blogger 留言數量提示字串修改

Blogger 留言數量提示字串修改

Wayne Fu 0 A+
如果有注意 Blogger 官方留言數量這件事的站長,大概會發現,官方預設的提示字串不太合語意,看起來怪怪的。

當文章沒有留言時,首頁提示的字串顯示為「沒有留言:」,多個冒號不知何意,且不管有幾則留言都會出現這個冒號。還有,一般會比較習慣看到 "數字",而不是看到 "沒有" 這樣的字串。除此之外,如果能夠自訂提示字串就更好了。

最近處理到一個案子提出本文的需求,開頭的示意圖來自「素醬媽蔬食廚房」,圖中紅框的部分為修改後的效果,以下為修改的過程記錄。



一、各處的留言提示字串


1. 首頁、標籤頁面

在首頁、標籤、或索引頁面(名詞解釋請參考「Blogger 七種頁面形態判斷語法詳解」),沒有留言時的字串效果大致如下:




有留言時的字串效果大致如下:




2. 留言區塊

在文章頁面,沒有留言時的字串效果大致如下圖紅框:




現在可以瞭解為何會有 "冒號" 了,原來是 Blogger 偷懶,在首頁、標籤、索引頁面,直接拿留言區塊的字串去套用,才會出現這個不搭嘎的冒號。


3. Javascript 修改

知道原理後就容易改,在範本之中找到了以下字串,這字串會出現三次,字串最後面的字元都是冒號:

<data:post.commentLabelFull/>:
冒號之前的 Blogger 標記語言,會根據不同數量的留言,產生對應的字串。直覺上使用 js 的 parseInt() 函數來處理,有留言時的字串就能轉換為數字,沒有留言的字串 parseInt() 會拋出 "NaN" (非數字)。

這件事用 js 來處理很簡單,只是有點不太舒服就是了,原因可參考「優化網站效能該注意哪些事? (1)最關鍵的考量因素」,網頁能使用越少的 js 越好。

好消息是,最後還是找到了不用 js 就能處理的方法,請見接下來的步驟。



二、首頁、標籤頁面


1. 在修改範本之前,如果是第一次來訪的讀者,建議先閱讀「備份範本的訣竅」系列文章。

2. 請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 <data:post.commentLabelFull/> 這個字串,會有三個結果,如果這個字串的前後長的類似以下這樣,就是「首頁、標籤頁面」留言提示字串程式碼:

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.commentLabelFull/>:
</a>


接著將以上字串改為以下自訂格式:

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
留言 (<data:post.numComments/>)
</a>

紅色的字串是 Blogger 的標記語言,代表留言數量
藍色的字串請自由發揮,可改為任意的自訂字串形式



三、留言區塊


接下來修改留言區塊的留言提示字串程式碼,在範本中找到的另外兩個 <data:post.commentLabelFull/> 搜尋結果,前後大致長的類似以下這樣:

<h4>
<data:post.commentLabelFull/>:
</h4>


接著將以上字串改為以下自訂格式:

<h4>
留言 (<data:post.numComments/>)
</h4>

紅色的字串如前所述,代表留言數量
藍色的字串請自由發揮,可改為任意的自訂字串形式

存檔後即可看到效果。




既然能修改為字串,當然也可替換為圖案。上圖為本站使用的效果,如圖中紅框,可使用代表留言的 logo,後面的數字就是留言數量。「二、首頁、標籤頁面」這部分的修改,只要將藍色字串的內容,改為圖片語法 <img src="圖片網址"/>,就能達到這樣的效果了。


Blogger 留言相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP