文章列表+「讚、推文」統計(依樹狀標籤排列)

(Pic from: iconfinder.com, iconarchive.com)2016.4.8 公告：因 Google Drive 外連失效，請勿使用本篇的程式碼，請改用新版「Blogger 文章列表極速版﹍(1) 依日期排列」

自訂安裝篇

如果不需要自訂版面配置，那麼只需要依「簡易安裝」來安裝程式碼即可；而本篇則是列出可以修改版面配置的程式碼位置。

在「簡易安裝」的第一個 js 檔，作用為收集所有要印出的資料，第二個 js 檔則蒐集推文數目，第三個 js 檔印出文章列表的表格，因此自訂安裝主要是改第三個 js 檔的內容。以下的內容可複製到文書處理軟體，將欲自訂的部分修改完後，依照同樣的步驟：新開一篇文章 → 複製修改後的程式碼貼上 → 存檔即完成。

1. <script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_TreeLabel_FB_Push_main.js' type='text/javascript'></script>
2. <script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_push_count.js' type='text/javascript'></script>
3. <script style="text/javascript">
4. function displayToc(){
5.   var Title_Collect = new Array()
6.   var Url_Collect = new Array()
7.  
8.   for(z=0;z<Main_Label.length;z++){
9.     Title_Collect[z] = new Array()
10.     Url_Collect[z] = new Array()
11.   } 
12.  
13.   for(var i=0; i<postLabel.length; i++){
14.     for(var j=0; j<Main_Label.length;j++){
15.       if(postLabel[i]==Main_Label[j]){
16.         Title_Collect[j].push(postTitle[i]) 
17.         Url_Collect[j].push(postUrl[i]) 
18.       }
19.     }
20.   }
21.     
22.   for(a=0;a<Category_Name.length;a++){
23.     document.write("<div align='center' style='color:#45818e;  font-family: 標楷體; font-size: 18pt; font-weight: 700;'>【 "+Category_Name[a]+" 】</div><hr color='#37341E'; size='3' />")
24.  
25.     for(b=0;b<Main_Label.length;b++){
26.       var position = Main_Label[b].search("-")
27.       var category = Main_Label[b].substr(0,position)
28.       var label = Main_Label[b].substring(position+1)
29.        
30.       if(category==Category_Name[a]){
31.         document.write("<div style='color: #000060; font-weight: 700;'><span onclick='hide(\""+Main_Label[b]+"\");swap(this,\"➥\",\"➷\")' style='cursor: pointer; color: #3778cd;'>➷</span> "+label+"</div><p/>")
32.  
33.         document.write("<div id='"+Main_Label[b]+"' style='display: block'>")
34. document.write("<table>")
35.  
36.         for(c=0;c<Title_Collect[b].length;c++){
37.   document.write("<tr valign='top'>")
38.  
39.   document.write("<td width='30px'><span style='float:right;'>"+(c+1)+".</span></td><td><a href='" + Url_Collect[b][c] + "' target='_blank'>" + Title_Collect[b][c] + "</a></td>")
40.   
41.   for (var i=0;i<Collect_FBurl.length;i++){
42.         if(Url_Collect[b][c]==Collect_FBurl[i]){
43.   if(Collect_FBlike[i]>99){Collect_FBlike[i]="<span style='color:#3d85c6;'>爆</span>"}
44.       document.write("<td width='90px'> <img src='https://lh6.googleusercontent.com/-Ofxn3Sj1alw/T3Uln9JxIqI/AAAAAAAACes/K3d-PfYQzsE/s51/fb_like_share.png' style='padding:0px; vertical-align:middle'/>："+Collect_FBlike[i]+"</td>")
45.       break
46.     }
47.           }
48.   
49.   for (var i=0;i<Collect_PUSHurl.length;i++){
50.         if(Url_Collect[b][c]==Collect_PUSHurl[i]){
51.   if(Collect_PUSHcount[i]>10){Collect_PUSHcount[i]="<span style='color:#cc0000;'>爆</span>"}
52.       document.write("<td width='55px'> <span style='color:#e69138; border:#e69138 1px solid;'>推</span>："+Collect_PUSHcount[i]+"</td>")
53.       break
54.     }
55.           }
56.   
57.           document.write("</tr>")
58.           if(c==Title_Collect[b].length-1)document.write("</table><br/><br/></div>")
59.         }
60.       }
61.     }
62.   }
63. }
64. displayToc()
65. </script>

W：印出大分類。

AE：印出開合圖案。

AG：印出真正標籤。

AM：印出文章標題。

AQ：預設超過 99 個讚顯示藍爆，以免出現三位數影響版面美觀。

AR：印出預設「讚＋分享按鈕」圖案、"讚"的數目。

AY：預設超過 10 個推文顯示紅爆，純粹為了顯示爆的效果。

AZ：印出推文數目。

以上大略簡單提一下，修改那個部分有問題請再留言。


注意事項：
  A. 貼上程式碼前，注意是否為「HTML」的編輯模式(而非 "撰寫" 的編輯模式)。
  B. 文章設定 → 「選項」 → 「撰寫模式」，注意是否為「解釋輸入的HTML」。

一點小提醒：

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