2012年5月1日 星期二

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

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

Wayne Fu 0 A+

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


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


一、差異性

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

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


二、5種排列方式

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

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 文章列表+快速顯示讚統計──簡易安裝」。
***************************
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP