2011年12月2日

Blogger 留言回覆系統簡易安裝及使用說明

A+
2012.4.18 公告

由於 Blogger 推出新的串聯式留言,本文的 hack 只能使用在舊範本,而新範本有使用串聯式留言的話,請勿安裝本文的 hack。


一、介紹

此留言回覆系統整合了以下重要功能:

A. 回覆每一則留言用任何身份都可回覆,回覆的留言自動產生超連結以連結到原留言。

B. 引言無論是否使用回覆功能,都能單獨使用引言功能,引言的部分會自動縮排、加外框、引言內容上色以區別本文。

C. 作者回覆作者使用回覆功能時可自動插隊到原留言的後面,讓原留言的發問者立即看到作者回覆。

D. 留言編號除了作者以外的留言均可加上留言編號。


二、注意事項

此為簡易安裝網頁,如果 Blogger 的留言功能沒有進行改造過、或是變異不大,那麼直接進行本篇的安裝應該是沒有什麼大問題。但如果曾安裝 sean大 的「作者回覆」功能,請先解安裝,本系統支援 sean 大版本所留下的留言資料,且執行速度快很多、安裝也簡單、功能更強大。若曾安裝「悄悄話功能」,因會與本系統相衝也請先解安裝,之後「悄悄話功能」會做修正以相容本系統。

如果範本中的留言區曾有過改造(例如留言時間位置搬到別處、整個留言區加框..等等),又想要有本系統的功能,請參考下一篇「留言回覆系統自訂說明」,看看如何修改能與自己的留言功能相容。


三、準備動作

1. 請先下載「WRCS-share-20120418.js」這個檔案,放在自己的網頁空間。

2. 到 Blogger 後台 → 範本 → 編輯 HTML

3. 將以下程式碼放到 </head> 前面,紅字部分按說明置換(數字千萬要改對否則程式是無效的)


B:這一行的 comment_index 是留言編號變數,如果不想安裝留言編號、或已經安裝過留言編號可刪掉此行。

C:baURL 後面的那串數字就是自己 Blogger 帳號的個人資料編號,要得到此數字最簡單的方法就是先留個言,再對著自己留言帳號按下去,就會跳到 Blogger 帳號的個人資料網頁,請參考下圖,把自己紅色框框中的數字填到此行即可:



D:blogID 後面的那串數字就是自己的 Blog 編號,要得到此數字可到後台編輯範本的畫面,請參考下圖,把自己紅色框框中的數字填到此行即可:




四、安裝動作

請先找到類似以下的程式碼

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>

接著在以上 </dd> 與 </b:loop> 之間插入以下紅字部分的程式碼

</dd>

<!--WFU留言回覆系統-->
<dd expr:id='"dd"+data:comment.id'><script type='text/javascript'>
var dp_id="<data:post.id/>"
var dc_id="<data:comment.id/>"
var dc_a="<data:comment.author/>"
var dc_an="<data:comment.anchorName/>"
var dc_bid="<data:widget.instanceId/>" + "<data:comment.cmtBodyIdPostfix/>"
</script>
<script src='http://wayne-fu.googlecode.com/files/WRCS-share-20120418.js' type='text/javascript'/></dd>
<!-- -->


</b:loop>

存檔後即完成安裝,可以開始測試此系統。以上 WRCS-share-20120418.js 為共用的檔案,可改存放到自己的網頁空間;若沒有網頁空間則需完全套用該 js 檔的所有設定無法變更。

由於留言編號的樣式、位置、顏色,每個人可能有自己的喜好,如果留言編號或其他配置想自訂請參照下一篇「留言回覆系統自訂說明」。


五、使用說明

以下為簡單的使用說明,請對照留言區的範例會更清楚,每則範例的留言次序均於留言開頭標示,例如開頭標示 "留言#3" 代表是第三則留言(因作者回覆功能而插隊到第二則留言)。

1. 每則留言的右下角分別有「回覆」及「引言」按鈕,按下後會另開視窗,按照留言框中出現的提示文字操作即可。

2. 回覆功能:非作者的回覆會產生留言編號;作者的回覆因為會插隊,所以不會有留言編號。

  A. 非作者回覆非作者:出現「原留言編號」的超連結,可快速跳到原留言。

  B. 作者回覆非作者:直接插隊到原留言下方回覆,可重複回覆、重複插隊;作者回覆區域底色與非作者區底色不同以示區隔,如想自訂底色請參考下一篇「留言回覆系統自訂說明」。

  C. 非作者回覆作者:出現「作者暱稱」的超連結,可快速跳到原留言。

