(Pic from: forums.realmacsoftware.com)前兩篇文章列表(依日期、依標籤排列)算是基本款，相信對於大部分部落格的導覽功能使用已經足夠。從本篇開始，會陸續增加不一樣的附加功能。
「極速版」系列的優點可參考這篇「依日期排列」→「一、文章列表極速版的特點」，而這篇增加的「讚」統計數據，如果是經營 Facebook 小有成就的站長，相信這個功能除了可以為文章列表加分不少，同時也提供了讀者挑選文章的絕佳指標，導覽效果比基本款文章列表更佳，同時也可大大減少網頁跳離率。
以下先簡單介紹一下特色，想直接安裝請跳「二、安裝程式碼」。
一、「讚」統計功能特點
1. 顯示速度到達極致：兩年前寫過「文章列表+"讚"統計」的舊版本，不過當時 WFU 沒有 "瀑布流" 的技術，顯示讚按鈕的速度非常慢，可以比較「舊版本的 DEMO 網頁」就知道差別。本篇版本的 DEMO 網頁，用 "極速版" 來命名相信不會有任何的爭議。
2. 三種統計數據：Facebook 的 "讚" 統計數據，官方從過去以來經過多次修正，現在的資料庫其實分別有三種數據：
- 讚統計
- 分享數統計
- 留言數統計
而本系列的文章列表，將一律使用三種數據的總和，意思就是說，若文章列表顯示了 20 個 "讚"，其實是代表 "讚" + "分享" + "留言" 三種數據的加總。
3. 可自訂爆表數量：沿用舊版本的設計，使用者能夠自訂 "爆表數量"，若設定了 "99"，則代表超過 99 個讚以後，一律顯示為 "爆" 這樣的字串(或自訂字串)。
二、安裝程式碼
新開一篇文章 → 複製以下程式碼：
請先別存檔，以上是主程式的部分，還需要複製 "版面樣式" 的部分，如不需要修改參數，請跳至「三、安裝 CSS」。
如果想自訂參數的話，請參照程式碼行號的說明──
F：一次載入的文章數。基本上預設值 50 已經速度很快了，若改成 30、50、70 這樣的數字其實也感覺不太出差異。
G：讚統計爆表數量，預設值 50代表超過這個數字後會顯示 "爆"。
H：爆表時顯示的字串，也可改為自訂字串。
I：按鈕文字的設定，例如改成 "Load More"。
J：按鈕文字的設定，例如改成 "Load All"。
K：文章開合的效果，預設值 "fadeToggle" 為「淡入淡出」的效果；若改為 "slideToggle" 則有「滑動開合」的效果。
L："讚" 的圖示網址，可使用自訂的圖示網址。如果使用不同尺寸的圖片，可能需要修改 CSS 以符合版面美觀，請再參考「安裝 CSS」的內容。
M：月份的字串設定，可改為中文或自訂字串。
三、安裝 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;
}
.tocPost { /* 文章標題區塊 */
margin-left: 35px;
font-size: 16px;
border-bottom: 1px dotted lavender;
padding-bottom: 5px;
}
.tocPostTitle { /* 文章標題 */
display: inline-block;
width: 85%;
}
.tocLike { /* 讚區塊 */
padding-left: 10px;
display: inline-block;
width: 10%;
vertical-align: top;
}
.tocLike img { /* 讚圖片 */
height: 20px;
vertical-align: middle;
border: none;
box-shadow: none;
}
.tocBurst { /* 爆 */
color: #000060;
font-weight: bold;
vertical-align: middle;
}
#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: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 14px;
font-style: italic;
text-shadow: 1px 1px 1px lavender;
}
</style>由於每個網站的範本都不同、文章區塊的寬度也不一樣，如果發現 "讚" 或統計數字被擠到下一行(或使用了自訂的 "讚" 圖示)，可能需要改兩個地方：
- /* 文章標題 */這個區間，紅色字串的寬度百分比 85%請自行調整。
- /* 讚區塊 */這個區間，紅色字串的寬度百分比 10%請自行調整。
現在可以將文章存檔，接著將這篇文章的連結放到部落格上方的水平選單上(或安裝「浮動導覽列」、「下拉選單」功能)，提供訪客有很好的導覽效果。
如果有 CSS 基礎概念的話，那麼可以自行修改參數，讓自己的文章列表有截然不同的風貌，可參考綠字部分的註解得知區塊的內容。如果尚未看過前言提供的效果連結，請按下面的按鈕：
四、其他功能版本
未來發佈其他功能的版本時，會一併整理在此列表。