2012年5月1日 星期二

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

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

Wayne Fu 0 A+

(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. 組合安裝」來修改即可。
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP