2014年9月17日

[小工具]讓 Blogger 串聯式留言能由新到舊排序

A+
Blogger 留言排序這件事,從使用 Blogger 以來(舊範本時代),一直到現在的串聯式留言(新範本),不斷有使用者提出詢問:「能不能從最新的留言開始顯示」?實際上從 "使用者體驗" 的角度來看,這個要求非常合理,否則當留言一多時,螢幕都得捲到最底部才能看到新的留言,這是非常不友善的設計。

可惜這麼多年以來,此事一直沒有進展,而多數有名的第三方留言外掛(G+、FB、Disqus),留言能以各種方式排序都是基本配備,也難怪乎 Blogger 使用者紛紛棄官方留言板而去。

實際上,官方留言板擁有無可取代的優點存在,而 WFU 也準備撰寫專文推廣,但最大的阻力在於,官方留言板功能過於陽春。因此這篇文章要寫出來,第一個要解決留言排序的問題。那麼,對官方留言板還有信心的讀者,請按本文的操作,來安裝這個「Blogger 留言由新到舊排序」的功能吧!



<< 請注意!本篇文章含會員限定內容 >>



一、會員限定內容


花一點點篇幅介紹一下,「會員系統」算是本站一個劃時代的功能,只要讀者擁有 FB 帳號,就能免費加入會員,看到 "會員限定" 的文章內容。

「Blogger 留言由新到舊排序」也算是一個劃時代的功能,那麼拿來搭配「會員系統」的隆重出場,也算是很好的時機點。讀者只要稍微花不到 30 秒的時間,就能註冊完畢,並提昇權限為 "會員身份" 來讀取隱藏的文章內容,完成這個工具安裝。



二、準備動作


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

1. 請到後台「範本」→「編輯 HTML」,搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<style>
/* 留言排序 */
#comment_sort {
float: right;
font-size: 14px;
}
</style>


1. 首先可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jquery,以免重複安裝。

2. 如果需要調整 CSS 參數,可修改 style 區間的內容。



三、安裝程式碼


接著請搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:


請參照以上程式碼行號修改參數:

E:預設 1 代表 "由新到舊" 排序,0 則相反。

F~G:可自訂字串內容

H:預設值 "fadeIn" 效果為 "淡入淡出",若想改為滑動效果,請將字串改為 "slideDown"。

J:由於「Google Drive 關閉外連」功能,綠色字串的 JS 網址是無法外連的,請參照「WFU BLOG 外連 JS 變更及操作說明」,將這個連結下載後存成 JS 檔,上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後,置換本行的綠色網址字串。


以上程式碼若想先看看效果,可前往以下網頁:



Blogger留言 相關文章:

11 則留言:

  1. 終於等到留言板排序的"實裝"了! 立刻來推一個^^

    加入會員以及會員限定功能也好炫,有點像論壇那樣,還有會員討論區XD

    回覆刪除
  2. <4102343409284969895>(以上內容請勿刪除,從括號之後開始留言)感謝你的支持~^^

    回覆刪除
  3. 會員限定的註冊流程很順暢,如何繼續轉入會員區及討論區的設置也需要費點心思了。
    何時會發公告?客製化的範圍等﹍我再轉分享出去。

    回覆刪除
  4. <2315485464099837523>(以上內容請勿刪除,從括號之後開始留言)因為還是未完成品,手機版的版面如何處置還在傷腦筋...所以暫時還沒準備公告,結果就被 mark 看到了~XD

    轉入 "會員區" 及" 討論區" 是 ok 的,之後每個區域都會給直接連結,等公告時,才會公佈會員中心的連結。客製化嘛~其實我也不知道會有什麼需求,大概是要求什麼就做什麼吧~謝謝 mark 的推薦 :)

    回覆刪除
  5. <484118160430307209>(以上內容請勿刪除,從括號之後開始留言)你跟阿冠是多啦A夢雙人組嗎?哈哈!那就等公告了。

    回覆刪除
  6. Blogger可以玩成這樣
    大大實在是太猛了

    回覆刪除
  7. 剛剛很興奮地測試了此功能,但發現有個有趣的現象,如果該篇文章超過200個以上的留言,則會吃掉該篇文章的一些留言(會發現是最近期的留言通通不見了),從新到舊的排序或者從舊到新的排序皆如此

    所以很開心來回報此問題,並且默默砍掉這個迷人的方法>"<

    回覆刪除
  8. <3421732558402267877>(以上內容請勿刪除,從括號之後開始留言)我沒有超過 200 個留言的文章可以測試,因此請留下有問題的網址供檢視狀況。

    另外,這個討論串 http://blogger.wfublog.com/2014/08/200.html 提供了超過 200 則留言的變通處理方式,手動增加額外的超連結頁面讓讀者檢視。

    回覆刪除
  9. <1170078849376070828>(以上內容請勿刪除,從括號之後開始留言)
    原本是套用舊版的內建blog範本,想說改來套用內建的新版blog範本後再來試試看
    結果改了之後再套用此篇文章提供的方法,結果還是不行呀~
    有考慮要使用手動連結的方式來處理了
    提供超過200則回應的那篇文章網址給你參考
    http://stimplena.blogspot.tw/2014/11/the-sims-freeplay.html

    回覆刪除
  10. <3279480499040614065>(以上內容請勿刪除,從括號之後開始留言)這個程式運作的原理為,找出留言區塊的 ul li 標籤,根據「由新到舊」或「由舊到新」的設定,對 ul li 標籤進行排序。

    舊範本超過 200 則留言時,是以分頁的方式呈現,也就是說 1~200 個留言是一個頁面,201 之後的留言是另一個頁面,而不同頁面的 ul li 標籤的內容自然不一樣,也只能針對個別頁面的留言進行排序。

    看了這個新範本超過 200 則留言的頁面,其運作的原理是利用「載入更多」按鈕,按下後動態載入部分 "較新的留言" → 觀察的結果,這些較新的留言會安插在最新的一則留言之後。

    當預設排序方式為 "由舊到新",按下「載入更多」時留言顯示就是正常的;當預設排序方式為 "由新到舊",按下「載入更多」會將新的留言插在第一則留言之後。

    瞭解原理之後,就能找出對應的解法,這件事新範本應該是可以解決的。過陣子若有更新程式時,會在本篇留言通知,可勾選「通知我」來追蹤此事。

    回覆刪除
  11. <2565325765659272131>(以上內容請勿刪除,從括號之後開始留言)我的眼睛太大了,都沒發現按了載入更多後會出現201之後的留言,以為200後的留言被吃掉了

    如果之後有更新版本,真的太感激了,這真的很實用了呀~

    回覆刪除

張貼留言注意事項:

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