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

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 舊範本的使用者應佔少數，所以本文並未放出新的程式碼版本。如有「留言回覆系統」新版本的需求，請留言告知，我再來更新，否則本文的程式碼暫時不會主動更新了。