2012年5月10日

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

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 文章列表+快速顯示讚統計──簡易安裝」。
***************************

10 則留言:

  1. 我的文章列表沒有顯示可以幫我看一下嗎?
    http://gem3.blogspot.tw

    回覆刪除
  2. <1509163726548703941>(以上內容請勿刪除,從括號之後開始留言)
    我發現你的文章沒有日期,而程式是依據一般正常的格式寫的,如果抓不到日期就會當掉,因此請讓日期出現。

    如果不喜歡日期出現的版面,那麼請用「文章列表+快速顯示讚統計__簡易安裝」這一篇的方式,開一篇新文章、貼入程式碼,再把這篇文章的連結放到導覽列即可,只是這個方式就沒有動態效果了。

    回覆刪除
  3. 請問,我想要特定幾篇網誌在動態檢視上面,要怎麼用?

    回覆刪除
  4. <1141832670211883423>(以上內容請勿刪除,從括號之後開始留言)沒有這樣的功能

    回覆刪除
  5. 看來是太匆忙了~

    由於近日存放在 Google Code 的 js 檔全部被刪除了,本文的外連 js 檔已改放到 「Google Code」 空間。曾安裝過以下兩個文章列表的讀者,請修改程式碼中 的 js 檔連結。

    回覆刪除
  6. <5568071760129730603>(以上內容請勿刪除,從括號之後開始留言)動作真快,馬上就看到了 XD

    回覆刪除
  7. 請問:

    執行:網頁1 →聯結→ 網頁2

    當開啟網頁2時,馬上顯示"最新(文章)"排列

    但我想讓遊客一開啟網頁就顯示"標籤(文章)"排列,讓他們不用自己去調就能舒服整齊看文

    要怎麼設定?

    (註:網頁2 是動態展示的Flipcard)

    回覆刪除
  8. <6074256968151977734>(以上內容請勿刪除,從括號之後開始留言)不好意思沒有很明瞭你的敘述,不過本文應該不能用在動態檢視的範本(也就是你說的flipcard).

    你如果安裝本站的工具而出問題的時候,可以附上網址,描述一下狀況,我再看看是什麼情形。

    回覆刪除
  9. 你好,打擾了。

    請問「2. 依標籤排列(無"讚"統計)」的「TOC_label_inPost.js」如何能夠顯示超過500篇文章嗎?
    因我的Blog有超過1000篇文章,但只能顯示最新的500篇。

    http://1z2x1z.blogspot.com/p/blog-page_23.html

    先謝謝。

    回覆刪除
  10. <5130890759831999399>(以上內容請勿刪除,從括號之後開始留言)你好,這篇是很久以前的版本了,請直接安裝新版:http://www.wfublog.com/2014/03/blogger-toc-label-sonic.html

    回覆刪除

張貼留言注意事項:

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