動態檢視 Blogger 文章列表__簡易安裝

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


「動態檢視」代表在同樣的頁面（不重新整理頁面）下顯示動態的效果，比起整理頁面需要重新讀取一次全部的資料，動態檢視的執行不但流暢、又節省時間。「Blogger 文章列表＋快速顯示"讚"統計」是將文章列表安裝在功能選單上的網頁，執行時當然必須重新整理頁面；本篇的內容為將文章列表使用「動態檢視」，讓執行效能再升級，而且動態檢視使用的 javascript 都是執行時才載入，並非使用預先載入的方式，完全不佔用系統資源。


一、差異性

「原本的安裝方式」與本篇動態檢視安裝方式的差異性在於，使用網頁方式安裝時，日後要修改程式碼比較簡單，直接修改網頁的內容即可；而動態檢視使用外連的 js 檔，日後修改的動作比較多一些，除了改程式碼外，還必須重新上傳 js 檔、更動 js 檔連結等。

所以選擇哪種方式見仁見智，不過全文列表通常一開始弄好樣式後，以後應該是不會再改。如果以日後節省下來的網頁執行時間衡量，動態檢視的安裝方式算是遠勝網頁安裝方式。


二、５種排列方式

除了「之前」使用的三種效果，因為動態檢視能夠在同個頁面顯示多種效果，所以本篇增加兩個原始的排列方式。以下先個別說明五種文章列表的安裝方式：

1. 依日期排列

按照「密技！在 Blogger 水平功能選單（Menu Bar）使用語法產生動態效果」的方法，借用該篇的圖片來說明安裝方法：

首先確定已經安裝了「網頁」小工具，一般而言應該都會有。必須進入新範本的後台畫面，使用「網頁」這項功能，如下圖：



必須選擇「網址」（不要選「空白網頁」）



在上圖的第一行輸入框(標題列)，輸入以下程式碼：

<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_date-install.js' type='text/javascript'></script><b onclick='Call_TOCdate();'>文章列表─依日期</b>
紅字部分是出現在選單上的字樣，可自行更改；接著上圖第二行(網址列)原本應該輸入超連結網址的地方(網址列)，只要輸入 "#" 即可，這代表超連結停留在目前頁面。如此一來，在頁面不動的情況下，第一行輸入的 javascript 就會被執行。全部輸入完後按下「儲存」。




由於我們的內容並非正規輸入，所以會出現以上的提醒框，按確定即可。




回到首頁便可看到選單上多了一個「文章列表─依日期」選項，按下後就可來感受一下動態檢視的效果。



2. 依標籤排列

有了以上範例後，接下來的例子請依樣畫葫蘆即可，文章列表「依標籤排列」的格式，要在選單標題列輸入的程式碼為以下：

<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_label-install.js' type='text/javascript'></script><b onclick='Call_TOClabel();'>文章列表─依標籤</b>
以上紅字可自行更改，其餘步驟及注意事項同前例。


3. "讚"統計──依日期排列

<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_date_FB-install.js' type='text/javascript'></script><b onclick='Call_TOCdateFB();'>文章列表(讚統計)─依日期</b>
以上紅字可自行更改，其餘步驟及注意事項同前例。


4. "讚"統計──依標籤排列

<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_label_FB-install.js' type='text/javascript'></script><b onclick='Call_TOClabelFB();'>文章列表(讚統計)─依標籤</b>
以上紅字可自行更改，其餘步驟及注意事項同前例。


5. "讚"、"推文"統計──依樹狀標籤排列

如果部落格有安裝「樹狀標籤」，也就是標籤為 "AAA-BBB" 形式的話，那麼可以使用這個版本的文章列表：

<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_TreeLabel_FB_Push-install.js' type='text/javascript'></script><b onclick='Call_TOCtree();'>文章列表(讚統計)─依樹狀標籤</b>
以上紅字可自行更改，其餘步驟及注意事項同前例。


三、綜合顯示、自訂安裝

以上的安裝可顯示單一的文章列表排列方式，想要先試試效果可按上方選單的「文章列表─動態檢視」。不過上方選單的文章列表，還有多重選項可選，想要顯示多種的排列效果，需要另外寫一個連結以上五個 js 檔的前導程式，相關內容及安裝方法請見下一篇「動態檢視 Blogger 文章列表__組合安裝及自訂安裝」；而這五種文章列表的排列方式，如果想要自訂版面、配置、顏色等等，在下一篇一併說明。

另外，在功能選單上安裝文章列表的按鈕，如果遇上任何問題，請參考「密技！在 Blogger 水平功能選單（Menu Bar）使用語法產生動態效果」來解決。


******** 2012.7.30 增補********
四、個別安裝

如果文章列表不想安裝在水平功能選單，只需要個別安裝在一篇文章，需要時再叫出文章來看的話，以上的五種文章列表也可個別安裝在單篇文章，請按以下方式安裝：

1. 依日期排列(無"讚"統計)：

新開一篇文章 → 複製以下程式碼貼上 → 存檔即完成

<div id="TOC_date_inPost"></div>
<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_date_inPost.js' type='text/javascript'></script>
欲先看效果請點此展示頁面：「文章列表__依日期排列───展示頁面」


2. 依標籤排列(無"讚"統計)：

新開一篇文章 → 複製以下程式碼貼上 → 存檔即完成

<div id="TOC_label_inPost"></div>
<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_label_inPost.js' type='text/javascript'></script>
欲先看效果請點此展示頁面：「文章列表__依標籤排列───展示頁面」


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


目前先整理以上兩種排列方式，其他三種排列方式若要安裝到單篇文章，請參考：「Blogger 文章列表＋快速顯示讚統計──簡易安裝」。
***************************