2011年12月1日 星期四

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

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

Wayne Fu 0 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 舊範本的使用者應佔少數,所以本文並未放出新的程式碼版本。如有「留言回覆系統」新版本的需求,請留言告知,我再來更新,否則本文的程式碼暫時不會主動更新了。
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP