2011年9月9日

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

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

一、前言

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

在網路搜尋了很多資料,其中這個「簡中網頁」可讓回覆的留言產生一個超連結,跳到原留言區塊。這個功能相當實用,可惜原作者用的是 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 回复评论的方法

11 則留言:

  1. 只要回覆功能,截取部分語法如下:

    <span>
    M行
    N行
    P行
    </span>

    結果Blogger顯示"很抱歉,我們無法完成您的要求。"
    請問應如何修改?謝謝。

    回覆刪除
  2. 原本天真的想試著在陽春版的回覆功能中加入自動產生的「留言編號」,一直不成功。挫折感實在太重,最後只好使用陽春版的回覆功能。

    回覆刪除
  3. Re: J.C. <7549050266669155066>

    N 行有 plus_zero 的參數,這是有安裝留言編號的前提;如果沒有安裝的話,系統找不到 plus_zero 這個變數就會有問題。

    把你的 N 行內容貼出來比較能知道問題在哪。(把 < > 的符號換掉才能貼上留言板)

    回覆刪除
  4. Re: J.C. <1815250689147582608>

    留言編號的安裝很容易啊,程式碼只有幾行而已。如果你裝 abin大 的版本更是簡易。

    回覆刪除
  5. 回覆 J.C.【留言#01】的意見

    TO WFU:

    留言編號是安裝成功的,抱歉我沒有表達清楚。

    我耐心再測試了一次,結果沒問題。但,我想要留言板開新視窗,改了onclick的js,結果圖片沒有顯示。以下是N行內容。請指教。謝謝。

    document.write("<a href=\"https://www.blogger.com/comment.g?blogID=blogID&postID=" + "" + "&postBody=To " + "" + "%3Ca%20href%3D%22%23" + "" + "%22%3E%3Cb%3E%23" + plus_zero + "%3C/b%3E%3C/a%3Ecomment#form\"
    onclick='javascript:window.open(this.href, '_blank', "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars= yes,width=400,height=450"); return false;&#39 title=&#39Reply&#39>圖片</a>")

    回覆刪除
  6. TO WFU,

    抱歉,我沒有表達清楚,留言編號我是參考你的版本,有安裝成功,沒問題。

    但是用<回覆>∥ <引言>留言,是不是會過一段時間才會在網頁顯示??Anyway,反覆測試結果,本文第二章節的回覆功能已足夠我使用。謝謝WFU分享。

    不過,留言連結連不到錨點,才是真正困擾我的問題。

    回覆刪除
  7. Re: J.C. <5540833898540712825>

    不好意思,我在垃圾留言堆中發現你的兩則一樣內容的留言(包含我用 Wayne Fu發的留言),有看到你已經貼程式碼了,請忽略上面 Wayne Fu那一則。Blogger 的垃圾留言常常誤判,這點滿討厭的,留言常常會找不到。

    你貼的程式碼由於 <> 標籤內容會被吃掉,所以我就當你 onclick 之前的內容都是正確的。

    1. '_blank' 這裡必須用,雙引號而且 document.write 裡面的所有其他雙引號前必須加 \ 斜線符號

    2. toolbar 一直到 450 這兩個雙引號前一樣要加 \ 斜線符號

    3. 最後,圖片裡面的雙引號一樣要加 \ 斜線符號

    所以,幫你改成以下:

    onclick='javascript:window.open(this.href, \"_blank\", \"toolbar=0,location=0,statusbar=1,menubar=0,scrollbars= yes,width=400,height=450\"); return false;&#39 title=&#39Reply&#39><img src=\"圖片網址\"/></a>")

    這樣應該可以了

    回覆刪除
  8. 回覆 J.C.【留言#03】的意見

    補充一點,你的程式碼裡面 &#39 怪怪的,不曉得是不是被留言板吃掉了,正確應該為 &#39; 少了一個分號,貼回去的時候要記得加上分號,否則沒有作用。

    回覆刪除
  9. 回覆 J.C.【留言#05】的意見

    引述:
     「用<回覆>∥ <引言>留言,是不是會過一段時間才會在網頁顯示??


    留言完回到原網頁就會出現了


    引述:
     「反覆測試結果,本文第二章節的回覆功能已足夠我使用,謝謝WFU分享


    不客氣,可是我看你的程式碼有些小問題啊?我猜你的意思是用我原文程式碼測試是 ok 的。

    引述:
     「不過,留言連結連不到錨點,才是真正困擾我的問題。


    這是上次提的那個問題嗎?我上次建議你用別的 blog 範本試試看(也許舊一點的範本),也許是範本的關係,也許你現在是用 blogger 的新範本,而 "最新留言" 的 hack 是好幾年前 abin大寫的,不然就網路上找找別的 "最新留言" hack 來裝了。

    回覆刪除
  10. 感謝解答。回覆按鈕總算接近自己想要的樣子。謝謝。

    關於留言錨點問題,手邊的範本樣板應該是2007的版本,其實不改也可以,還是會連結到正確文章,只是不會自動跳到留言位置,要手動scroll。一開始沒發現這個問題,現在已花費許多時間和心力Try & Error,剩下一些小地方需要調整,如真要砍掉重煉、套用別的樣板,那將影響原本開Blog的目的。

    Abin 曾經提過類似的問題並提出solution,我正在想辦法理解中。

    參考: http://abintech.twidv.com/2008/09/bug-fixed.html?showComment=1222313940000#c541312395235240686

    如果WFU有想法,也請不吝賜教。謝謝。

    回覆刪除
  11. Re: J.C. <5430075152299102376>

    忽然想到,如果你用了我的回覆功能,又有用 abin大 的最新回應,那本文最後有指出,最新回應的功能會失效,不曉得有無注意到這一點?不過我記得你的錨點失效問題是在裝我的回覆功能之前的事了。

    總之,現在除了錨點的問題,還得先看這系列的下一篇「Blogger留言系統 __(四)最新回應模組修改」。

    說不定也難講,如果這裡改好了,也許錨點的問題也自然好了~

    回覆刪除

張貼留言注意事項:

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