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 網址，按儲存即完成。

1. <script style="text/javascript">
2.  
3. function Collect_Data(json) 
4. {
5.   var TotalPosts = json.feed.openSearch$totalResults.$t
6.   var Post_Label = new Array()
7.   var Post_Title = new Array()
8.   var Post_Url = new Array()
9.  
10.   for (var i = 0; i < TotalPosts; i++) 
11.   {
12.     var entry = json.feed.entry[i]
13.     var title = entry.title.$t
14.     var url
15.  
16.     for (var j = 0; j < entry.link.length; j++)
17.     {
18.       if (entry.link[j].rel == "alternate"){url = entry.link[j].href;break;}
19.     }
20.  
21.     if (entry.category!=null)
22.     {
23.       for (var k = 0; k < json.feed.entry[i].category.length; k++)
24.       { 
25.       var label = entry.category[k].term
26.       
27.       Post_Label.push(label)
28.       Post_Title.push(title)
29.       Post_Url.push(url)
30.       }
31.     }
32.  
33.     if (i==TotalPosts-1)
34.     { 
35.       var Main_Label=del(Post_Label)
36.       Main_Label.sort()
37.  
38.       rating(Main_Label, Post_Label, Post_Title, Post_Url)
39.     }
40.   }
41. }
42.  
43. function rating(Main_Label, Post_Label, Post_Title, Post_Url)
44. {
45.   var Title_Collect = new Array()
46.   var Url_Collect = new Array()
47.  
48.   for(z=0;z<Main_Label.length;z++)
49.   {
50.     Title_Collect[z] = new Array()
51.     Url_Collect[z] = new Array()
52.   } 
53.  
54.   for(var i=0; i<Post_Label.length; i++) 
55.   {
56.     for(var j=0; j<Main_Label.length;j++)
57.     {
58.       if(Post_Label[i]==Main_Label[j])
59.       {
60.         Title_Collect[j].push(Post_Title[i]) 
61.         Url_Collect[j].push(Post_Url[i]) 
62.       }
63.     }
64.   }
65.   for(a=0;a<Category_Name.length;a++)
66.   {
67.     document.write("<br/><br/><div align=\"center\" style=\"background-color: #cfe2f3; font-family: 標楷體; font-size: 20pt; font-weight: 700;\">【 "+Category_Name[a]+" 】</div><hr color=\"#37341E\" size=\"3\" />")
68.  
69.     for(b=0;b<Main_Label.length;b++)
70.     {
71.       var position = Main_Label[b].search("-")
72.       var category = Main_Label[b].substr(0,position)
73.       var label = Main_Label[b].substring(position+1)
74.        
75.       if(category==Category_Name[a])
76.       {
77.         document.write("<div style=\"color: #000060; font-family: 標楷體; font-size: 18pt; font-weight: 700;\"><span onclick=\'hide(\""+Main_Label[b]+"\");swap(this,\"➥\",\"➷\")\' style=\'cursor: pointer; color: #3778cd;\'>➷</span> "+label+"</div>")
78.  
79. document.write("<div id=\""+Main_Label[b]+"\" style=\"display: block\">")
80. document.write("<hr color=\"#f3f3f3\" size=\"2\" />")
81.  
82.         for(c=0;c<Title_Collect[b].length;c++)
83.         {
84.           Title_Collect[b][c]=Title_Collect[b][c].replace("三國志11 __ ","")
85.           Title_Collect[b][c]=Title_Collect[b][c].replace("三國志11","")
86.           Title_Collect[b][c]=Title_Collect[b][c].replace("有錢人想的和你不一樣 __ ","")
87.  
88. document.write("<table><tr><td width=\"550\" style=\"font-family: 新細明體; font-size: 14pt; font-weight: 400;\">　➨ <a target=_blank href=\""+Url_Collect[b][c]+"\">"+Title_Collect[b][c]+"</a></td></tr></table>")
89.  
90. document.write("<table><tr style=\"vertical-align:middle;\"><td width=\"350\" ><iframe allowtransparency=\"true\" class=\"reactions-iframe\" frameborder=\"0\" name=\"reactions\" scrolling=\"no\" src=\"http://www.blogger.com/blog-post-reactions.g?options=%5B%EF%BC%95%E9%A1%86%E6%98%9F%2C+%EF%BC%94%E9%A1%86%E6%98%9F%2C+%EF%BC%93%E9%A1%86%E6%98%9F%2C\&textColor=%23444444#"+Url_Collect[b][c]+"\"></iframe></td>")
91.  
92. document.write("<td width=\"80\"><iframe allowtransparency=\"true\" frameborder=\"0\" scrolling=\"no\" src=\"http://www.facebook.com/plugins/like.php?locale=zh_TW\&href="+Url_Collect[b][c]+"\&layout=button_count\&colorscheme=light\&action=like\" style=\"height: 22px; overflow: hidden; width: 75px; \" ></iframe></td>")
93.  
94. document.write("<td width=\"80\"><g:plusone size=\"medium\" href=\""+Url_Collect[b][c]+"\"></g:plusone></td></tr></table>")
95.  
96. document.write("<hr color=\"#f3f3f3\" size=\"2\" />")
97.           if(c==Title_Collect[b].length-1)document.write("</div><hr color=\"#37341E\" size=\"3\" />")
98.  
99.         }
100.       }
101.     }
102.   }
103. }
104.  
105.  
106. function del(arr) 
107. { 
108.   var i, 
109.       len=arr.length, 
110.       out=[], 
111.       obj={}; 
112.   for (i=0;i<len;i++) { 
113.     obj[arr[i]]=0; 
114.   } 
115.   for (i in obj) { 
116.     out.push(i); 
117.   } 
118.   return out; 
119. } 
120.  
121. function hide(sec)
122. {
123.        var e = document.getElementById(sec);
124.        if(e.style.display == "block")
125.           e.style.display = "none";
126.        else
127.           e.style.display = "block";
128. }
129.  
130. function swap(me,main,alt) 
131. {
132. me.innerHTML = (me.innerHTML == main) ? alt : main;
133. }
134.  
135. </script>
136. <script src="http://wayne-fu.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=Collect_Data"></script>

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」按鈕（一）」