3. 引言功能:

  A. 無論是否按「引言」按鈕,只要在留言內容加上 [quote]原留言內容[/quote] 這樣的標記就可以讓引言功能生效;當然,按下「引言」按鈕可自動產生標記,會比較方便一些;且一篇留言內可重複出現引言標記,達到分段引言的效果。

  B. 引言內容會加上底色、外框,由於使用 <blockquote> 標籤因此引言能縮排、上下自動空行自成一區。如果想自訂引言的顏色、配置,請參考下一篇「留言回覆系統自訂說明」。

說明的差不多了,下面的留言區可以留言測試效果,有使用或安裝的問題也可在相關文章留言提出。

2012.8.20 補充

留言區有很多範例是關於是否要按 Enter 或空行的說明,但新版的程式碼已經能夠去除所有不必要的空行,而下面留言區的範例是講解舊版是否要按 Enter 的說明,但明顯可看出多餘的空行已經被刪除。由於 Blogger 舊範本的使用者應佔少數,所以本文並未放出新的程式碼版本。如有「留言回覆系統」新版本的需求,請留言告知,我再來更新,否則本文的程式碼暫時不會主動更新了。

10 則留言:

  1. 留言#1,測試內容

    回覆刪除
  2. <3865713326221213719>(以上內容請勿刪除)留言#2,回覆內容前不必再按 enter 或空行,因為上方會自動空一行。

    回覆刪除
  3. <3865713326221213719>(以上內容請勿刪除,以下引言請自行刪減) [quote]留言#1,測試內容[/quote]留言#3,這是作者回覆,直接插隊到二樓。

    引言內容前不必再按 enter 或空行,因為引言內容會使用 HTML 的 <blockquote> 標籤,引言內容前後自動空行。

    回覆刪除
  4. <3865713326221213719>(以上內容請勿刪除,以下引言請自行刪減) [quote]測試內容[/quote]
    留言#4,我在引言後面按了空行,這樣會跟引言的距離就有兩行。

    按下 留言#1 可直接跳到 1F 的原留言。

    回覆刪除
  5. <7102358922329372358>(以上內容請勿刪除,以下引言請自行刪減) [quote]留言#2,回覆內容前不必再按enter或空行,[/quote]

    留言#5,我在引言後面按了 enter 兩次,雖然在留言框看起來跟引言只有距離一行,但實際上顯示內容會空兩行。下面第二個引言也是,按了 enter 兩次才貼上 quote 標記就會空兩行

    [quote]因為上方會自動空一行。[/quote]可分段引言,只要複製張貼意見說明第 3 點的 quote 標記即可。這裡的內容直接接在 quote 標記後面沒按 Enter,所以間隔很正常。

    回覆刪除
  6. <7534788643014433733>(以上內容請勿刪除,以下引言請自行刪減) [quote]這是作者回覆,直接插隊到二樓...[/quote]留言#6,作者回覆,回自己留言#3,自己回覆自己不會變成插隊,也不會有留言編號,看不出回哪一樓。不過這是沒意義的行為,自己幹嘛回覆自己。

    回覆刪除
  7. <3865713326221213719>(以上內容請勿刪除,以下引言請自行刪減) [quote]留言#1,測試內容[/quote]留言#7,同一樓的作者回覆可以重複執行,照樣能插隊,如果想到要補充的可以再回覆一次,不必刪掉原本的留言。

    原本 Sean 大的版本,第二次的作者回覆會讓第一次的作者回覆無法顯示。

    回覆刪除
  8. <7534788643014433733>(以上內容請勿刪除)留言#8,回覆功能也可以回覆作者,這是回覆「第1個作者回覆」,按下上方 WFU 就會跳到該則原留言。

    回覆刪除
  9. <23484112439356569>(以上內容請勿刪除)留言#9,這是回覆「第2則作者回覆」,按下上方 WFU 就會看到跳到的地方是不一樣的。

    回覆刪除
  10. <7102358922329372358>(以上內容請勿刪除)
    修改了程式碼,2F的 「回覆 test 於 留言 #1 的意見」跟留言之間自動的空行已經去除。

    回覆刪除

張貼留言注意事項:

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