2014年3月1日 星期六

Blogger 文章列表極速版﹍(2) 依標籤排列

Blogger 文章列表極速版﹍(2) 依標籤排列

Wayne Fu 0 A+

(Pic from: forums.realmacsoftware.com)
2015.9.26 公告:本文工具已有更新版,請前往「Blogger 文章列表極速版﹍依標籤排列 (更新版)」。

上一篇「依日期排列」,適合提供給對網站不熟的訪客,讓其概略瞭解近期文章走向、發文頻率、歷年作品等等。本篇「依標籤排列」的文章列表,則適合對網站已經有一定熟悉程度的讀者,知道從哪裡可迅速找到需要的資料,當然也適合站長自己使用。

「Blogger 文章列表極速版」的系列文章,其優點請參考第一篇「依日期排列」的前言介紹。而以下先介紹「依標籤排列」這個版本的特點,想直接安裝請跳「二、安裝程式碼」。




一、「依標籤排列」版本的特點


1. 不載入全部文章:主畫面顯示所有標籤列表,但不載入所有文章列表(只載入第一個標籤的文章)。原因為這是「極速版」,載入速度只在一瞬間,因此訪客選擇要查閱的標籤後,再進行載入文章的動作即可。能省下預先載入所有文章所耗費的時間與系統資源。

2. 標籤開合按鈕:每個按鈕可收合該標籤的全部文章。

3. 自訂新文章範圍:系統可標示哪些文章為近期的新文章,因此可自行設定新文章的區間範圍。

4. 排除特定標籤:某些標籤可能沒有必要列出來讓訪客查閱,例如「站務相關」、「留言板」、或特定目的不想讓訪客知道的標籤,那麼可以設定讓這些標籤不在文章列表中出現。

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



二、安裝程式碼


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


2015.9.26 公告:本文工具已有更新版,請前往「Blogger 文章列表極速版﹍依標籤排列 (更新版)」。


請先別存檔,以上是主程式的部分,還需要複製 "版面樣式" 的部分,如不需要修改參數,請跳至「三、安裝 CSS」。

如果想自訂參數的話,請參照程式碼行號的說明──

E:可設定最近的幾篇文章要顯示為新文章,紅字 15 代表最近的 15 文章,會標示為 "新文章"。

F:藍色字串即為標示 "新文章" 時所顯示的字樣,也可填入 http 開頭的圖片網址。

G:請填入不想顯示的標籤名稱,每個項目之間請用小寫逗號 "," 隔開,最後一個項目之後不可有逗號。如果沒有需要排除的標籤,本行請留下 tocLabel.exclude = []; 這樣的內容即可。

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

2014.3.14 功能增補──

I:標籤若不標示有新文章,請改為 "N"。

J:若不展開第一個標籤的文章,請改為 "N"。



三、安裝 CSS


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

<style>
.tocLabelTitle { /* 標籤按鈕 */
display: table-cell;
width: 200px; /* 按鈕的寬度 */
padding: 5px 10px;
font-size: 20px;
text-align: center;
cursor: pointer;
color: #ffffff;
font-family: Droid Serif, "標楷體", 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;
}
.tocLabelTitle: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;
}
.tocLabelTitle:active {
position: relative;
top: 1px;
}
.tocLabel { /* 個別標籤區塊 */
margin: 0px 5px 15px;
}
.tocLabelToggle { /* 標籤開合區塊 */
display: none;
margin: 20px 10px 30px;
}
.tocPostNo { /* 文章編號 */
float: left;
font-size: 16px;
width: 30px;
text-align: right;
line-height: 1.6em;
}
.tocPostTitle { /* 文章標題 */
margin-left: 35px;
font-size: 16px;
line-height: 1.6em;
}
#tocInfo { /* 資訊區塊 */
text-align: left;
margin-top: 40px;
font-family: helvetica, arial, sans-serif;
text-shadow: 1px 1px 1px lavender;
font-size: 11px;
padding-top: 5px;
border-top: 1px solid #e9eaed;
}
#tocInfo a {
color: #ccc;
text-decoration: none;
}
.tocLabelNewText { /* 最新文章標籤標示 */
display: table-cell;
color: #990000;
font-weight: bold;
font-style: italic;
padding-left: 10px;
vertical-align: middle;
}
.tocNewText { /* 最新文章標示 */
color: #990000;
font-weight: bold;
font-style: italic;
margin-left: 10px;
}
</style>

請特別注意第四行的紅色字串,如不滿意標籤按鈕的寬度,可自行調整 200 這個數值。

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

2014.3.14 補充:留言 #10  FreeTong Leung 提供了新文章提醒字串的文字閃爍語法,需要此功能的話請按留言內容修改 CSS。

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




四、注意事項


根據這篇「官方說明文件」,標籤的名稱不得使用以下字元:

&<>@!+,

以前不了解為何如此,現在寫了這個小工具後終於知道原因了,執行的時候程式一直當掉,後來才查出原來本站有個標籤名稱為「電腦- Google 相關-G+ 相關」,其中的一個字元正是以上列出的加號 "+",現在改成全形符號的名稱「電腦- Google 相關-G+ 相關」後,程式就可正常執行了。

如果使用本篇的工具而執行不正常時,請先仔細檢查一下標籤的名稱是否誤用了以上紅字的字元。


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

沒有留言:

張貼留言注意事項:

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

TOP