動態檢視 Blogger 文章列表__綜合安裝

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

一、綜合安裝

2013.8.10 公告

由於近日存放在 Google Code 的 js 檔全部被刪除了，本文的外連 js 檔已改放到 Google Drive 空間。曾安裝過本文程式碼的讀者，請修改程式碼中的 js 檔連結。為了避免日後有其他意外，也建議讀者參考「取代 Google Code 外連 js 檔的選擇__Google Drive」，自行備份 js 檔並上傳到自己的 Google Drive 空間。


1. 安裝：

接續「上一篇」的五種文章列表排列方式，本篇要將全部的排列方式打包在一起，達到動態檢視的效果。請依照上一篇的安裝方式及注意事項，在選單標題列輸入的程式碼為以下：

<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC-install.js' type='text/javascript'></script><b onclick='TOC_Choice(1,2,3,4,5);'>文章列表─動態檢視</b>
以上紅字部分可改為自訂文字；而藍、綠數字部分請參照以下定義：

1：依日期排列
2：依標籤排列
3："讚"統計──依日期排列
4："讚"統計──依標籤排列
5："讚"、"推文"統計──依樹狀標籤排列

所填入的第一個數字代表預設的排列方式，為必填的數字；第二～第五個數字代表其他還想出現的排列方式選項，填不填都可以，所以 'TOC_Choice()' 括弧裡面最少要出現一個數字，最多可出現五個數字，舉例如下：

TOC_Choice(4,1,3)：代表按下文章列表的按鈕後，預設顯示「"讚"統計──依標籤排列」的方式，同時有「依日期排列」、「"讚"統計──依日期排列」的選項。

需要注意的是，如果沒有安裝過「樹狀標籤」請不要填 "5"，因為系統讀不到樹狀標籤，不會有任何效果。

另外，在功能選單上安裝文章列表的按鈕，如果遇上任何問題，請參考「密技！在 Blogger 水平功能選單（Menu Bar）使用語法產生動態效果」來解決。想要先試試效果可按上方選單的「文章列表─動態檢視」即可，本 Blog 使用的參數為 TOC_Choice(1,2,4,5)。



2. 應用：

會特別製作這個工具的主要原因倒不是為了花俏，好像弄出許多選項讓版面很炫，真正的原因還是為了增加執行效率。文章數不多的站長或許感覺不出來，但文章數超過五百、上千篇的站長，使用文章列表的功能時一定心有戚戚焉，怎麼讀取後台資料的時間要那麼久？真是等到花兒都謝了，因為 Blogger 的後台文章資料轉成 json 格式後，一些雜七雜八的東西包括文章內容都在其中，就算將參數從 default 改為 summary 也改善不了多少速度，更何況如果還要從 facebook 讀取 "讚"統計資料又得另外花上一些時間。

本篇的 js 為了改善以上的情形，將第一次讀取後台 json 的資料放入記憶體，其後若訪客點選了別的文章排列方式，就不必再重新讀取一次後台資料，可節省了文章列表功能中最主要的讀取時間。

所以，如果利用本篇的組合安裝，將 TOC_Choice() 的第一個參數設為 "1" 或 "2" (依日期排列或依標籤排列)當成預設顯示，不要設為有「"讚"統計」的選項，可用最快的速度先將文章資料讀出來，而訪客如果想看「"讚"統計」，當他們另外點擊有「"讚"統計」的文章列表，那麼有「"讚"統計」的文章列表因為後台資料已經讀取過，很快就能顯示出來，讓這個工具的功能發揮到最大效用。

好了，本篇的安裝方式很簡單，而如果還想要改變版面、配置的話，請繼續往下看。

二、自訂安裝

若是要自訂版面、配置、顏色等等的細項，要做的動作不少，請參考以下：

1. 組合安裝：需要改的檔案就是安裝程式碼中的「TOC-install.js」。一般來說並不需要動到這個檔案，但如果要修改五種文章列表的細項的話，就必須修改這個 js 檔了。當按下文章列表的按鈕時，會執行這個 js 檔內的五個文章列表的 js 檔：

