2008-01-17

計算 Blog 的文章總數和回應總數

上一篇文章才在講,如果能夠知道文章或回應的總數,透過迴圈固定數量去分割,就可以做出逐頁分頁的效果,甚至也可以讓使用者跳到「某一頁」。這些分頁效果的關鍵,就是從 Feed 得知該 Feed 總共有幾篇文章,用那個數量變數來切割,而一般 Feed 提供固定數量的文章(像 Blogger 預設 20 篇),單純用 JSON 或其他方法抓 Feed 內容來分析,也不能知道「總數」,直到我看到 lvchenRecent Comment for Blogger 外掛懶人包,哇!好華麗好炫的「加強型最新回應」模組啊!當然,除了上下頁、跳頁之外,我有興趣的是,那個右下角的「總回應數」是怎麼算出來的啊!也是從 Feed 中取出的嗎?變數名稱是啥?

這個懸而未決的疑問又然起了我的 RD 魂,於是乎下載了 lvchen 的懶人包 .js 參詳一番,喔!原來是 JSON callback 傳來的 Feed 內容,有一個函式變數是傳回「總數」的:

var total = json.feed.openSearch$totalResults.$t;

應用 JSON 的方法,用 Javascript callback 一個函式、傳入 Feed、套用以上函式就可以得到文章總數哩!馬上實作,在 Blogger 裡加入一個新的網頁元素 (HTML/Javascript),自己給標題並塞入以下程式碼:

<script>
function calculateAmount(json) {
  document.write(json.feed.openSearch$totalResults.$t);
}
</script>
<!-- Calculate the total amount of feed -->
<p>Post: <script src="/feeds/posts/default?alt=json-in-script&callback=calculateAmount" type="text/javascript"/></script>, Comment: <script src="/feeds/comments/default?alt=json-in-script&callback=calculateAmount" type="text/javascript"/></script></p>

存檔之後,你就會發現,多了一個會秀出總文章數 (Post) 以及總回應數 (Comment) 的模組,不到十行就搞定!當然,秀總數只是第一步,知道所有文章的數量,除了上面提到可以處理分頁效果,像是隨機顯示文章的模組也可以達成,此時只想讚嘆:Blogger 實在是太神了啊!函式除了以上獨立的用法,當然可以嵌入任何有用到 JSON 和 Feed 的 Hack 和模組,像是「最新文章」和「最新回應」可以多秀文章或回應的總數,分別嵌入這些模組的好處是可以用現成的 Feed、不用浪費時間再 Query 一次,這樣才能滿足我輩兼顧資料豐富和瀏覽效能的要求啊!(本文範例同步更新原文:最新文章模組「終極版」

發現這個玩意之後,我好奇的是哪裡有定義這些 Feed 資料的結構和相關函式,Google 了一下,原來這玩意叫做:Google Data API (GData),上述文章用到 Feed 資料結構,在這個 GData 的 document format reference 有提到,原來很多 Blogger 透過 JSON 取用來的 Feed 完整資料結構都定義在這啊!我還只是單純地查詢需要的資料並顯示出來,上面還提供很多方法讓使用者能夠直接操作和存取各種 Google 的網路服務,舉凡 Google Apps, Blogger, Calendar, Notebook, Gocs, Picasa, YouTube,都可以透過瞭解這些資料結構和方法去存取,靠簡單的 Javascript 來做處理,不管是開發自己的 Widget、或是嵌入自己的網站,都提供了無限想像的應用啊,太神了,這可能是一般自架 Blog、或是國內一些 BSP 永遠難望其項背的~

回應: 14

LVCHEN 提到...

你寫的這篇文章還挺有趣的。
附帶一提
var total = json.feed.openSearch$totalResults.$t*1
裡面那的*1,是因為從 API 取出的資料是char,但我要當 int 處理,就利用 JS 可以任意轉換資料型態的特點,簡單的加上 *1,就會被當成 int 囉,這樣就可以少寫一幾行啦。
畢竟 JS CODE 的長度會影響載入執行的效率,所以這樣雖然是偷懶,但是也行的通,看起來也很簡潔,只是容易讓人摸不著頭腦。
嘿...我只是突然想到這些,希望你知道我在說什麼,不過我沒想到真有人會下載原始碼耶,呵呵,希望你喜歡我寫在裡面的說明。

Abin 提到...

To lvchen:
呵呵!沒想到原作者大駕光臨~歡迎!原來 *1 單純只是做 int 轉換啊~其實我使用你那一行,到現在還沒去深究為什麼,看來你和我一樣喜歡用越少行的程式碼去解決問題..
我比較有興趣的是「怎麼解決問題」,所以我都愛看人家的原始碼,其實我是在別人的 Blog 看到人家套用你的 .js 再找到你的 Blog,那份 .js 是編碼過的,還好您有提供原始碼,不然我的疑問不知道要什麼時候才能解開哩~感恩感恩~

匿名 提到...

兩位高手...
我看的懂卻寫不出來,
不過這真的很實用,
謝謝你們的分享啊!

Davin Chao 提到...

我現在的"最新回應"就是用Lvchen的,最早我則是使用堯大版...

很佩服你們這些會寫程式碼的網友,個個都超強的!

Google Blogger實在是會玩上癮....XD

Shiang 提到...

你好 首先謝謝你分享的工具~
可是我有一些小問題 就是 我的標題與內容中間有一段空行 請問我要怎麼把他拿掉
(我是初學者 才剛開始用而已)
麻煩你告訴我了~ (請盡量詳細點) 謝謝!!
我的部落格http://pourepanchermoncoeur.blogspot.com/
就是底下infos的地方 文章的統計上有一段空行

Abin 提到...

To A. HSIANG:
我看不到有什麼 infos 的地方。有空行,不外乎是用了 <p>, <br> 或是 style 上下寬度的問題,請檢視您自己的樣板原始碼。

Unknown 提到...

酷.....
你真是太強了!
感謝分享與教學 T.T(不懂語法要愛寫blog的人)

艾萊尤利斯 提到...

你好,想請教有沒有方法只找取某段時間的文章總數,例如某個月份的文章總數?

shooven 提到...

这个代码在利用blogger ftp发布的blog上好像没用。

Abin 提到...

To 艾萊尤利斯:

您提到了這個 Hack 的其他應用,首先,可以用來顯示特定標籤主題的文章數量,因為標籤可以透過 Feed 來取得總數。
而特定年份月份、甚至特定時間內的文章總數,可能要透過 search、並指定時間範圍,然後把取回的文章數量用迴圈另外拉一個變數紀錄起來。
基本上用 Javascript 就可以做、作法和呈現方式也都很不一樣,但和本文用 JSON + Feed 變數取回數量的方法是不同樣的。
不過,要顯示每個月的文章總數 Blogger 內建的 Monthly Archive 不就有了嗎?(請看我的另一個 Blog,右邊用的就是 blogger 內建的顯示「按月存檔」模組)

Abin 提到...

To shooven:

這個代碼是用在 Blogger 的樣板配置上,和是不是用 FTP 發佈文章一點干係都沒有。

悠遊卡打車 提到...

想到這個標題
讓我想到國外一個搜尋引擎網站
http://clusty.com/
而這個網站引起我很大的興趣
且你的計算文章總數讓我感覺也很有趣
國外這個搜尋引擎比較特別的是他有分類動作
除了分類還有搜尋

應該說他剛開始是先做搜尋的動作
之後在做分類計數,而什麼動作會讓他產生這樣的行為,我想了一陣子應該就是Tag的關係
讓它有這樣的分類行為產生
我想這部份可以去研究看看這個國外網站的特別之處,google雖然很強,但就是缺少了這塊可以讓使用者方便找尋網頁的功能

riceone 提到...

加入這個後會嚴重拖慢網誌速度耶,我是用firebug測試的

Abin 提到...

To riceone:
沒有到「嚴重拖慢網誌速度」的程度啦,我知道這個模組有一定程度的影響,但是在很多地方,只要牽扯到「換頁」、需要文章或回應總數的部份,沒有靜態變數可以讀取,只能靠 RSS 去查詢取得 Feed 裡面的總數資料,不過它不像 Javascript 需要運算,基本上是在「等」 RSS Feed 傳回數值,所以該模組本來就會回應較慢。大部分用 Feed 抓資料都會有類似的狀況,這不算嚴重拖慢速度啦。

張貼留言

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