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

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

一、準備動作

由於此系統架構在樹狀標籤之下，如果不需要樹狀標籤，可參考這篇文章「在Blogger上顯示文章列表及各個文章的facebook讚(like)數統計」，K大 的這個版本版面滿整齊漂亮的，適合文章按日期排列的方式；如果想用本文版本安裝樹狀標籤的話，可參考「讓Blogger的標籤能樹狀分類（一）、（二）」，並請先執行以下動作：

1. 先將 Blogger 所有的標籤改為 "AAA-BBB" 的格式，AAA 代表大分類，BBB 代表真正的標籤名稱。

2. 到 Blogger 後台 → 範本 → 編輯 HTML

3. 接著把下面的 Javascript 插入 </head> 的前面：

<script type='text/javascript'>
var Category_Name=new Array("休閒","理財","電腦")
</script>

(1) 以上紅色的字串請改為想要的大分類名稱（就是標籤格式 "AAA-BBB" 中的 AAA）。

(2) 要填入幾個大分類都可以，填入的順序就是在全文列表由上到下顯示出來的順序。

(3) 字串必須放在雙引號內，每個字串用逗號隔開。

如果不需要使用樹狀標籤的話，可不必執行以上動作，但須要修改部分程式碼。這部分就得參考「第一篇」的內容自行研究了。


二、主程式碼

以下程式碼請直接複製到一篇新的文章或網頁，貼上時請注意是在「修改 HTML」的欄位狀態（不是在「撰寫」狀態），張貼選項請選「按下 Enter 鍵以建立換行符號」、「解譯輸入的 HTML」，將最後一行 DR 的紅色部分改為自己 Blog 網址，按儲存即完成。


C～AE：收集原始資料

AG～AM：刪除重複字串

AQ～BL：分類原始資料

以上三段內容請參考「第一篇」的詳述，接下來要印出分類後的資料。


大分類標題：

BM："Category_Name" 為自訂的大分類陣列，以此為第一層迴圈處理資料。

BO：印出大分類標題，此行的顏色、字體、分隔線等細項都可自行調整。


真正標籤標題：

BQ："Main_Label" 陣列儲存了文章的 "AAA-BBB" 格式的標籤，之後把 "BBB" 字串抽出來，這是實際的標籤，以此為第二層迴圈處理資料。

BS～BU：將 "Main_Label" 拆解成大分類 "AAA" 存放在 "category" 變數；拆解成真正標籤 "BBB" 存放在 "label" 變數。

BW：當拆解後的大分類字串符合 "Category_Name" 時，這個 "Main_Label[b]" 才是需要的陣列，之後將這個陣列的所有資料全部印出。

BY：印出真正標籤當小標題，同樣，此行的顏色、字體等細項都可自行調整。

同時，此行讓小標題的所有文章有收合的功能，運用到 "hide" 以及 "swap" 函數。這兩個函數在「樹狀標籤（一）、（二）」有介紹，可參考相關說明。

CA：設定收合功能時需要設定收合區域的起點，此行即是 <div> 區域的起點，且需要使用獨一無二的 id，剛好使用完整標籤名稱 "Main_Label[b]" 可為絕不重複的 id。


文章綜覽：

CD：設立第三層迴圈，準備將該標籤(小標題)之下的文章資料全部印出。

CF～CH：這幾行算是個人需求，將所有文章標題作處理，刪除不必要的字串避免標題過長。如果有需要刪除字串請自行置換字串內容，如果不需要刪除字串，請刪除這幾行。

CJ：印出處理後的標題，當然文字、顏色、美化的符號等等可以自行調整。另外為了格式整齊加上 table 標籤，這標籤不一定要有。


讀者反應、「讚」、「+1」按鈕：

這三項工具能夠在單一網頁顯示不同文章的統計數據，最重要的關鍵是原始碼中必須有「單一文章網址」這個參數。因此，如果有其他的工具也想在全文列表系統中顯示，只要能找出原始碼是否有「文章網址」即可成功。

CL：印出「讀者反應」功能，"Url_Collect[b][c]" 取代了原本程式碼的文章網址。如不需要顯示此功能可刪除本行；如想顯示此功能，由於 "blog-post-reactions.g?options=" 後面跟著的一串亂碼，代表 WFU BLOG 「讀者反應」功能自訂的字串，這些字串得改成讀者自己 Blog 網頁「讀者反應」功能的字串才行。而這些亂碼如何更改，請參考「Blogger自訂讀者反應、「讚」、「+1」按鈕（一）」。

CN：印出「讚」按鈕，"Url_Collect[b][c]" 取代了原本程式碼的文章網址。

CP：印出「+1」按鈕，"Url_Collect[b][c]" 取代了原本程式碼的文章網址。

以上幾行為了版面整齊，加入 table 標籤控制位置，如有想要針對細項做修改，請參考「Blogger自訂讀者反應、「讚」、「+1」按鈕（一）、（二）」。

CS：真正標籤(小標題)的文章全部跑完之後，設定 </div> 區域終點。


其他工具：

DB～DO：刪除陣列中重複資料的函數。

DQ～DX：隱藏某區塊的函數。

DZ～EC：切換顯示字元的函數。

EF：將 Blogger 的後台資料轉為 Json 格式，紅色部分請改為自己的 Blogger 網址。這一行的參數可以做很多的應用，有興趣請參考 Abin大 的「Blogger 資料來源用法與整理」。


後記：

若 Blog 裡的文章多的不像話，導致全文列表太長，或許有人會考慮讓文章列表預設不要展開，那麼就得將 CA 行的 "display: block" 改成 "display: none"，並將 BY 行的兩種圖案 "➥","➷" 全部對調。而如果只想把特定的小分類預設不要展開，那就比較麻煩一點，得多加一些判斷句，這部分就請自行研究了。

最後特別需要注意的一點，新開一篇文章插入大量的 javascript 後，以後若是編輯文章時，一些程式碼會亂掉，因此此類文章最好儲存後不要使用編輯功能，比較好的方法是原程式碼備份，直接在原程式碼編輯，編輯完再貼到文章裡，否則 javascript 的效果通常會失敗的！！


參考資料：
Blogger 資料來源用法與整理
同「讓Blogger的標籤能樹狀分類(一)」
同「Blogger自訂讀者反應、「讚」、「+1」按鈕（一）」