讓 Blogger 的留言有「回覆」及「引言」按鈕

★ 目前回覆引言功能有新版本，請參考此網頁「留言回覆系統簡易安裝及使用說明」 ★

一、前言

有了「留言編號」的功能後，可讓作者以外的留言者在相互回覆時，有個可供辨識的索引工具。接著又想，留言編號能否在回覆時自動秀出呢？另外又想，引言內容能否也自動產生呢？如此留言者就可以省去許多複製貼上的動作。

在網路搜尋了很多資料，其中這個「簡中網頁」可讓回覆的留言產生一個超連結，跳到原留言區塊。這個功能相當實用，可惜原作者用的是 Blogger 舊範本，其他有一些程式碼不知何意且不知如何套用到新範本。


二、回覆功能

根據上面所提的網頁，在自訂的位置加入以下程式碼可產生一個回覆按鈕：

<a expr:href='"https://www.blogger.com/comment.g?blogID=YOUR BLOG ID HERE&amp;postID=" + data:post.id + "&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars= yes,width=400,height=450"); return false;'> 回覆此評論 </a>

1.「blogID=」後面要填的一串數字為我們自己的 blog ID，可進入後台在編輯範本的畫面，於網址列可看到 "...blogID=XXXXX" 那十幾個數字就是了。

2.「%40%3C%61%20%68%72%65%66%3D%22%23」→「@<a href="#」

3.「data:comment.anchorName」：跳到原留言的定位編號

4.「%22%3E」→「">」

5.「data:comment.author」：原留言作者暱稱

6.「%3C%2F%61%3E」→「</a>」

7. onclick 後面一大串，代表按下回覆按鈕之後開個視窗回覆留言

8.「回覆此評論」：代表回覆按鈕的字樣，可改為任何字樣、甚至圖案也行。

從以上的程式碼可看到，為了讓這個回覆功能生效，許多想要自己自訂的程式碼、字串，需要用 escape 函數編碼後再放進去才能發生作用；而為了看懂以上 2～6 點，則需要用 unescape 函數反譯回來。有個方便的「線上編碼轉換工具」可以幫我們代勞，將文字貼到輸入窗口裡面後，按 "escape編碼"，再將亂碼置換這裡的藍字部分即可。要檢驗編碼正不正確也很方便，再按一下 "escape解碼" 就可以看到結果了。

將 2～6 點翻譯後的內容組合起來就成了「@<a href="#XXXXX">原留言作者暱稱</a>」，回覆的留言開頭會自動產生 "@原留言作者暱稱" 這樣的字串，而按下 "原留言作者暱稱" 的超連結可跳到原留言。

這功能很棒，就是介面比較陽春、沒有明講的話很難一眼知道有何作用。於是自己 hack 一下，將「留言編號」也加入自動產生的字樣，且將超連結改到「留言編號」之上，如此這個功能就比較明顯了。

另外，引言的功能還是沒有解決，所以這一點得自己來，下一段便是 hack 以上程式碼後，產生的「回覆」與「引言」功能。


三、「回覆功能」修改＋「引言功能」

要加入引言功能會遇到許多技術上的困難，原作者在同主題「另一篇文章」有提到此點，因為引言內容可能會有 Blogger 判斷錯誤的字元而導致失效。因此 WFU 經無數次的測試後，對可能失效的情形也加入程式碼處理，所以整個 hack 的程式碼滿龐大的。

建議先參考「Blogger留言系統 __（一）作者回應＋留言編號」安裝留言編號功能，此回覆功能的效果會比較好。接著到 Blogger 後台 → 範本 → 編輯 HTML。然後在欲加入回覆、引言按鈕之處放入以下程式碼，以本 blog 為例，是放在整個留言區的最右下角，範本內的位置是緊接在在 <b:include data='comment' name='commentDeleteIcon'/> 之後：


回覆功能：

A：如果有安裝「作者回應」功能的話，因為作者的留言已經有另外的回應按鈕，不需要本文的這些功能，因此需要有此行的判斷句，讓作者以外的留言者才出現本文的功能。而紅色的網址部分請參考「Blogger留言系統 __（一）作者回應＋留言編號」→「四、判斷留言者是否為文章作者」換成自己的個人簡介網址。

而如果沒有安裝「作者回應」功能的話，A 行與 AD 行可刪除。

N：
(1) "blogID=" 後面的紅色數字請改為自己的 blog ID。

(2) "plus_zero" 為「留言編號」的變數。如果沒有安裝留言編號的功能，那麼 "plus_zero" 可以刪除，但是全部的亂碼文字內容需要自行調整。

(3) 以下為亂碼部分翻譯後之內容：

postBody=回覆 <i>" + "<data:comment.author/>" + "</i> 於<a href="#" + "<data:comment.anchorName/>" + "">【留言#" + plus_zero + "】</a>的意見 （1.以上內容請勿刪除　2.回覆後請刪除括弧內此兩點說明）#form

