2014年3月2日

Blogger 文章列表極速版﹍(1) 依日期排列

A+

(Pic from: forums.realmacsoftware.com)
市面上所有的 Blogger 文章列表工具,都有共同的兩大天生缺陷,當部落格規模較小時,還不會察覺到;但成長到數百篇、甚至上千篇文章時,就會發現:

1. 文章列表讀取的速度很慢 → 因為一次要讀取的 feed 資料太多

2. 只能列出最新的五百篇文章 → 因為 Blogger feed 一次最多允許讀取 500 項資料

過去寫了幾個「文章列表」的版本,同樣有以上問題。由於一段時間後,自己的部落格也會面臨 500 篇文章的關卡,因此未雨綢繆一下,使用新的技術來改善這兩個重大問題,這也是本篇「極速版」的由來。以下先說明這個版本的各項特點,想直接安裝請跳「二、安裝程式碼」。




一、文章列表「極速版」的特點


既然改了版,順便也稍微調整配置、美化版面一下,並加入 WFU 喜歡的功能設計。特別之處條列如下:

1. 處理資料量大且迅速:如前言所提,無論部落格文章有多少篇都能顯示,且這將會是你看過執行最快速的版本。

2. 年份文章開合按鈕:這個按鈕可收合一整年度的文章,方便迅速檢視較早期的文章,不必用滑鼠捲動頁面。

3. 月份文章開合按鈕:可收合整個月的文章,功用如上一點,適合該月份文章很多的狀況。

4.「載入更多」按鈕:這是 "瀑布流" 的設計,但個人覺得比瀑布流更好,將決定是否要載入資料的權利交還給使用者。避免使用者不想載入資料時,瀑布流卻又一直讀取,佔用系統資源、並讓頁面捲動卡卡。

5.「載入全部」按鈕:第 4 點的一體兩面。

6. CSS 可自訂:所有版面的 CSS、任何參數、效果都能修改,讓自己的文章列表與眾不同。



二、安裝程式碼


新開一篇文章 → 複製以下程式碼:



請先別存檔,以上是主程式的部分,還需要複製「三、安裝 CSS」(版面樣式)的程式碼。

請參照以下程式碼行號的說明──

E:一次載入的文章數。基本上預設值 50 已經速度很快了,若改成 30、50、70 這樣的數字其實也感覺不太出差異。

F:按鈕文字的設定,例如改成 "Load More"。

G:按鈕文字的設定,例如改成 "Load All"。

H:文章開合的效果,預設值 "fadeToggle" 為「淡入淡出」的效果;若改為 "slideToggle" 則有「滑動開合」的效果

I:月份的字串設定,可改為中文或自訂字串。

K:由於「Google Drive 關閉外連」功能,綠色字串的 JS 網址是無法外連的,請參照「WFU BLOG 外連 JS 變更及操作說明」,將這個連結下載後存成 JS 檔,上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後,置換本行的綠色網址字串。



三、安裝 CSS


接在「二、安裝程式碼」這部分的程式碼後面,貼上以下 CSS 程式碼:

<style>
.tocYearTitle { /* 年份按鈕 */
display: inline-block;
float: left;
width: 70px;
padding: 5px;
font-size: 20px;
text-align: center;
cursor: pointer;
color: #ffffff;
font-family: Arial, sans-serif;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 1px 0px #3d768a;
-moz-box-shadow: 0px 10px 14px -8px #276873;
-webkit-box-shadow: 0px 10px 14px -8px #276873;
box-shadow: 0px 10px 14px -8px #276873;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
background: -moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -o-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
background-color: #599bb3;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.tocYearTitle:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
background: -moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -o-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
background-color:#408c99;
}
.tocYearTitle:active {
position: relative;
top: 1px;
}
.tocYear { /* 年份區塊 */
margin: 0px 5px 30px;
}
.tocYearToggle { /* 年份收合區塊 */
margin-left: 100px;
}
.tocMonthTitle { /* 月份按鈕 */
display: inline-block;
font-size: 20px;
font-family: Arial, sans-serif;
font-weight: bold;
color: #000060;
cursor: pointer;
margin: 5px 0px 15px;
text-shadow: 2px 2px 4px #999;
}
.tocMonthTitle:hover {
text-shadow: 0 0 10px #000060;
}
.tocMonthTitle:active {
position: relative;
top: 1px;
}
.tocMonthToggle { /* 月份收合區塊 */
margin-bottom: 20px;
}
.tocDayNo { /* 日期 */
float: left;
font-size: 16px;
line-height: 1.6em;
}
.tocPostTitle { /* 文章標題 */
margin-left: 35px;
font-size: 16px;
line-height: 1.6em;
}
#tocMore { /* 載入按鈕區塊 */
margin: 40px 0px 40px 100px;
}
.tocMore { /* 載入按鈕 */
display: inline-block;
margin-right: 50px;
width: 140px;
padding: 10px;
cursor: pointer;
color: #3a8a9e;
font-family: arial, "標楷體";
font-size: 20px;
font-weight: bold;
text-align: center;
-moz-box-shadow: 0px 10px 14px -7px #899599;
-webkit-box-shadow: 0px 10px 14px -7px #899599;
box-shadow: 0px 10px 14px -7px #899599;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0);
background-color:#ededed;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
text-decoration:none;
text-shadow:0px 1px 0px #e1e2ed;
}
.tocMore:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed));
background:-moz-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:-webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:-o-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:-ms-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed',GradientType=0);
background-color:#bab1ba;
}
.tocMore:active {
position:relative;
top:1px;
}
#tocInfo { /* 資訊區塊 */
text-align: left;
margin-top: 40px;
font-family: arial, sans-serif;
font-size: 11px;
padding-top: 5px;
border-top: 1px solid #e9eaed;
}
#tocInfo a {
color: #bbb;
text-decoration: none;
}
</style>

