2014年3月1日 星期六

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

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

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



文章列表極速版各版本:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP