2015年9月26日

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

A+
舊版本「文章列表極速版﹍依標籤排列」發表後,獲得許多讀者的想法與意見,大多是非常有建設性的,可以讓這個小工具使用上更為友善。

這個更新版將目前收到的構想全部統合,運用的彈性比以前大很多,已經安裝過的讀者,請重新安裝本篇的更新版本。



一、更新內容


1. 處理樹狀標籤

如果部落格使用了「樹狀標籤」,會面臨標籤名稱過長的問題。WFU 建議一定要安裝「讓 Blogger 樹狀標籤只顯示真實標籤名稱」這個小工具,可大大縮減字串的長度。

而本篇的更新版也採用同樣的原理,讓文章列表的 "樹狀標籤",只會顯示 "真實標籤" 的字串。


2. 設定只顯示部分標籤

舊版只能設定排除的標籤,當需要排除的標籤很多時,不少讀者反應希望能夠設定 "只需要顯示的標籤" 就好,否則設定排除的標籤是很痛苦的事,因此本篇的更新版特別加入此功能。


3. 不需輸入完整標籤名稱

無論是設定 "排除" 或 "包含" 的標籤,都不需要輸入完整的標籤名稱,只要輸入 "部分字串" 即可。這是一個很方便的設計,尤其是對於樹狀標籤,若要一次 "排除" 或 "包含" 某個大分類的標籤,例如以下這些樹狀標籤:

  • Blogger-工具-文章列表
  • Blogger-Hack-留言
  • Blogger-筆記

只要設定字串 "Blogger",就能一次 "排除" 或 "包含" 所有的標籤。



二、安裝程式碼


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


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

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

A:此行可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jquery,以免重複安裝。

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

F:藍色字串即為標示 "新文章" 時所顯示的字樣。若要使用圖片,可填入 img 標籤的圖片語法。

G:若只想顯示部分特定標籤,請填入標籤包含的字串,每個項目之間請用小寫逗號 "," 隔開,最後一個項目之後不可有逗號。若不需設定此項,本行請留下 tocLabel.include = []; 這樣的內容即可

H:若想排除部分特定標籤,請填入標籤包含的字串,每個項目之間請用小寫逗號 "," 隔開,最後一個項目之後不可有逗號。如果沒有需要排除的標籤,本行請留下 tocLabel.exclude = []; 這樣的內容即可

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

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

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

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



三、安裝 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;
}
#tocInfo { /* 資訊區塊 */
text-align: left;
margin-top: 30px;
font-family: arial, sans-serif;
font-size: 11px;
padding-top: 5px;
border-top: 1px solid #e9eaed;
}
#tocInfo a {
color: #bbb;
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 這個數值。

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

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




四、注意事項


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

&<>@!+,

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


其他文章列表工具:

3 則留言:

張貼留言注意事項:

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