現在可以將文章發佈,接著將這篇文章的連結放到部落格上方的水平選單上(或安裝「浮動導覽列」、「下拉選單」功能),提供訪客有很好的導覽效果。

如果有 CSS 基礎概念的話,那麼可以自行修改參數,讓自己的文章列表有截然不同的風貌,可參考綠字部分的註解得知區塊的內容。如果尚未看過前言提供的效果連結,請按下面的按鈕:



文章列表極速版各版本:

34 則留言:

  1. 這樣呈現方式我喜歡!

    不過我有疑問的是

    使用了極速版文章列表之後"樹狀標籤文章列表"是不是就可以拿掉了!?


    回覆刪除
  2. <4675810942327431539>(以上內容請勿刪除,從括號之後開始留言)越來越會改 CSS 了喔~BTW,你的側邊欄會不會改太寬了?這樣文章標題寬度很窄,"載入更多"與"全部載入"的按鈕比例就太寬了。

    回覆刪除
    回覆
    1. 是哦! 我晚點再來修改。

      我沒有很會改啦,是你的文章寫的簡單明瞭讓我很快就能上手^_^

      刪除
  3. <3103158122595962485>(以上內容請勿刪除,從括號之後開始留言)兩者用途不一樣吧~~訪客不一定會去點你放在導覽列的"文章列表"喔!

    回覆刪除
    回覆
    1. 也是,每個訪客的習慣不一樣,我目前還是留著樹狀文章列表好了!

      刪除
  4. <1959254630337080977>(以上內容請勿刪除,從括號之後開始留言)你用 email 看的齁!我是在回 ken 啦~~XD

    回覆刪除
  5. <2744407287162765071>(以上內容請勿刪除,從括號之後開始留言)這點我也知道~ 有空改改看 XD

    回覆刪除
  6. 謝謝介紹
    高興使用中. 言身寸

    回覆刪除
  7. 找了好久,原來你這邊有,改天來試試這個功能!
    謝謝 ^_^

    回覆刪除
  8. 一個問題:可以針對某個 tag 使用文章列表嗎?

    回覆刪除
  9. <3608837761154787344>(以上內容請勿刪除,從括號之後開始留言)口那衤里 ︿︿

    回覆刪除
  10. <4093227406058288167>(以上內容請勿刪除,從括號之後開始留言)如「四、其他功能版本」所述,之後會發布"依標籤"排列的版本~

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

    回覆刪除
  12. 您好~很謝謝您的分享
    我試了一下我自己的部落格,好像只能列出最多一百篇文章
    (它會一直停留在讀取的狀態)
    但您的範例網頁並沒有這個問題,
    不曉得是不是我哪個步驟漏了呢?
    還請您不吝賜教>< 非常感謝!

    回覆刪除
  13. <7226054986284966745>(以上內容請勿刪除,從括號之後開始留言)不客氣,不過以後發問的時候記得附上網址喔,這樣要檢查問題比較方便。

    關於你的問題,很可能是 feed 某篇文章資料有問題,導致讀取到那篇時讓程式當掉。我注意到你是從痞客邦搬過來,因此假設是你轉換格式的時候所產生的問題。

    目前幫你一篇篇檢查,發現 "[台北]旺味麵場" 這篇會讓程式當掉,你先將這篇還原成草稿試試看,如果這樣可行的話,就確定是轉換成 blogger 格式時所造成的問題,那麼再重新發布這篇文章、或將文章內容複製到新文章來試試看。

    回覆刪除
  14. <363389859192523492>(以上內容請勿刪除,從括號之後開始留言)真的真的很謝謝您,確實如您所說,我是從pixnet搬過來的,當初搬的時候也是卡在搬到一半就停住了,當時也是一篇一篇去找是哪幾篇文章讓搬家程式當掉的.不過有問題的那幾篇我應該都已經移除了才是.

    我將旺味麵場那篇還原成草稿之後,確實可以修正這個問題,不過到了某一篇之後又不行了,想必是還有其他文章又讓它當了,我會再慢慢找出是哪些文章造成問題的,不過若是不會花您太多時間說明的話,能否再請教一下您是如何檢查的呢?真的很感謝您!

    回覆刪除
  15. <363389859192523492>(以上內容請勿刪除,從括號之後開始留言)您好,再次來和您回報一下XD 幸好只有兩篇文章有問題,目前都已經修好了,真的很感謝您的分享和答覆,文章列表這個功能對我而言真的相當重要,再次拜謝!

    回覆刪除
  16. <3595304201107476238>(以上內容請勿刪除,從括號之後開始留言)哪裡~恭喜你找出原因了!

    回覆刪除
  17. <7145345432882133129>(以上內容請勿刪除,從括號之後開始留言)不會~ :)

    回覆刪除
  18. 請問 如果只想要出現文章標題列表 但是不要有 日期 (月分 年分 日期 都不要)
    要怎麼要修改呢??

    回覆刪除
  19. <1752240824979495694>(以上內容請勿刪除,從括號之後開始留言)哪裡~

    回覆刪除
  20. <5475336365713036999>(以上內容請勿刪除,從括號之後開始留言)你需要的是「最新文章」這樣的工具,可參考「Blogger 最新文章+任意尺寸縮圖」,這篇是含縮圖的版本,可以再文章內容中找到不含縮圖的版本(abin版)。

    回覆刪除
  21. 內容詳盡、有用。謝謝你。

    我的網頁已根據所提供程式碼,加了「按日期排列的網誌目錄」和「按標籤排列的網誌目錄」兩篇網誌。

    回覆刪除
  22. 您好,您的網誌內容相當豐富,我以前也拜讀過三國志11的內容(軍神文)。

    這次在找到您的文章,是因為我想利用Blogger的小工具做一個隨機選擇文章連結的功能,但亂爬了一堆文章,還是不曉得從何起手,找到最接近的功能是您這篇列出所有文章標題,照理說能列出來,應該也可以隨機選擇。

    想要做出一個button(其實就是個標籤),然後隨機出現一篇文章,進階上可以根據標籤做選擇。比方說文章有美食、旅遊、3C等。使用者按美食標籤,就出現隨機美食文章標題一篇。

    有些寫程式的底子,但對Blogger放程式碼這段沒有具體的概念。

    請問我應該從哪裡開始讀呢?感謝

    回覆刪除
  23. <9194429392519401778>(以上內容請勿刪除,從括號之後開始留言)剛剛實作了隨機頁首的圖片,請問這個所有文章的功能是獨立成一篇文章嗎?

    程式碼該貼在哪裡?

    能做在小工具裡面嗎?

    抱歉問題可能很基本。

    回覆刪除
  24. <7532343640454685291>(以上內容請勿刪除,從括號之後開始留言)抱歉三度留言,已經實作完所有文章-依日期排序的這個功能,您寫得很詳盡,讓我對blogger有了一些基本概念。

    但我距離的自己的目標好像還有點遠,因為function 的部份看起來也是使用您寫好的東西,想要自己在修改又不知道該從何下手了。

    懇請您在多指點一些,謝謝

    回覆刪除
  25. <9194429392519401778>(以上內容請勿刪除,從括號之後開始留言)你好,好久沒碰三11了,聽說今年會出三13??希望是個不輸11的作品~(12我完全沒碰過)

    根據你的敘述,我整理的筆記 http://www.wfublog.com/2012/04/blogger-tool.html 裡面有一個 http://shiouhhc.blogspot.tw/2007/08/toc-table-of-contents.html,或許接近你想要的效果吧,不過你要自己再改、再研究他的 code 就是了~

    回覆刪除
  26. <47503871098146795>(以上內容請勿刪除,從括號之後開始留言)[quote]程式碼該貼在哪裡?[/quote]
    我看你已經貼在文章裡面,那麼這一點應該沒問題了。
    [quote]function 的部份看起來也是使用您寫好的東西,想要自己在修改又不知道該從何下手了。[/quote]
    這個版本我並沒有開放原始碼,如果想要研究 code 的話,可以先從我早期的版本開始,都有開放源碼,例如 http://www.wfublog.com/2012/05/dynamic-toc.html → 四、個別安裝 → 1. 依日期排列

    也可參考「文章列表」這個標籤的早期其他文章,來熟悉 code。想要自己改功能,還需要熟悉 Blogger feed 的 json 資料,可參考我的 「Blogger 筆記」標籤下的「Blogger 知識」,會有相關資料。

    最後,要實現動態載入的話,需要熟悉 ajax,可使用 jquery 比較方便。總之,你想要的功能,離實作出來的道路不算短喔!

    回覆刪除
  27. <8328441528397925044>(以上內容請勿刪除,從括號之後開始留言)再感謝您的指點,我已經按照他的文章實做一次了,目前在研究js的部份。

    回覆刪除
  28. HI,再次感謝您的分享
    http://shiouhhc.blogspot.tw/2007/08/toc-table-of-contents.html
    研究他的js,利用陣列重新篩選,以及Math.random(),總算是做出雛型了
    算算時間也過了兩個月,真是不好意思,直到前幾天才花上整天的時間好好的研究了一番

    回覆刪除

張貼留言注意事項:

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