讓 Blogger 能作者回應與留言編號共存

一、前言

Blogger 的留言系統不彰，功能陽春到無以復加，要擁有心目中的理想功能至少得安裝 DISQUS。不過，比起炫麗花俏但吃資源的外掛功能，WFU 更在意系統的執行效能，因為對讀者而言，相信擁有簡潔友善且載入迅速的閱讀環境比較實際一些。因此，一些 Blogger 的雜七雜八外掛安裝一陣子之後就被卸載了，但是想要擁有想像中的功能就得自己動手 hack 了。

對於一個 Blog 開張時連 javascript 都不懂的人來說，這可是十分艱鉅的任務，還好有多位巨人的鉅作可供引領，長期下來從各個小地方東駭西駭竟也摸索出個雛形，慢慢也能站在他們的肩膀上架構出一個留言系統。以下預計分四篇來回顧自己的建構歷史，也算是當作一個記錄，因為沒寫下來的話，當初很多語法、構思其實自己回過頭看常常都看不懂。


二、作者回應功能

一個能夠在眾多留言中插隊的「作者回應」是十分必須的，對於曾在 Blogger 的陽春架構之下留言的人，相信能夠快速找到回應自己的留言，是非常感動的。而 Sean 大的「讓 Blogger 的意見回應可以有作者回覆」是目前看到「作者回應」功能中最經典的一個，對於想有此需求的人可說是必裝之功能。

請按照 Sean 大的網頁安裝，且建議使用「ar.js」外連檔案來安裝（免費的程式碼存放空間可參考「Google Code 簡易使用教學」），不要將一大串程式碼全部複製到範本裡，因為壓縮過的程式碼不利閱讀且日後不易修改，另外第二篇還需要 hack 作者頭像功能；而「ar.js」其他相關的 hack 為了閱讀便利，也一起放在下一篇。


三、留言編號

留言編號的重要性在 Abin 大的「增加文章留言回應的編號」已經闡述過，讓留言有個索引，除了利於讓作者以外的留言者互相回覆，而且還有很棒的應用：日後引用資料方便。有時某些留言很有價值，但是沒有留言編號時，不但這些有價值的留言不易引用，日後更是查找困難。

WFU 的應用是在「2011 BLOG 更新紀要索引」這樣的一篇索引文，每當有價值的留言出現便記錄在這篇文章。由於在 Blogger 的搜尋系統無法搜尋留言內容，但是將留言索引記錄在文章內，Blogger 就搜尋得到了。

言歸正傳，要有留言編號其實不難，參照 Abin大 的教學，只要在留言的迴圈之內插入 javascript 就可以辦到。但我沒有用這個 hack，因為沒有這個 hack 的某些需求，而我的需求正是該文 "回應 # 27" 老吳 提到的「將作者回應」跟「留言編號」結合的 hack。可惜 Abin大 可能有將近兩年沒有回文了，所以這個小 case 就 WFU 自己來想了。

請參考 Abin大 的原文概念，到 Blogger 後台 → 範本 → 編輯 HTML。接著確定好自己要放留言編號的位置後，安裝以下程式碼：


B～D：這段程式碼請放在 </head> 之前。

C："comment_index" 是留言編號的變數；"plus_zero" 變數是為了美觀，是幫個位數補個零，如果不需要可以省略這個變數。

G：以下程式碼請參考 Abin大 原文，置放的位置必須在 <b:loop values='data:post.comments' var='comment'> 的迴圈之內。

******** 2011.10.15 增補 ********
k哩於【留言 #02】表示 Abin 大的作者回覆功能失效。經 check 後發現，Abin大 的作者回覆在判斷 "留言者" 時，會去抓取 "留言者暱稱" 的前後字串，因此若把「留言編號」程式碼的位置放在 "留言者暱稱" 前後，會導致作者回覆功能在 "判斷留言者" 時，把 "留言編號" 的字串一併當成 "留言者暱稱" 了，所以只要是新的留言，作者回覆的功能就會當掉了，而舊的留言不會。

結論：H～S 行的程式碼請勿放在 "留言者暱稱" 的程式碼前後，以避免作者回覆功能判斷錯誤。
*************************************

H：這行程式碼解釋起來，都可以開一篇文了，因此下個大標題再解釋。目前請先理解這一行隱含的意思為：「如果發這篇留言的人不是文章作者」，就執行之後的程式碼（印出留言編號）。這一行的紅字部分，請參考下一節「四、判斷留言者是否為文章作者」的方法，置換為自己的個人簡介網址。

不過，如果沒有安裝「作者回應」功能的話，想讓每篇留言都有留言編號，請將 H 行與 S 行刪除。

I：設定留言編號的字體、顏色、位置等，可自行調整。

L：留言編號加一。

M～N："&lt;" 代表 "<" 符號；的如果留言編號小於 10，個位數前面就補個 "0" 比較美觀。

如不需要補 "0"，M～N 行請刪除、O 行的「plus_zero」改成「comment_index」。

O：印出留言編號的樣式，可自行調整樣式。

以上「作者回應」+「留言編號」的效果可參考「三國志11 留言板」。


四、判斷留言者是否為文章作者

這個章節的內容是用來解釋上一段程式碼中的 H 行判斷式。關於「判斷留言者是否為文章作者」這個難題，Abin大 在「作者和一般回應的標示區別」這篇文章中尋求過解答，可先參考過這篇文章好先有個基本概念。他在該文與眾多留言者討論之後的結論是：「關閉留言者頭像」可以避免和他的判斷式衝突，如果想要不衝突得等他有空研究。

從他們討論的判斷式看來，尚未找到精準判斷留言者是否為文章作者的條件句，因為有可能留言者跟文章作者都有 Blogger 帳號，且是同一個暱稱，而「關閉留言者頭像」對版面美觀可是扣不少分。既然 Abin大 沒空，那麼這個 case 還是自己想吧。拿出 Blogger 的官方說明書來翻一翻，看看有什麼點子可用。從「版面配置資料標記」這個網頁，看到 "Blog Posts" → "posts" → "comments" → 「"authorUrl": 如果不是匿名意見，則為意見作者個人資料的 URL。」由於 "authorUrl" 存放文章作者獨一無二的參數──個人簡介(profile)的網址，把它拿來當判斷句應該就可解決問題了。

首先我們要找到自己 Blogger 帳號個人簡介的網址，最簡單的方法就是以 Blogger 帳號登入後，發一篇測試留言，接著該篇留言應該會顯示自己的「頭像」及「暱稱」，滑鼠對著「頭像」或「暱稱」點下去後網頁就會跳到自己的個人簡介網址了。

因此，H 行紅色的部分是 WFU 的個人簡介網址，請置換為自己的個人簡介網址，沒改的話這個判斷句可是一點作用都沒有喔！


Ok, 第一篇的問題已經解決了，由於 Sean 大的「作者回覆」功能沒有頭像的語法，下一篇除了要加入頭像，還要讓各種身份的留言者頭像都可以顯示。

Blogger 各種身份頭像顯示＋尺寸變更


參考資料： 
讓 Blogger 的意見回應可以有作者回覆
增加文章留言回應的編號
作者和一般回應的標示區別
版面配置資料標記