2009-03-05

增加文章留言回應的編號 (Show Comment Index)

習慣透過 Blog 和「讀者」溝通交流的人,應該會發現 Blogger 的留言回應少了一個很重要的參考,那就是留言的「順序編號」。雖說這個編號是流水號,但這個有順序的編號對某些人氣很高的 Blog 來說,代表了讀者留言的前後關係,有的粉絲會盯著作者發表或更新文章,透過搶第一個留言的方式來表達熱情,什麼搶「頭香」「沙發」之類的,雖然這種行為沒啥意義,但還是一堆人樂此不疲。當留言少、一眼整頁就能看完的時候,其實編號的意義並不大,但留言一多,其中還有鄉民在發問(偏偏一堆人不愛看其他人的留言或回應),如果要針對特定一篇留言討論(「五樓」?!),或告知答案在的第幾篇回應中,沒有這個編號就很麻煩了(雖然編號會因為中間留言刪除而改變,但雖不中亦不遠矣)。又不少鄉民愛用「幾樓」來指定特定的第幾篇留言,如果不在留言上打上「樓層編號」,留言在管理和討論上實在也很不方便,難不成要讀者一篇篇用手數嗎?

當然這個問題不少人也有發現(追根究底是 Blogger 的樣板語言裡,有迴圈語法卻沒有顯示迴圈 Index 的變數),既然如此,那只好手動塞 Javascript 程式在該迴圈外和迴圈內,單純做個計數器就能夠搞定,不過坊間的改法看起來比較不友善,因此這裡用比較簡單的方式來處理這個問題(鄉民們也比較容易剪貼來用)。

首先定義這個回應編號計數器的宣告和計算。登入管理介面,切到版面配置、修改 HTML 樣板原始碼(要展開小程式範本),在程式碼 <head> 區段內(</b:skin> 標籤後、</head> 標籤前),塞入以下 Javascript 程式:

<script type='text/javascript'>
//<![CDATA[
<!-- Function used for generating the index number for each post: ShowCommentIndex() -->
var CommentIndex = 0, CommentPostID = '';
function ShowCommentIndex(PostID) {
  if (CommentPostID != PostID) {
    CommentIndex = 0;
    CommentPostID = PostID;
  }
  document.write(++CommentIndex);
}
//]]>    
</script>

接下來決定在留言內,要顯示回應編號的位置。基本上只要放在產生所有留言的迴圈「後面」就行了,那一行是:

<b:loop values='data:post.comments' var='comment'>

舉例,我把留言編號放在該篇留言的最後面 (comment-footer 區段裡、留言的時間後面,如同上面的例圖一樣),顯示編號的程式碼放的位置和內容如下:

<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>
   <!-- Fixed for display comment index -->
   | <data:commentLabel/> #
   <script type='text/javascript'>
     ShowCommentIndex(&#39;<data:post.id/>&#39;);
   </script>
</dd>

其實新加的關鍵是上面的倒數第六行到倒數第二行,如果編號想顯示在別的地方,請自行變更那五行的位置就行了(想改字型大小、顏色或靠哪一邊,請自己定義那一段的 CSS 樣式)。

和別人不一樣的是,程式碼裡我多加了 Post ID 的判斷,因為那個計數器變數 (CommentIndex) 是全域變數,如果有其他模組「同時」要用這個函式,只要不要交叉呼叫,基本上同一個頁面不同的文章也可以產生正確的留言編號。對像我一樣用一堆 Hack 的人來說,算是多做一點檢查和判斷,以避免重複呼叫產生編號錯亂的情況~

回應: 31

Davin Chao 提到...

To Abin:
老大的教學淺顯易懂!
經過一番摸索及調整,我搞定好我要放的位置了~~~

Xavier 提到...

馬上就拿來用:D

Troy 提到...

在這裡挖到不少寶呢, 不過想請問一下, 如果要把發表意見時, 要填的欄位改掉有沒有辦法? 例如不少朋友抱怨過的"名稱/網址",他們說只是不想要匿名,但是也沒有網址可以輸入,怎麼修改成網址非必要呢?

Abin 提到...

To Troy:
我想對這個「發表意見」的樣式很多人都有不同的意見,我在這篇文章有提過,這種「官方」「內嵌」的留言方式,由於是呼叫了官方「外掛」的 iframe + Javascript,在自己的 Blog 裡並沒有辦法去調整樣式,更別說要修改這些身份的選項,所以如果要用,就只能接受這些東西。
當然硬要改一定也有辦法,不過硬改後哪天官方針對該模組做調整時,這些硬改的部份可能會有其他問題,所以不建議去修改。

Troy 提到...

好吧...就等哪天硬起來自己架wordpress吧xD...多謝回應囉^^

Unknown 提到...

To Abin:
有多的教程,收益不少。

有沒有辦法把留言順序按最新時間這樣列出來。而不是像現在這樣沙發在前。

KJ 提到...

想問問如何可以在blog中修改"意見"這字眼為自訂的字眼!!

KJ 提到...

還有如何加入最新回應此欄?

Abin 提到...

To or:
要更換留言排列順序,按最新時間列出目前沒有辦法。因為這部份是套用 Blogger 自己的模組、透過 loop 迴圈一篇篇跑出來的,而這個迴圈語法沒辦法調換取出資料的順序,如果要手動 HACK 當然也做得到,不過工程蠻浩大的。

Abin 提到...

To KJ:
登入管理介面,「版面配置」、「網頁元素」,在「網誌文章」的模組上「編輯」,在選取項目裡就可以改那個自訂的字眼。

KJ 提到...

謝~!!那你還未答我有關如何加入最新回應的一欄喔!!!

KJ 提到...

不好意思,又來煩你了!你知不知道如何加入「BLOG的最後更新時間」呢?

晴兒 提到...

如何在文章中寫入語法?

Unknown 提到...

之前我在看blogger範本幫助時,看到這篇 如何變更存檔連結的順序? 才聯想起這個功能的。

看樣子很麻煩這個功能。

Abin 提到...

To KJ:
請你發問前,都先搜尋一下,因為你問的問題和本文回應都沒有關係。找一下我 Blog 裡都有答案,再不然參考我「Blogger Hack」的文章也可以都找到,裡面「最新回應」和「最後更新時間」都有介紹的文章。

Abin 提到...

To or:
「存檔順序」是 Blogger 自己提供的功能,並不是透過 Hack 去達成的,如果 Blogger 不提供設定的話,要自己做一樣也是很麻煩。

Abin 提到...

To 晴兒:
如果你要在文章內敲入語法,Blogger 是不能幫你的,你要透過其他服務或編輯器作轉換才行。我自己是在 Google Doc 裡面寫語法,當要發表到文章裡時,用 Google Doc 裡面「檢視 HTML」的功能輸出成 HTML、然後再貼進 Blogger 的編輯介面(一樣是 HTML 原始碼編輯),如果有相同需要可以參考。

Unknown 提到...

thank you

Unknown 提到...

作者已經移除這則留言。

阿斌 提到...

很方便的功能,謝謝!

匿名 提到...

成功了!
By the way,
如果只想顯示日期,不顯示時分
要如何修改?

Abin 提到...

To 烏衣行:
請登入管理介面,在「設定」->「意見」裡面,去設定「意見時間戳記格式」,自己可以決定留言回應的時間格式。

阿達瑪醫生 提到...

又是很實際、很棒的功能,您的教學真是部落格新手的聖堂
再次感謝您!

提到...

非常感謝您的教學!
我blog的最新文章/回應/回應編號,都是參考您的教學~跟您說一聲~^v^

Abin 提到...

哈,這個功能的確是最實用但 Blogger 又獨漏的東西~

Unknown 提到...

it works !! 非常實用~~十分感謝!

woo 提到...

剛剛裝好以為成功了,結果因為之前裝了"Sean's Blog"的"讓Blogger的意見回應可以有回覆(http://sean.o4u.com/2008/10/blogger.html)",程式可能衝突到了,只有第一個留言可以正常顯是樓層@@。可惜了一個好功能,如果這兩個hack可以結合就太完美了,不用第三方套件的單篇回復實在太誘人了,希望您有機會可以研究看看。

Jackie Wu 提到...

厚~在這邊參考太多實用的文章了,你真的很神!!
在此請教一件事情,參考這邊內容,我按照步驟修改了語法
可是不知道為什麼,留言的文字都會重複
http://cooljames1975.blogspot.com/2010/06/blog-post.html#comments
找不出原因在哪(其實因為對語法真的是菜鳥)
如果大俠有空閒,可否幫我看一下~
非常之感激....

HANK 提到...

此篇可以轉載嗎?

Unknown 提到...

to #27 老吳:

想要 sean大 的「作者回應」功能 + 留言編號,可參考我 Blog 的文章:

Blogger 留言系統 __ (一)作者回應+留言編號
http://wayne-fu.blogspot.com/2011/09/blogger.html

Unknown 提到...

真的很感謝ABIN老大的分享~
讓對語法一竅不通的我,也可以輕鬆上手~感謝感謝!!

張貼留言

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