2007-02-16

首頁即時可展開的留言回應 (Comment Toggling)

Blogger 中唯一不能自訂樣式的介面,就只有留言回應的系統,主要的原因應該是留言者的身份認證所致,那個部分有太多的檢查、而且又不容易模組化。即使用了自訂網域,使用者一旦留言馬上就露了餡,看得出來這個 Blog 是 host 在 Blogger 上面的,不過這不是本文重點。在 Blogger 裡面如果只是要看每篇文章的留言內容,以現在的瀏覽流程來看,除了點入該篇文章連結去瀏覽單篇文章外,其他方式都會被指向到 Blogger 的留言介面去,並沒有一個單純只是瀏覽留言、卻又不用指向單篇文章的方法(講那麼複雜,就是可以在首頁、Archived 和搜尋結果的頁面、不用跳轉連結就能看特定文章的留言回應)。

後來不經意地看到了一個範例,操作的感覺和效率正是我要的 Hack,就動手準備拿來用,深入看了程式碼後發現了幾個問題:第一,範例裡面用的是 included 放在別人站上的  Javascript 檔案,裡面更扯的還要綁作者的一個 PHP 去做資料處理服務!第二,這個範例與樣版範本有很大的關連性,也就是說修改的地方照範例改了,出來的效果會因為你樣版和對方不同而有很大的差異!為了符合我自己的版面,所以就花了一些功夫去改原作者的程式碼,也因此改完的結果不是剪貼程式碼進去就能用。所以這次不貼出我自己 Hack 的程式碼,此部分請參考原作者原文,搭配我 Blog 的原始碼服用~(這次的修改牽扯的範圍很大,除了記得要備份之外,如果不是很瞭解範本的人,也不要輕易嘗試~)

根據原作者的範例,我有做一些修改:首先針對上面提到的第一點,我修改作者的 Javascript 檔案,除了修改函式和變數名稱(至少我要看得懂)、精簡程式碼外,也拿掉會連回原作者服務的部分功能函式(有犧牲到一點功能,但至少不會再要求連回作者網站)。接下來,因為這是關於「留言回應」的操作,當沒有留言的時候當然功能就要關閉(可以節省原始碼數量),有改到範本的部分也加入了註解。然後,能夠展開當然也要可以收合回去,我也補入了收合的連結,並且要兼顧整篇文章瀏覽和展開留言兩邊版面的一致和美觀。最後花最多時間的,還是在調整版面,以及修改 CSS。以上步驟講得很簡單,真的改起來會要人命~(花了我幾天 Debug)

細節不講了,美中不足的有兩點:第一,損失留言作者的連結(這就是上面提到的犧牲到的一點功能),第二,之前做的作者回應標示也沒辦法實現。不過能有目前的效果和效率(速度比原作者更快),美中不足的地方也瑕不掩瑜吧!最後再補充我參考的文章以及原作者連結,希望有興趣的人都可以改得順利~

參考文章:
[Blog] 讓評論具有展開摺疊的效果!
Singpolyma - Technical Blog: Asynchronous Peek-a-boo Comments

回應: 10

idlelife 提到...

請問可以教一下怎麼用嗎??
參考連結已經失連了><

Abin 提到...

To idlelife:
我文章中已經說了,這和每個人樣版程式碼是息息相關的,我自己的辦法很難寫文章去「教」。如果想用,可以直接看我的 Blog 原始碼,如果看得懂,可以參照自己動手去改,如果看不懂,那麼還是請打消套用的念頭,因為很容易把你的樣版改爛。
如果不用我的方法,傳統的辦法第一篇參考的文章雖然失連,但第二篇原文還在,可以參考。

Idle 提到...

恩...
好吧 謝謝大大了
畢竟也不太熟java...

Ned 提到...

請教您一個小問題
我在回覆別人的回應時,會自動縮排一個字,看起來版面怪怪地,不知要改什麼位置,會和您的回覆一樣,不會自動縮排呢?
謝謝您

Abin 提到...

To Ned:
回覆回應的介面,我完全沒改動過,用的都是 Blogger 預設的回應介面,因此沒有什麼會被自動縮排的問題。
我到您的 Blog 試著回應,我沒看到什麼縮排的狀況,但,您回覆回應的介面的確和我「預設」的不一樣。不知道是因為你套用什麼樣板、或是 hack 的關係嗎?
我沒改過,所以也不知道你的樣版有沒有改動到什麼,抱歉。

Ned 提到...

謝謝您,讓我受益良多

Traven 提到...

首先要先感謝站長大人一系列 Blogger Hack 的文章~既簡單又實用,讓不太明白 CSS 的我也能輕鬆新增功能到我的 Blog~

關於留言回應功能改寫,雖然站長提供的原文網站有很清楚的解說,不過對於不太明白 Blogger 原始碼的我而言還是很吃力阿~這幾天一直在尋找更簡單的方式,終於讓我找到一個不用寫程式就能達成即時回應功能的服務了。
這個網站叫做 Intense Debate,大家可以去免費申請他的留言功能,而且可以很快的整合進 Blogger,昨天也用了一些時間寫了一個小教學,希望對大家有幫助~:)
Happy blogging ~~~

Abin 提到...

To traven:
謝謝您的分享,看起來的確是一個有針對 blogger、整合性很高的留言系統。
不過,我必須說一下這類外掛的缺點:首先,留言不像 Blogger 一樣可以提供 RSS 訂閱,所以使用者沒辦法即時得知讀者的留言狀況。另外,它「鼓勵」留言者去該網站「註冊」,雖然有提供 OpenID 整合,但是對有 Blogger 帳號的使用者留言反倒不夠友善。再來是介面,預設是「英文」的,對很多中文的 Blogger 還是要改程式碼。最後,也是我最在意的,留言系統不用 Blogger 內建的、反倒用另外的服務商,該服務商如果服務停止或中斷(像 Spotplex 是就是一例,如果拿它來計算單篇文章點閱率,現在就掛掉了),那麼文章能看、使用者卻不能留言,因此採用這類外掛還是有其風險的喔!

炸機瑞 提到...

請教一下:
關於blogger張貼意見的功能,總是要開新視窗才能留言。
但是我再國外的網站上看見了一個我很喜歡的樣式,可以直接在文章本頁留言。請問那是怎麼辦到的?

網址:
http://creation-template.blogspot.com/2008/06/this-wonderful-blogger-template-was.html

Abin 提到...

To 炸機瑞:
在文章本文內留言的功能,已經是 Blogger 官方測試版的功能之一了,不過目前只公開在 Blogger in Draft 內測試中。如果你有興趣享用,請看這一篇官方的公告說明,不過有部份不能符合我的需求,所以我也還沒套用。

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!