依日期排列：「TOC_date-install.js」
依標籤排列：「TOC_label-install.js」
"讚"統計──依日期排列：「TOC_date_FB-install.js」
"讚"統計──依標籤排列：「TOC_label_FB-install.js」
"讚"、"推文"統計──依樹狀標籤排列：「TOC_TreeLabel_FB_Push-install.js」

以上五個 js 檔若有改過，請存到自己的網頁空間，接著 TOC-install.js 裡面相對應的 js 檔連結得改為自己的空間，然後TOC-install.js 另存到自己的網頁空間，最後「一、組合安裝」中的安裝程式碼請改為自己 TOC-install.js 的連結。


2. 個別安裝：

  A. 依日期排列：安裝的 js 檔為 https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_date-install.js，此檔內含兩個需要執行的 js 檔──

https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_date-1.js ── 不必更動
https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_date-2.js ── 可更改配置細項的檔，請參考「文章列表＋"讚"統計(依日期排列)──自訂安裝」來更改內容，改完後請存到自己網頁空間。

以上改完後請變更 TOC_date-install.js 裡面所有對應的 js 檔連結，將此檔存到自己的網頁空間。


  B. 依標籤排列：安裝的 js 檔為 https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_label-install.js，此檔內含兩個需要執行的 js 檔──

https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_label-1.js ── 不必更動
https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_label-2.js ── 可更改配置細項的檔，請參考「文章列表＋"讚"統計(依標籤排列)──自訂安裝」來更改內容，改完後請存到自己網頁空間。

以上改完後請變更 TOC_label-install.js 裡面所有對應的 js 檔連結，將此檔存到自己的網頁空間。


  C. "讚"統計──依日期排列：安裝的 js 檔為 https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_date_FB-install.js，此檔內含三個需要執行的 js 檔──

https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_date_FB-1.js ── 不必更動
https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_date_FB-2.js ── 如果更動 TOC_date_FB-3.js，那麼這個檔裡面 TOC_date_FB-3.js 的連結必須更改，改完後請存到自己網頁空間。
https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_date_FB-3.js ── 可更改配置細項的檔，請參考「文章列表＋"讚"統計(依日期排列)──自訂安裝」來更改內容，改完後請存到自己網頁空間。

以上改完後請變更 TOC_date_FB-install.js 裡面所有對應的 js 檔連結，將此檔存到自己的網頁空間。


  D. "讚"統計──依標籤排列：安裝的 js 檔為 https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_label_FB-install.js，此檔內含三個需要執行的 js 檔──

https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/ ── 不必更動
https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_label_FB-2.js ── 如果更動 TOC_label_FB-3.js，那麼這個檔裡面 TOC_date_FB-3.js 的連結必須更改，改完後請存到自己網頁空間。
https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_label_FB-3.js ── 可更改配置細項的檔，請參考「文章列表＋"讚"統計(依標籤排列)──自訂安裝」來更改內容，改完後請存到自己網頁空間。

以上改完後請變更 TOC_label_FB-install.js 裡面所有對應的 js 檔連結，將此檔存到自己的網頁空間。


  E. "讚"、"推文"統計──依樹狀標籤排列：安裝的 js 檔為 https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_TreeLabel_FB_Push-install.js，此檔內含四個需要執行的 js 檔──

https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_TreeLabel_FB_Push-1.js ── 不必更動
https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_TreeLabel_FB_Push-2.js ── 如果更動 TOC_TreeLabel_FB_Push-4.js，那麼這個檔裡面 TOC_TreeLabel_FB_Push-4.js 的連結必須更改，改完後請存到自己網頁空間。
https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_TreeLabel_FB_Push-3.js ── 不必更動
https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_TreeLabel_FB_Push-4.js ── 可更改配置細項的檔，請參考「文章列表＋"讚"、"推文"統計(依樹狀標籤排列)──自訂安裝」來更改內容，改完後請存到自己網頁空間。

以上改完後請變更 TOC_TreeLabel_FB_Push-install.js 裡面所有對應的 js 檔連結，將此檔存到自己的網頁空間。

以上五個都改完後，接著按照「二、自訂安裝」→「1. 組合安裝」來修改即可。