2011年8月29日

Blogger「全文列表+讀者反應」(一)

A+
**** 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數組

沒有留言:

↑TOP

張貼留言注意事項:

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