2011年9月2日

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

A+
一、前言

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 的意見回應可以有作者回覆
增加文章留言回應的編號
作者和一般回應的標示區別
版面配置資料標記

5 則留言:

  1. 你好 我看到這篇文章覺得很有用 看起來也不難 所以就馬上試著做 結果並不是很成功 因為連我自己的回覆也有編號 後來只好放棄
    隔天又再試了一次 竟然成功了 發現原來我上次沒有好好讀完您的文章 少改了H行紅色的部分的個人簡介網址=_=" 難怪每個回覆也都有編號 不過真是太謝謝您了!! 現有留言板看起來完整多了!!

    今天又有新的問題想請您幫忙 我的留言總數(顯示在首頁 每篇文章的下面) 還是會把我本身的回覆也加進去 這是我的網址http://www.ishoppingkelly.com/(還不是每篇文章都有留言 要往下找一下 不好意思)
    請問我該怎麼改呢??

    回覆刪除
  2. WFU大 我真的是欲哭無淚了 今天早上查看新留言的時候發現 回覆留言的功能秀斗了(現在不管是想回覆新留言 還是舊留言 都會跑到最後一筆去 而且還出現大頭照來 原本的回覆卻沒有耶) 是我當初沒裝好嗎?? 好苦惱哦 blogger果然不是給我這種頭腦簡單的人用的>_<
    已經開始要自暴自棄了…… 能不能救救我~~~~~
    謝謝

    回覆刪除
  3. Re: k哩 <6475894807371681695>

    引述:
     「原來我上次沒有好好讀完您的文章 少改了H行紅色的部分的個人簡介網址=_=" 難怪每個回覆也都有編號


    原來如此,我重新看了文章,我在 H 行的確沒有標示清楚,漏看最後一節的確會搞不清楚錯誤原因在哪,因此補充了 H 行的敘述。

    引述:
     「我的留言總數(顯示在首頁 每篇文章的下面) 還是會把我本身的回覆也加進去


    留言總數會把作者回覆也算進去,這是正常的,請看我的網頁也都是如此,而且這是系統直接從後台資料庫抓的資料所以無法更改。而我只是利用 H 行的判斷式,讓顯示留言編號的地方跳過我們的作者回覆,讓版面比較好看而已,並不是把作者的留言編號序列給真的變不見。其實這個數字多寡應該不會有什麼影響才是,看久了就習慣了~~ ^ ^

    另外,"留言總數造假" 也是可行的,因為你有安裝作者回覆的功能,如果你很確定會回覆每則留言,那麼可以在所有出現留言總數的地方,寫個 javascript,把「留言總數除以二,再四捨五入」,就能達到你要的效果了~~

    回覆刪除
  4. Re: k哩 <3771314851687065368>

    我能體會你的感受,當初剛弄 blogger 的時候也是如此,常常不知做了什麼動作,一些功能就忽然間消失了,debug 半天也找不到原因,就是你形容的這種感覺...(拍拍)

    過來人給幾個建議,避免慘劇重複發生(如果已經有這些習慣是最好的了):

    1. 每安裝一項新的功能,新的程式碼前後一定標上區間,這樣以後才好追蹤,例如:

    <-- WFU 留言編號 top -->
    新的程式碼
    .
    .
    <-- WFU 留言編號 bottom -->

    2. 安裝新功能前,務必先備份範本,給檔名加上編號。

    3. 各功能能夠正常運作達一個月,才把最後一次儲存的範本當作最終版本,另存一個檔,例如取名"穩定版本"。

    如此以後要抓問題就很方便,把過去儲存的各版本範本重新匯入,有問題的功能重新裝即可。


    引述:
     「早上查看新留言的時候發現 回覆留言的功能秀斗了(現在不管是想回覆新留言 還是舊留言 都會跑到最後一筆去 而且還出現大頭照來


    這情形我遇過,Abin大的作者回覆功能失效,事實上從以前到現在, hack 各種程式碼的過程跟這個功能相衝過好多次。剛好你提出這個問題,我也可以在本文做一些提醒,讓後來者小心這些問題。

    由於 Abin大 的作者回覆在判斷 "留言者" 時,會去抓取 "留言者暱稱" 的前後字串,剛好你把「留言編號」程式碼的位置放在 "留言者暱稱" 之前,導致作者回覆功能在 "判斷留言者" 時,把 "留言編號" 的字串一併當成 "留言者暱稱" 了,所以只要是新的留言,作者回覆的功能就會當掉了,而舊的留言不會。

    解決的方法很簡單,避免把「留言編號」的程式碼放在 "留言者暱稱" 的程式碼前後即可。試試看換個位置吧,我也會在本文增補這件事。

    回覆刪除
  5. 呼~聽你這麼一說我心情回復了一些!!
    哦哦 這幾個建議很受用喲!!! 我從來都不知道要怎麼標區間 所以都已經被我改到不知道哪個是哪個了 >_< 我看我還是老實點 花點時間去標一下好了
    嗯已經改好了!!現在一切又回復正常了 太好了yay~~~
    唉blogger有時很難駕馭讓人想撞牆 可是一旦問題解決了就很開心很有成就感!!
    總而言之 謝謝WFU大的耐心解答 幫了小女子我好幾個大忙呢 以後還會常來晃喲^^

    回覆刪除

張貼留言注意事項:

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