Blogger「全文列表＋讀者反應」（一）

**** 2012.4.30 修訂：「全文列表＋"讚"統計」的新版語法執行效率快上十倍，請使用新版語法「Blogger「文章列表＋快速顯示"讚"統計」──簡易安裝」 ****

一、前言

原本想在 Blogger 弄個像 TOC（Table of Contents）全文列表的區域，可充當網站地圖的功能，當文章不多時一筆筆 key in 還能忍受，但時間久了由於惰性的緣故，便會希望這個動作能夠自動執行。

等到有了全文列表，又想到如果列表的文章能夠順便顯示「讚」的統計數量，讀者將可輕易篩選人氣較高的文章，這就成了簡易的文章導覽功能，而非僅僅網站地圖的功用。


二、資源搜尋

預想的文章導覽功能需按「樹狀標籤」的格式，列出文章及該文章的讀者反應、「讚」按鈕功能。在網路上 google 到的 TOC 方法不少，但找不著全文列表同時還能顯示「讚」，所以「讚」的功能得自己搞定。

而完成 TOC 功能需到 Blogger 後台撈資料，這部分得利用到 Json。在沒有基礎之下要搞懂複雜的 Json 是一回事，等搞清楚之後卻又發現利用 Json 撈的資料會按照 Blogger 文章發表時間排序，這麼一來想要將資料依照樹狀標籤來分類又得自己搞定。

因此以下兩篇文章是自己土法煉鋼，解決所有遇上難題的筆記，對程式碼不太瞭解想直接套用可跳到「下一篇」，不過要注意這個全文列表系統是建立在樹狀標籤之上，無論如何得先參考「樹狀標籤」一文。


三、使用 Json 處理資料

如果對 Json 不瞭解，想先有個基本概念，可參考以下網頁：「Json 參數、範例」、「應用 JSON 實現最新文章、最新回應和Blog聯播」。

要利用 Json 從後台抓資料，對於文章導覽系統而言，最重要的是「文章標籤」、「文章標題」、「文章網址」這三組資料，能找到正確的資料就能組合出此系統所有的需求。


收集原始資料：

C：呼叫 Json 的收集資料函數

E：設定 "TotalPosts" 變數存取總文章篇數；設定三個陣列準備存放原始「文章標籤、標題、網址」資料。

G～M：這一段包含了如何找到「文章網址」的程式碼，主要是參考「Beautiful Beta：JSON Feeds」的方法，真要解釋起來都可寫成一篇文章了，還好 Abin大 在「Bug Fixed! 文章和回應連結錯亂的問題」這篇文章提到了如何尋找的經過，有興趣可以參考一下。

G：以總文章篇數的數目進行迴圈來收集資料。

I："entry" 用來存取文章篇數索引，Blogger 以最新發表文章的順序做為索引；"title" 用來存取文章標題。

K～M：由於 Json 在一篇文章存放多種不同性質的網址，用這個方法才能找到「文章網址」的正確位置。

P："entry.category" 存放文章的標籤；由於本系統不列出無標籤的文章，因此利用此判斷式過濾掉沒有標籤的文章。

R：因為 Blogger 允許一篇文章設定多個標籤，所以此行需設一個迴圈，來讀出所有的標籤。

T："label" 用來存取單一文章的所有標籤。

U：到目前為止，需要的三項資料「文章標籤、標題、網址」都已經定位出來。然而；一篇文章只有一個標題、一個網址，卻可能有多個標籤，假設一篇文章有三個標籤，WFU 無法將「標題 x 1」、「網址 x 1」、「標籤 x 3」這五筆資料打包成一組資料以利後續處理。窮圖之策，改成每讀到一筆「標籤」資料，同時儲存一次「標題」及「網址」，之後再來分離處理。

V：將 E 行的三組陣列利用 push 函數，每讀到一筆「標籤」資料便儲存一次這三種資料。而且也不用擔心資料順序有誤，因為 push 函數會依照順序儲存陣列中的每筆資料。

Y：至此，當文章總篇數的迴圈執行完畢後，便將原始的「文章標籤、標題、網址」資料收集完畢。


刪除重複字串：

Z：當迴圈來到最後一篇文章時，對收集完成的資料進行一些處理。

AA：由於一個標籤分類會有很多文章，例如「三國志11」這個標籤有三十篇文章，"Post_Label" 這個陣列就會存放三十個 "三國志11" 字串。但是在文章列表的畫面，每個標籤只需要在螢幕上顯示一次就好，那麼就得想辦法將陣列中重複的標籤字串刪除才行。可惜以 WFU 的功力，要寫出「刪除陣列中重複字串」這樣的程式一定是又臭又長。

BF～BS：還好找到「最簡單的方式找到重複的值在一個 javascript數組」這個網頁，使用這個 "del" 函數後就能達到目的，而且這個程式碼實在太精簡了！！（當然，完全看不懂...）

AB：呼叫 "del" 函數，將刪除重複字串後的標籤資料存放在 "Main_Label" 陣列。

AC：將 "Main_Label" 陣列用 "sort" 函數排序一下，將來大分類下的小分類標籤會依照升冪排序顯示；如果沒有這一行的話，Blogger 每新增一篇新的文章，都可能改變文章導覽系統下小分類的排序方式。

AE：將資料丟到另一個函數 "rating"，做進一步的加工處理。


分類原始資料：

AJ：收集來的原始資料雖然依照文章新舊的順序排列，但由於一篇文章可能穿插多個標籤，導致這些資料序列尚無法分類使用。而在文章導覽系統內，得把文章依照不同標籤排列才行，因此 "rating" 函數的第一個工作是分類這些資料。

AL～AP：設兩組新的陣列來收集新的「標題」、「網址」組合，且每組陣列的長度等於 "Main_Label" 的陣列長度。因 "Main_Label" 的陣列長度就是目前 Blogger 內的標籤數目，目的在於將原始資料依照標籤數目分類。假設 Blogger 目前設定的標籤有 "三個"，AL～AP 準備將收集到的原始資料分成 "三組" 存放，之後在全文列表的頁面將依照假設的三個標籤，分別顯示出三組文章序列。

AS～BB：設立巢狀迴圈，將原始資料全部依照 Blogger 的標籤數目，分配到兩組新的「文章標題」、「文章網誌」陣列（ "Title_Collect"、"Url_Collect" ），漫長的準備動作終於告一段落。


下一篇要將分類過後的資料，加上「讀者反應」、「讚」、「+1」按鈕組合在一起，完成文章導覽系統。

參考資料：
Beautiful Beta：JSON Feeds
Bug Fixed! 文章和回應連結錯亂的問題
最簡單的方式找到重複的值在一個 javascript數組