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

市面上所有的 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 基礎概念的話，那麼可以自行修改參數，讓自己的文章列表有截然不同的風貌，可參考綠字部分的註解得知區塊的內容。如果尚未看過前言提供的效果連結，請按下面的按鈕：

點此看範例網頁

文章列表極速版各版本：