2012年5月10日

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

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. 組合安裝」來修改即可。

12 則留言:

  1. 請問,我按照上面的步驟,但是目前卻碰到了問題:
    在首頁時按下列表會有動作,但是一旦按下其他水平列到了其他頁面時,列表就失去功能了。請問,這會是甚麼問題呢?麻煩你喔。

    回覆刪除
  2. <1255801066426809350>(以上內容請勿刪除,從括號之後開始留言)
    算了一下,我寫的 hack、工具,你的格應該是我目前看到採用最多的一個,感謝支持啊 ^^

    回歸正題,試了一下你的網頁,發現出問題的是 "風險宣告"、"重要連結" 這兩個網頁,剛好這兩個都是用「網頁」模式寫的(網址會有/p/).

    由於我的動態文章列表是針對「文章」的環境寫的,當初沒考慮到「網頁」的模式,不過解決方式也很簡單,請你開兩篇新的文章,然後把 "風險宣告"、"重要連結" 的內容複製到這兩篇新的文章(從HTML模式的內容複製),再把新文章的連結放到水平導覽列即可。

    刪除舊的網頁及新增文章連結,有狀況時請參考「密技!在 Blogger 水平功能選單(Menu Bar)使用語法產生動態效果」這篇文章.

    回覆刪除
  3. 哈哈哈!!因為你的格實在是太漂亮了!所以我全都採用啊。

    回覆刪除
  4. 剛剛更改了,果然OK。雖然我還想不懂其中的邏輯,不過真的可行ㄟ^^,感謝!

    回覆刪除
  5. <4822025852206469694>(以上內容請勿刪除,從括號之後開始留言)
    哈哈~really? 真是開心~

    回覆刪除
  6. <3229584916791944154>(以上內容請勿刪除,從括號之後開始留言)
    原理啊~簡單說就是文章跟網頁的 html 標籤不同, 文章列表的 js 在網頁模式下去抓某個標籤抓不到, 程式當掉所以就沒反應了...

    回覆刪除
  7. 你好,謝謝你的文章!安裝後有兩個問題想問:

    1. 使用TOC_Choice(2,1),預設格式為依標籤沒錯,但上方按鈕的排列還是將"依日期"排在前面,這是沒辨法改的嗎?

    2. 可以選擇只顯示某些標籤的文章,而不顯示全部嗎?謝謝~ :)

    回覆刪除
  8. <5359639232699746105>(以上內容請勿刪除,以下引言請自行刪減) [quote]使用TOC_Choice(2,1),預設格式為依標籤沒錯,但上方按鈕的排列還是將"依日期"排在前面,這是沒辨法改的嗎?[/quote]沒錯,這是正常的,只會依照預設順序排列。

    [quote]可以選擇只顯示某些標籤的文章,而不顯示全部嗎?[/quote]這是第二次看到這樣的需求,是因為其他部落格平台提供這樣的功能嗎?如果這樣的需求多的話,也許將來有更新版的話,再提供這樣的功能吧。

    回覆刪除
  9. <6713762391403365996>(以上內容請勿刪除,從括號之後開始留言)其他部落格平台並不熟,是因為同一篇文章可能有兩個以上的標籤,但文章不想在列表上重覆出現在太次。或想把不同類型的標籤文章分隔顯示,像「博物館、城堡」和「奧地利、瑞士」,不想把這兩類混在一起顯示。

    非常謝謝你提供的文章列表工具,很實用也很漂亮!:D

    回覆刪除
  10. <2295077224036375948>(以上內容請勿刪除,從括號之後開始留言)瞭解了,謝謝提供意見!

    回覆刪除
  11. 多謝你的 "動態文章列表" 功能介紹.
    我已經加到 blogspot 當中. 謝謝

    回覆刪除
  12. <1928055721554356260>(以上內容請勿刪除,從括號之後開始留言)不客氣 ^^

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。