2012年4月30日

Blogger「文章列表+快速顯示讚統計」__簡易安裝

A+

(Pic from: designdownloader.com, Installation sous Linux : Autopackage)
2016.4.8 公告:因 Google Drive 外連失效,請勿使用本篇的程式碼,請改用新版「Blogger 文章列表極速版﹍(1) 依日期排列


以前所做的「文章列表+讀者反應」雖然能夠勉強列出每篇文章的「讚」統計,不過執行速度真是個大悲劇,有興趣挑戰耐心的話,可以點擊這個「展示頁面」觀看效果。當網站規模不大時,這速度是可以忍受的;但文章累積到一定數量,速度慢就是個大問題。歸咎其原因,之前列表裏的的讀者反應有三種,讀取資料時得分別跟三個 server 送出 request(請求),請求的數目還得乘上文章的數量...光用想像就知道這要等多久了。

為了效率著想,Google 的 +1 使用者相對上極少──刪除;讀者反應的點擊量也不大──刪除,使用刪去法後只需要等待「讚」按鈕顯示的時間。但,當網站有幾百篇文章、甚至上千時,等待 server 傳來這數百、上千個 request 也是一種沒效率,於是花了一點時間研究 facebook 資料庫,終於找到了方便的統計資料存取方式。以下直接說明新版「文章列表+"讚"統計」的安裝方式,而 facebook 資料庫的存取另外再找時間專文討論。

2013.8.10 公告

由於近日存放在 Google Code 的 js 檔全部被刪除了,本文的外連 js 檔已改放到 Google Drive 空間。曾安裝過本文程式碼的讀者,請修改所有程式碼的 js 檔連結。為了避免日後有其他意外,也建議讀者參考「取代 Google Code 外連 js 檔的選擇__Google Drive」,自行備份 js 檔並上傳到自己的 Google Drive 空間。



2012.7.30 增補

本篇的文章列表均包含"讚"統計,如文章列表不需要讚統計,可參考「動態檢視 Blogger 文章列表──簡易安裝」→ 文末 2012.7.30 增補 → 四、個別安裝,有依日期排列、依標籤排列兩種格式。




簡易安裝篇


一、依日期排列

友站「KuangTC's Blog」使用了兩種文章列表的格式,一個依日期排列,一個依標籤排列;由於版面美觀,於是借用此兩個模版的程式碼來改。

1. 簡易安裝:新開一篇文章 → 複製以下程式碼貼上 → 存檔即完成

<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_date_FB_main.js' type='text/javascript'></script>
<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_date_FB_display.js' type='text/javascript'></script>

接著可以將這篇文章的連結放到部落格上方的水平選單上,就像本 Blog 一般。

欲先看效果請點此展示頁面:「文章列表+"讚" 統計__依日期排列───展示頁面

2. 自訂安裝:如果想要自訂字型、顏色、寬度、圖案等等細項,請參考「文章列表+"讚" 統計__依日期排列──自訂安裝



二、依標籤排列

這個模版除了依照標籤排列之外,還會標示最新的十篇文章。

1. 簡易安裝:新開一篇文章 → 複製以下程式碼貼上 → 存檔即完成

<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_label_FB_main.js' type='text/javascript'></script>
<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_label_FB_display.js' type='text/javascript'></script>

接著可以將這篇文章的連結放到部落格上方的水平選單上,就像本 Blog 一般。

欲先看效果請點此展示頁面:「文章列表+"讚" 統計__依標籤排列───展示頁面

2. 自訂安裝:如果想要自訂字型、顏色、寬度、圖案等等細項,請參考「文章列表+"讚" 統計__依標籤排列──自訂安裝


三、依樹狀標籤排列+推文數量統計

如果部落格有安裝「樹狀標籤」,也就是標籤為 "AAA-BBB" 形式的話,那麼可以使用這個版本的文章列表;如果同時也安裝過簡易安裝版本的「推文系統」,那麼推文的數量也會一併顯示;沒安裝過推文系統也無妨,因為沒有推文數目當然不會顯示出來。

1. 簡易安裝:新開一篇文章 → 複製以下程式碼貼上 → 存檔即完成

<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_TreeLabel_FB_Push_main.js' type='text/javascript'></script>
<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_push_count.js' type='text/javascript'></script>
<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_TreeLabel_FB_push_display.js' type='text/javascript'></script>

接著可以將這篇文章的連結放到部落格上方的水平選單上,就像本 Blog 一般。

欲先看效果請點此展示頁面:「文章列表+"讚" 統計__依樹狀標籤排列───展示頁面

2. 自訂安裝:如果想要自訂字型、顏色、寬度、圖案等等細項,請參考「文章列表+"讚"、"推文"統計__依樹狀標籤排列──自訂安裝

看過展示頁面就可知道速度跟以往真是天差地遠,馬上就幫網站裝個文章列表吧!


注意事項:
  A. 貼上程式碼前,注意是否為「HTML」的編輯模式(而非 "撰寫" 的編輯模式)。
  B. 文章設定 → 「選項」 → 「撰寫模式」,注意是否為「解釋輸入的HTML」。


2012.5.11 增補

四、文章列表動態顯示

由於研發出了文章列表動態顯示的功能,因此目前部落格上方的水平選單已經不是原本的網頁連結,而是動態顯示的語法,執行速度比起原本要重新整理頁面的速度幾乎快上一倍,請見新的安裝方式:「動態檢視 Blogger 文章列表__簡易安裝篇

9 則留言:

  1. WFU:

    試了新的版本,果然快很多呢!!謝謝!!

    回覆刪除
  2. <2501794321044747911>(以上內容請勿刪除,從括號之後開始留言)不客氣,部落格文章數越多的時候,這個工具的效果越能展現出來!

    回覆刪除
  3. 真不愧是WFU大,提供了不少好用的blogger hack,我會再仔細研究來安裝的(最近好累啊,都懶得改版面)
    也謝謝你在這篇提供我的blog~太開心了XD

    回覆刪除
  4. <4857228703015425239>(以上內容請勿刪除,從括號之後開始留言)哪裡,吃果子要拜樹頭啊~從你那裡我才看到這兩種文章列表的~~越多人使用我的 hack 我也會越開心的 ^ ^ 另外也要保重身體啊,如果是我的話,看到你的美食、旅遊圖片,心情就輕鬆多了!

    回覆刪除
  5. 你好~我來這裡留言了!
    我是想問"依日期"的簡易安裝 照步驟做出來像這樣:
    http://lisa50218.blogspot.tw/2012/07/blog-post_24.html

    然後我是想去掉按讚統計,該怎麼做呢?(新增的那篇文章中程式碼要怎麼修改?)
    真的很感謝你!這個方法好簡單喔!其他人的方法都要改範本的版型,像我這種code白癡看得霧煞煞~

    回覆刪除
  6. <1546697931478012552>(以上內容請勿刪除,從括號之後開始留言)
    我以前也很怕看到安裝複雜的 hack,所以現在自己會寫 hack 了,就盡量讓安裝方式越簡單越好,這樣自己方便、大家也方便囉~~

    後來想到這篇文章的主題是「"讚"統計」,把沒有讚統計的文章列表更新在這一篇有點怪怪的;不過我另一篇文章包含了沒有讚統計的文章列表,我覺得更新到那一篇比較恰當,所以把程式碼放到那一篇去了,請依照以下步驟就可以找到你要的文章列表安裝方式了:「動態檢視 Blogger 文章列表──簡易安裝」→ 文末 2012.7.30 增補 → 四、個別安裝,有依日期排列、依標籤排列兩種格式。

    回覆刪除
  7. 大大你好~~我裝了這個之後又有問題~~文章列表不會自動更新@@
    發表了文章列表的文章之後再加上一篇文章, 結果列表沒有更新@@
    有時候又會整個突然不見了,
    然後再重新輸入java碼才會出現, 但仍然沒有最新的那篇文章@@..是我blog的問題嗎?

    網址如下
    http://kazeal138.blogspot.hk/

    回覆刪除
  8. <7910795869770613720>(以上內容請勿刪除,從括號之後開始留言)
    我看了你的網頁,http://kazeal138.blogspot.hk/2012/12/blog-post_2123.html 這篇的文章列表是正常的喔~

    我想是程式沒問題的,有時可能只是 blogger 的 feed 讀取不正常而已;如果換個時段能正常顯示,那就不必太在意了,偶爾是會發生這樣的事~

    回覆刪除
  9. 啊,,!!又真的可以了..那可能是伺服器問題
    了解了解
    抱歉麻煩了你 ><

    回覆刪除

張貼留言注意事項:

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