這部分的內容可隨個人喜好變更文字，將字串用 escape 函數轉換後替代即可。

(4) onclick 後面的參數與原網頁不太相同，多了 "_self" 參數，這代表留言畫面不另開視窗，改由原視窗開啟。因為測試各大瀏覽器後，發現 IE 另開視窗後中文會變成亂碼，為了配合 IE 的相容性只好如此。

(5) 藍色部分的 ＜回覆＞ 與 O 行的分隔圖案 "∥" 可自行替換文字或圖案。


引言功能：

要使用引言功能，必須對原留言內容 <data:comment.body/> 的資料作處理。而在處理時，有可能因為 "原留言內容過長"，或是 "原留言含有引起 Blogger 判斷錯誤的字元" 而導致整段 javascript 當掉，以下說明解決的方法。

B～G：此為第一段 script，主要功用為 D 行的刪除字元函數，若原留言內容包含用 "<",">" 包圍起來的標籤，此函數將這些標籤內容全部刪除，以避免判讀錯誤。

H～K：此為第二段 script，I 行假裝對原留言內容使用 escape 函數做處理，但真正的用意是測試「處理原留言內容時會不會讓 script 當掉」。目前測試到的情形為「只要留言內含有類似<a>標籤的內容、超連結，執行 I 行就會當掉」。如果這則留言內容會讓 script 當掉的話，那麼 H～K 這幾行都不會被 Blogger 執行。

因此，B～K 短短幾行的程式碼，分成兩段 script 的用意即是在此，萬一兩段合在同一個 script 內，那麼遇上有問題的留言內容，則整個區間的程式碼都會當掉而無法執行了。

回過頭看，在 C、J 行分別安插 "quote_count1"、"quote_count2" 變數，用意在視第二段 script 測試的結果，決定執行 "沒問題" 或是 "有問題" 引言功能的程式碼。


留言內容 "沒問題" 的引言功能：( Q～X 行)

R：若 J 行能被執行無誤，此行才能執行、Q～X行才能執行。

S：執行 D 行的去除標籤字串函數。

T：有時原留言字數太多處理會發生問題，經多次測試，利用 substr 函數將引言部分只取前面 131 個字元(不分中英文)比較安全。當然，想要擷取少一點的引言就將 "131" 改為比較小的數字。

U："quote_content" 為處理過後的原留言內容；以下為亂碼部分翻譯後之內容，此行其餘部分請參照 N 行的說明內容：

postBody=引述 <i>" + "<data:comment.author/>" + "</i> 於<a href="#" + "<data:comment.anchorName/>" + "">【留言#" + plus_zero + "】</a>的意見<b>　「<i>" + quote_content + "</i>」</b> （1.以上...的引述內容請自行增減、避免引言過長,其他內容請勿刪除　2.若分段引言,請參考上方留言說明第5點　3.回覆後請刪除括弧內三點內容）#form

W：讓 "quote_count1" 等於 2，如此執行過第一段引言程式碼 Q～X 行就不會執行第二段引言程式碼 Y～AC 行。


留言內容 "有問題" 的引言功能：( Y～AC 行)

Z：I 行執行出錯時，代表留言內容 Blogger 處理會出錯，才有機會執行這一行。

AA：以下為亂碼部分翻譯後之內容，此行其餘部分請參照 N 行的說明內容：

postBody=引述 <i>" + "<data:comment.author/>" + "</i> 於<a href="#" + "<data:comment.anchorName/>" + "">【留言#" + plus_zero + "】</a>的意見<b>　「<i>引述內容請複製到此區間、並刪除此說明</i>」</b> （1.以上內容除了引述說明以外，請勿刪除　2.若分段引言,請參考上方留言說明第5點　3.回覆後請刪除括弧內三點內容）#form

目前為止的結論是，原留言內容含 <a> 標籤(超連結)時，使用引言功能無法顯示原留言內容，取而代之請留言者手動複製貼上要引言的部分，雖然稍微麻煩了一點，但是幫留言者將固定的格式整理好，還是比完全手動方便一些。


終於完成了這個大工程，想要先試試效果，可以到「BLOG 留言板」進行留言測試。如果用帳號登入測試的話，測試完可以自行刪除留言；沒有帳號的話也沒關係，WFU 會定期清除測試留言。

如果有安裝 abin大 的「最新回應模組 」，本文的回覆、引言功能會造成最新回應模組抓留言內容的時候判斷錯誤。而 hack 最新回應模組又是另一個工程，留待下一篇敘述。

Blogger 最新回應模組修改


參考資料：
更新：不用 Ctrl+V 的“回复此评论”代码
懒得 Ctrl+V：又一个在 Blogger 回复评论的方法