(Pic from: designdownloader.com)2016.4.9 公告：因 Google Drive 外連失效，請勿使用本篇的程式碼，請改用新版「Blogger 文章列表極速版﹍(1) 依日期排列」
一、綜合安裝
由於近日存放在 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. 組合安裝」來修改即可。
請問，我按照上面的步驟，但是目前卻碰到了問題：
回覆刪除在首頁時按下列表會有動作，但是一旦按下其他水平列到了其他頁面時，列表就失去功能了。請問，這會是甚麼問題呢?麻煩你喔。
<1255801066426809350>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除算了一下，我寫的 hack、工具，你的格應該是我目前看到採用最多的一個，感謝支持啊 ^^
回歸正題，試了一下你的網頁，發現出問題的是 "風險宣告"、"重要連結" 這兩個網頁，剛好這兩個都是用「網頁」模式寫的(網址會有/p/).
由於我的動態文章列表是針對「文章」的環境寫的，當初沒考慮到「網頁」的模式，不過解決方式也很簡單，請你開兩篇新的文章，然後把 "風險宣告"、"重要連結" 的內容複製到這兩篇新的文章(從HTML模式的內容複製)，再把新文章的連結放到水平導覽列即可。
刪除舊的網頁及新增文章連結，有狀況時請參考「密技！在 Blogger 水平功能選單（Menu Bar）使用語法產生動態效果」這篇文章.
哈哈哈!!因為你的格實在是太漂亮了！所以我全都採用啊。
回覆刪除剛剛更改了，果然OK。雖然我還想不懂其中的邏輯，不過真的可行ㄟ^^，感謝！
回覆刪除<4822025852206469694>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除哈哈～really? 真是開心～
<3229584916791944154>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除原理啊～簡單說就是文章跟網頁的 html 標籤不同, 文章列表的 js 在網頁模式下去抓某個標籤抓不到, 程式當掉所以就沒反應了...
你好，謝謝你的文章！安裝後有兩個問題想問：
回覆刪除1. 使用TOC_Choice(2,1)，預設格式為依標籤沒錯，但上方按鈕的排列還是將"依日期"排在前面，這是沒辨法改的嗎？
2. 可以選擇只顯示某些標籤的文章，而不顯示全部嗎？謝謝~ :)
<5359639232699746105>(以上內容請勿刪除，以下引言請自行刪減) [quote]使用TOC_Choice(2,1)，預設格式為依標籤沒錯，但上方按鈕的排列還是將"依日期"排在前面，這是沒辨法改的嗎？[/quote]沒錯，這是正常的，只會依照預設順序排列。
回覆刪除[quote]可以選擇只顯示某些標籤的文章，而不顯示全部嗎？[/quote]這是第二次看到這樣的需求，是因為其他部落格平台提供這樣的功能嗎？如果這樣的需求多的話，也許將來有更新版的話，再提供這樣的功能吧。
<6713762391403365996>(以上內容請勿刪除,從括號之後開始留言)其他部落格平台並不熟，是因為同一篇文章可能有兩個以上的標籤，但文章不想在列表上重覆出現在太次。或想把不同類型的標籤文章分隔顯示，像「博物館、城堡」和「奧地利、瑞士」，不想把這兩類混在一起顯示。
回覆刪除非常謝謝你提供的文章列表工具，很實用也很漂亮！:D
<2295077224036375948>(以上內容請勿刪除,從括號之後開始留言)瞭解了，謝謝提供意見！
回覆刪除多謝你的 "動態文章列表" 功能介紹.
回覆刪除我已經加到 blogspot 當中. 謝謝
<1928055721554356260>(以上內容請勿刪除,從括號之後開始留言)不客氣 ^^
回覆刪除