Blogger 樹狀標籤 V2.1﹍切換標題模式

「Blogger 樹狀標籤 V2.0」是安裝懶人包，適合新手安裝。本篇 V2.1 版加入了「切換標題模式」的功能，安裝上要多幾個步驟，建議使用 Blogger 一段時間以後再嘗試安裝。

以下先簡單介紹 V2.1 版的功能，想要直接安裝跳到「二、準備動作」。

(圖片出處: pixabay.com)

本文索引

• 一、功能介紹
• 二、準備動作
• 三、安裝程式碼
• 四、相關工具
• 五、常見 FAQ

一、功能介紹

V2.1 版的效果大致如下：



1. 基本功能

V2.x 版的修正功能及新增功能，在「Blogger 樹狀標籤 V2.0」有詳細的說明，這裡不再複述。


2. 切換標題模式

在正常的情況下，按下標籤連結的頁面，會跟部落格首頁一樣，顯示文章摘要(或封面縮圖)。不過站在站長本身的角度，自己寫了哪些內容都是瞭如指掌，那麼會希望標籤頁面只顯示文章標題就好，以加快搜尋文章的速度。

V2.1 版比 V2.0 多了「切換標題模式」的功能，將 "摘要模式"、"標題模式" 這兩個按鈕圖示整合到標籤上方的導航欄位，並使用 cookie 記憶按鈕狀態，如此站長可選擇使用 "標題模式"，而訪客則使用預設的 "摘要模式"，達到雙贏、各取所需的目的。

想先測試切換兩種模式的效果，可前往展示頁面：

點此看範例網頁

二、準備動作

這部分的內容跟 V2.0 一樣，純粹複製貼上，如果已經安裝過 V2.0 的話，可不必再做這裡的動作：

1. 設定標籤小工具

若沒安裝過「標籤」小工具的話，可到後台 → 版面配置 → 新增一個「標籤」小工具 → 填入標題後，如下圖：



將紅框處分別勾選 "按字母排序"、"清單"、"顯示每個標籤的文章數"。請注意不要勾選「標籤雲」。

如果有某些標籤不想顯示出來，第一個選項可改為「選取的標籤」。


2. 找出標籤小工具的 ID

到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋「標籤」小工具的標題名稱，例如我設定為 "分類"：



如上圖，我的標題名稱 "分類" ，同一行紅框處的 ID 字串為 "Label1"，請記下你的 ID 字串。


3. 設定文章標籤

請先將部落格所有文章的標籤，改為樹狀標籤的格式。例如原本的標籤名稱為 "CCC"，請改成 "AAA-BBB-CCC" 這樣的形式。



上圖這篇文章原本的標籤名稱為 "多層樹狀標籤"，現在改為四層標籤，大分類名稱為 "電腦"，其餘請見圖中說明。

若沒事先為文章設定樹狀標籤的話，那麼這個工具將無法顯示階層分類的效果。

三、安裝程式碼

如果曾安裝過舊版或 V2.0 的話，請先完整移除先前的程式碼。

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

1. JQUERY + CSS

請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/*樹狀標籤 V2*/
#Label1 {
display: none;
overflow: auto;
}

#tl2_main,
#tl2_nav {
font-size: 13px;
font-weight: bold;
}

#tl2_nav {
background-color: #eee;
margin-bottom: 10px;
padding: 3px;
}

#tl2_nav a {
display: inline-block;
box-sizing: border-box;
width: 25%;
text-align: center;
border-left: 1px dashed #aaa;
}

#tl2_nav a:first-child {
border-left: 0;
}

#tl2_nav a,
#tl2_main a {
text-decoration: none;
}

#tl2_main img {
vertical-align: middle;
}

.tl2_category {
margin-top: 2px;
}

a.tl2_catText {
}

.tl2_subArea {
margin: 0 0 5px 10px;
}

.tl2_label {
margin-left: 5px;
}

.tl2TOC_caption {
font-size: 20px;
}

#tl2TOC ol {
padding-right: 0;
}

#tl2TOC li {
padding: 5px 0;
border-bottom: 1px solid #eee;
text-indent: 0;
}

#tl2TOC a,
#tl2TOC_info a {
text-decoration: none;
}

#tl2TOC_info {
text-align: left;
font-size: 11px;
font-family: arial, sans-serif;
padding-top: 5px;
border-top: 1px solid #e9eaed;
}

#tl2TOC_info a {
color: #ccc;
}

.tl2TOC_title {
display: inline-block;
font-weight: bold;
width: calc(100% - 100px);
padding-right: 10px;
vertical-align: top;
}

#tl2TOC_postIndex {
margin: 5px 0;
text-align: center;
}

#tl2TOC_switchPage {
background-color: #eee;
margin: 5px 0;
padding: 3px;
}

#tl2TOC_switchPage a,
#tl2TOC_switchPage span {
box-sizing: border-box;
display: inline-block;
width: 50%;
padding: 0;
border-left: 1px dashed #aaa;
text-align: center;
}

#tl2TOC_switchPage a:hover,
{
background-color: rgba(100, 100, 100, 0.1);
}

#tl2TOC_switchPage a:first-child,
#tl2TOC_switchPage span:first-child {
border-left: 0;
}
</style>
第一行綠色字串可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

紅色字串 "Label1" 請改為「二、準備動作」→「2. 找出標籤小工具的 ID」→ 自己的 ID 字串

如果熟悉 CSS，可自行修改其餘 CSS 參數。


2. 安裝主程式

接著請搜尋 </body> 這個字串，找到後在此字串的前一行，插入以下程式碼：

1. <!-- 樹狀標籤 V2 start -->
2. <script>
3. //<![CDATA[
4. var tl2 = {
5. target: "Label1", // 標籤小工具的 ID
6. category: ["電腦", "數位生活", "休閒", "閱讀"], // 雙引號內填入大分類名稱, 每個大分類用小寫逗號隔開, 最後一個大分類之後不可有逗號; 填入順序就是顯示的順序
7. showLevel: 2, // 預設打開的標籤層數, 填入 1 為全部收起的狀態
8. showCategoryCount: "Y", // 大分類若不顯示文章數, 請填入 "N"
9. openLogo: "▼", // 如使用圖檔,雙引號內請填入 http 開頭的網址
10. closeLogo: "►", // 如使用圖檔,雙引號內請填入 http 開頭的網址
11. listLogo: "⇢", // 如使用圖檔,雙引號內請填入 http 開頭的網址
12. openNav: "▼ 展開", // 如使用圖檔,雙引號內請填入 http 開頭的網址
13. closeNav: "► 收合", // 如使用圖檔,雙引號內請填入 http 開頭的網址
14. summaryNav: "✂ 摘要", // 如使用圖檔,雙引號內請填入 http 開頭的網址
15. titleNav: "☰ 標題", // 如使用圖檔,雙引號內請填入 http 開頭的網址
16. mode: 0, // 1 代表標題模式, 0 代表網站原始的摘要效果
17. postPerPage: 20, // 每頁顯示幾篇文章
18. nextLogo: "▸", // 下一頁圖示
19. prevLogo: "◂", // 上一頁圖示
20. serialText: "序號",
21. totalText: "總共:"
22. };
23.  
24. tl2.dataSet=[];tl2.labelSplitSet=[];tl2.notTreeLabel=[];tl2.text=function(a){return $("<p>").html(a).text()};$("#"+tl2.target+" li").each(function(){var j=$(this),e=j.children("a")[0],m=[],f,a,c,g,b,d,k,h;if(e){a=e.href;c=e.dir;g=tl2.text(e.innerHTML);k=j.children("span")[0];h=k.innerHTML.replace("(","").replace(")","")}else{a="//"+location.hostname+location.pathname;k=j.children("span");c=k[0].dir;g=tl2.text(k[0].innerHTML);h=k[1].innerHTML.replace("(","").replace(")","")}b=g.split("-");d=b.length;for(f=0;f<d;f++){if(d==1){tl2.notTreeLabel.push([g,c,a,h]);return}if(f>0&&f!=d-1&&b[f].search(" ")!=0){b[f]=" "+b[f]}m[f]=b[f]}tl2.dataSet.push([m,c,a,h])});tl2.dg=function(a){return document.getElementById(a)};tl2.toggle=function(n){var k=tl2.dg,o=tl2.labelSplitSet,b=o.length,p=tl2.openLogo,h=tl2.closeLogo,m,q,d,g,a,e,c,f;for(e=0;e<b;e++){m=o[e];f=m.length;for(c=0;c<f;c++){q=m.join("")+c;d="logo"+q;g=k(q);a=k(d);if(m[1]&&n==1){if(a&&!a.firstChild.src){a.innerHTML=p}if(a&&a.firstChild.src){a.firstChild.src=p}if(g){g.style.display="block"}}if(m[1]&&n==0){if(a&&!a.firstChild.src){a.innerHTML=h}if(a&&a.firstChild.src){a.firstChild.src=h}if(g){g.style.display="none"}}}}};tl2.swap=function(c,d){var f=tl2.dg,a=f(d),e=f(c),b=tl2.openLogo,g=tl2.closeLogo;if(!e.firstChild.src){e.innerHTML=(tl2.text(e.innerHTML)==b)?g:b}else{e.firstChild.src=(e.firstChild.src==b)?g:b}a.style.display=(a.style.display=="block")?"none":"block"};(function(a){if(typeof define==="function"&&define.amd){define(["jquery"],a)}else{if(typeof exports==="object"){a(require("jquery"))}else{a(jQuery)}}}(function(f){var a=/\+/g;function d(i){return b.raw?i:encodeURIComponent(i)}function g(i){return b.raw?i:decodeURIComponent(i)}function h(i){return d(b.json?JSON.stringify(i):String(i))}function c(i){if(i.indexOf('"')===0){i=i.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\")}try{i=decodeURIComponent(i.replace(a," "));return b.json?JSON.parse(i):i}catch(j){}}function e(j,i){var k=b.raw?j:c(j);return f.isFunction(i)?i(k):k}var b=f.cookie=function(q,p,v){if(p!==undefined&&!f.isFunction(p)){v=f.extend({},b.defaults,v);if(typeof v.expires==="number"){var r=v.expires,u=v.expires=new Date();u.setTime(+u+r*86400000)}return(document.cookie=[d(q),"=",h(p),v.expires?"; expires="+v.expires.toUTCString():"",v.path?"; path="+v.path:"",v.domain?"; domain="+v.domain:"",v.secure?"; secure":""].join(""))}var w=q?undefined:{};var s=document.cookie?document.cookie.split("; "):[];for(var o=0,m=s.length;o<m;o++){var n=s[o].split("=");var j=g(n.shift());var k=n.join("=");if(q&&q===j){w=e(k,p);break}if(!q&&(k=e(k))!==undefined){w[j]=k}}return w};b.defaults={};f.removeCookie=function(j,i){if(f.cookie(j)===undefined){return false}f.cookie(j,"",f.extend({},i,{expires:-1}));return !f.cookie(j)}}));tl2.startIndex=1;tl2.indexNow=0;tl2.labelNow="";tl2.switchPage=function(d,b,a){var h=tl2.postPerPage,e=(d>h),f=$("#tl2TOC_postIndex"),i=tl2.labelNow,c="",g=$("#tl2TOC").offset().top;d=e?h:d;if(b>tl2.startIndex){c+="<a class='tl2TOC_prevPage' href='javascript:' title='上一頁'>"+tl2.prevLogo+"</a>"}else{c+="<span class='tl2TOC_prevPage'>"+tl2.prevLogo+"</span>"}if(e){c+="<a class='tl2TOC_nextPage' href='javascript:' title='下一頁'>"+tl2.nextLogo+"</a>"}else{c+="<span class='tl2TOC_nextPage'>"+tl2.nextLogo+"</a>"}$("#tl2TOC_switchPage").html(c);$("a.tl2TOC_prevPage").click(function(){$("html, body").animate({scrollTop:g-50},0);tl2.init(i,b-h)});$("a.tl2TOC_nextPage").click(function(){$("html, body").animate({scrollTop:g-50},0);tl2.init(i,b+h)});if(f.length){f.html(tl2.serialText+" "+b+"-"+(b+d-1)+", "+tl2.totalText+" "+a)}};tl2.main=function(s){var r=s.feed,k=r.entry.length,c=parseInt(r.openSearch$startIndex.$t),b=parseInt(r.openSearch$totalResults.$t),o=(tl2.postPerPage>k)?k:tl2.postPerPage,h="",g,f,e,q,p,n,a,d;h+="<h2 class='tl2TOC_caption'>標籤「"+tl2.labelNow+"」的文章列表</h2>";h+="<ol start='"+tl2.indexNow+"'>";for(g=0;g<o;g++){q=r.entry[g];p=q.title.$t;n=q.link;e=q.link.length;for(f=0;f<e;f++){if(n[f].rel=="alternate"){a=n[f].href;break}}h+="<li><div>";h+="<span class='tl2TOC_title'><a href='"+a+"'>"+p+"</a></span>";h+="</div></li>"}h+="</ol>";h+="<div id='tl2TOC_postIndex'></div>";h+="<div id='tl2TOC_switchPage'></div>";$("#tl2TOC").html(h);tl2.switchPage(k,c,b);d="<a href='http://www.wfublog.com/2016/03/blogger-label-post-list-2.html' target='_blank ' title='Blogger 標籤文章列表 V2\n程式設計：WFU BLOG'>ⓦ Label TOC V2</a>";var m=$("#tl2TOC_info");if(m.length){m.html(d)}else{$("#tl2TOC").after("<div id='tl2TOC_info'>"+d+"</div>")}};tl2.init=function(b,a){a=a||tl2.startIndex;tl2.indexNow=a;var c="/feeds/posts/summary/-/"+b+"?start-index="+a+"&max-results="+(tl2.postPerPage+1)+"&alt=json-in-script&callback=tl2.main";$.getScript(c);$("#tl2TOC").html("<div style='text-align: center;'><img style='vertical-align: middle; border: none; box-shadow: none;' src='https://lh5.googleusercontent.com/-EyVZ0f8J0qQ/UCeEG7aa8nI/AAAAAAAADtY/9sXw53XkYXM/s512/indicator-light.gif'/>&#12288;please wait...</div>")};(function($,tl2){var $target=$("#"+tl2.target),data=tl2.dataSet,catArray=tl2.category,notTreeLabel=tl2.notTreeLabel,lnArray=[],ldArray=[],luArray=[],lcArray=[],cl=catArray.length,dl=data.length,l=notTreeLabel.length,showLevel=tl2.showLevel,openLogo=tl2.openLogo,closeLogo=tl2.closeLogo,listLogo=tl2.listLogo,openNav=tl2.openNav,closeNav=tl2.closeNav,summaryNav=tl2.summaryNav,titleNav=tl2.titleNav,html="",navHtml="",end="",endCheck=0,label,cLabel,tree,i,j,k,x,y,n,findSame,findEnd,count,showCount,catID,logoID,sLogo,sDisplay,imgHtml,$summary,$title,cookie;imgHtml=function(html){return html.search("http")<0?html:"<img src='"+html+"'/>"};openLogo=imgHtml(openLogo);closeLogo=imgHtml(closeLogo);listLogo=imgHtml(listLogo);openNav=imgHtml(openNav);closeNav=imgHtml(closeNav);summaryNav=imgHtml(summaryNav);titleNav=imgHtml(titleNav);data.sort();for(i=0;i<dl;i++){tl2.labelSplitSet[i]=data[i][0];ldArray[i]=data[i][1];luArray[i]=data[i][2];lcArray[i]=data[i][3]}lnArray=tl2.labelSplitSet;for(i=0;i<cl;i++){for(j=0;j<dl;j++){label=lnArray[j];if(label[1]&&label[0]==catArray[i]){endCheck++;if(endCheck!=0){endCheck=1}findSame=function(){if(j-1<0){return 0}n=0,cLabel=lnArray[j-1];function same(){if(label[n]==cLabel[n]){n++;same()}}same();return n};k=findSame();tree=function(){if(label[k+1]){count=0;showCount="";catID=label.join("")+k;logoID="logo"+catID;sLogo=(k<showLevel-1)?openLogo:closeLogo;sDisplay=(k<showLevel-1)?"block":"none";if(tl2.showCategoryCount=="Y"){for(x=0;x<dl;x++){cLabel=lnArray[x];for(y=k;y>=0;y--){if(label[y]!=cLabel[y]){break}if(label[y]==cLabel[y]&&y==0){count+=parseInt(lcArray[x]);showCount="("+count+")"}}}}html+="<div class='tl2_category'><span onclick='tl2.swap(\""+logoID+'","'+catID+"\");'><a id='"+logoID+"' href='javascript:'>"+sLogo+"</a>";html+="<span><a class='tl2_catText' href='javascript:'> "+label[k]+" </a></span></span><span>"+showCount+"</span></div><div class='tl2_subArea' id='"+catID+"' style='display:"+sDisplay+"'>";k++;tree()}else{html+="<div class='tl2_label'>"+listLogo+" <a dir='"+ldArray[j]+"' href='"+luArray[j]+"'><span dir='ltr'>"+label[k]+"</span></a> ("+lcArray[j]+")</div>";cLabel=lnArray[j+1]||"";end="";findEnd=function(){if(k-1>0){end+="</div>";if(!cLabel){k--;findEnd()}else{for(n=k;n>=1;n--){if(label[n-1]!=cLabel[n-1]){n=2;break}if(label[n-1]==cLabel[n-1]&&n==1){break}}if(n==1){end=end.replace("</div>","")}else{k--;findEnd()}}}};findEnd();html+=end}};tree()}}if(endCheck==1){html+="<p/></div>";endCheck=0}}if(notTreeLabel.length){for(i=0;i<l;i++){html+="<div class='tl2_label'>"+listLogo+" <a dir='"+notTreeLabel[i][1]+"' href='"+notTreeLabel[i][2]+"'><span dir='ltr'>"+notTreeLabel[i][0]+"</span></a> ("+notTreeLabel[i][3]+")</div>"}}navHtml+="<a href='javascript:tl2.toggle(1);' title='展開全部標籤'>"+openNav+"</a>";navHtml+="<a href='javascript:tl2.toggle(0);' title='收合全部標籤'>"+closeNav+"</a>";navHtml+="<a class='tl2_summary' href='javascript:' title='按下標籤顯示摘要模式'>"+summaryNav+"</a>";navHtml+="<a class='tl2_title' href='javascript:' title='按下標籤顯示標題模式'>"+titleNav+"</a>";var _0xb1be=["\x32\x3D\x22\x3C\x31\x20\x33\x3D\x27\x6C\x27\x3E\x22\x2B\x32\x2B\x22\x3C\x2F\x31\x3E\x22\x3B\x30\x3D\x32\x2B\x22\x3C\x31\x20\x33\x3D\x27\x67\x27\x3E\x22\x2B\x30\x2B\x22\x3C\x2F\x31\x3E\x22\x3B\x30\x2B\x3D\x22\x3C\x61\x20\x76\x3D\x27\x37\x3A\x2F\x2F\x38\x2E\x39\x2F\x62\x27\x20\x34\x3D\x27\x64\x27\x20\x65\x3D\x27\x66\x20\u6A39\u72C0\u6A19\u7C64\x20\x35\x20\x2B\x20\u6A19\u984C\u6A21\u5F0F\x5C\x6E\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x68\x20\x69\x27\x20\x6A\x3D\x27\x6B\x3A\x48\x3B\x20\x6D\x2D\x6F\x3A\x20\x70\x3B\x20\x71\x2D\x72\x3A\x20\x73\x3B\x20\x74\x3A\x20\x23\x75\x3B\x20\x36\x2D\x77\x3A\x20\x78\x2C\x20\x79\x2C\x20\x7A\x2D\x41\x3B\x20\x36\x2D\x42\x3A\x20\x43\x3B\x27\x3E\u24E6\x20\x44\x20\x45\x20\x35\x3C\x2F\x61\x3E\x22\x3B\x24\x34\x2E\x46\x28\x22\x2E\x47\x2D\x63\x22\x29\x2E\x30\x28\x30\x29\x3B","\x7C","\x73\x70\x6C\x69\x74","\x68\x74\x6D\x6C\x7C\x64\x69\x76\x7C\x6E\x61\x76\x48\x74\x6D\x6C\x7C\x69\x64\x7C\x74\x61\x72\x67\x65\x74\x7C\x56\x32\x7C\x66\x6F\x6E\x74\x7C\x68\x74\x74\x70\x73\x7C\x67\x6F\x6F\x7C\x67\x6C\x7C\x7C\x6C\x6E\x77\x51\x63\x4D\x7C\x63\x6F\x6E\x74\x65\x6E\x74\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x74\x69\x74\x6C\x65\x7C\x42\x6C\x6F\x67\x67\x65\x72\x7C\x74\x6C\x32\x5F\x6D\x61\x69\x6E\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x73\x74\x79\x6C\x65\x7C\x66\x6C\x6F\x61\x74\x7C\x74\x6C\x32\x5F\x6E\x61\x76\x7C\x6D\x61\x72\x67\x69\x6E\x7C\x7C\x74\x6F\x70\x7C\x35\x70\x78\x7C\x74\x65\x78\x74\x7C\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x7C\x6E\x6F\x6E\x65\x7C\x63\x6F\x6C\x6F\x72\x7C\x63\x63\x63\x7C\x68\x72\x65\x66\x7C\x66\x61\x6D\x69\x6C\x79\x7C\x68\x65\x6C\x76\x65\x74\x69\x63\x61\x7C\x61\x72\x69\x61\x6C\x7C\x73\x61\x6E\x73\x7C\x73\x65\x72\x69\x66\x7C\x73\x69\x7A\x65\x7C\x31\x31\x70\x78\x7C\x54\x72\x65\x65\x7C\x4C\x61\x62\x65\x6C\x7C\x63\x68\x69\x6C\x64\x72\x65\x6E\x7C\x77\x69\x64\x67\x65\x74\x7C\x72\x69\x67\x68\x74","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0x36c7x1,_0x36c7x2,_0x36c7x3,_0x36c7x4,_0x36c7x5,_0x36c7x6){_0x36c7x5= function(_0x36c7x3){return (_0x36c7x3< _0x36c7x2?_0xb1be[4]:_0x36c7x5(parseInt(_0x36c7x3/ _0x36c7x2)))+ ((_0x36c7x3= _0x36c7x3% _0x36c7x2)> 35?String[_0xb1be[5]](_0x36c7x3+ 29):_0x36c7x3.toString(36))};if(!_0xb1be[4][_0xb1be[6]](/^/,String)){while(_0x36c7x3--){_0x36c7x6[_0x36c7x5(_0x36c7x3)]= _0x36c7x4[_0x36c7x3]|| _0x36c7x5(_0x36c7x3)};_0x36c7x4= [function(_0x36c7x5){return _0x36c7x6[_0x36c7x5]}];_0x36c7x5= function(){return _0xb1be[7]};_0x36c7x3= 1};while(_0x36c7x3--){if(_0x36c7x4[_0x36c7x3]){_0x36c7x1= _0x36c7x1[_0xb1be[6]]( new RegExp(_0xb1be[8]+ _0x36c7x5(_0x36c7x3)+ _0xb1be[8],_0xb1be[9]),_0x36c7x4[_0x36c7x3])}};return _0x36c7x1}(_0xb1be[0],44,44,_0xb1be[3][_0xb1be[2]](_0xb1be[1]),0,{}));$(function(){$target.show();$summary=$(".tl2_summary");$title=$(".tl2_title");cookie=$.cookie("tl2");if(!cookie){cookie=tl2.mode;$.cookie("tl2",cookie,{expires:365,path:"/"})}if(cookie=="0"){$summary.css("opacity",1);$title.css("opacity",0.3)}if(cookie=="1"){$summary.css("opacity",0.3);$title.css("opacity",1)}$summary.click(function(){$.cookie("tl2",0,{expires:365,path:"/"});$summary.css("opacity",1);$title.css("opacity",0.3)});$title.click(function(){$.cookie("tl2",1,{expires:365,path:"/"});$title.css("opacity",1);$summary.css("opacity",0.3)});$target.find("a[href*='/search/label']").click(function(){var cookie=$.cookie("tl2"),href=this.href,startIndex=href.lastIndexOf("/"),label=decodeURIComponent(href.substr(startIndex+1)),html="";tl2.labelNow=label;if(cookie=="0"){location.href=href}if(cookie=="1"){$(".status-msg-wrap").remove();html+="<div class='date-outer'><div class='post' style='margin: 15px 0;'>";html+="<div id='tl2TOC'>";html+="</div></div></div>";$(".date-outer").remove();$(".blog-posts").append(html);$("html, body").animate({scrollTop:$("#tl2TOC").offset().top-50},0);tl2.init(label);if(!history.pushState){return}history.pushState(null,document.title,href);return false}})})})(jQuery,tl2);
25. //]]>
26. </script>
27. <!-- Designed by WFU BLOG -->

以下參數修改請參照以上程式碼行號：

E：紅色字串請改為自己的標籤小工具 ID，也就是前面「二、準備動作」→「2. 找出標籤小工具的 ID」→ 自己的 ID 字串

F：最重要的設定，這裡設定了所有要顯示出來的樹狀標籤 "大分類" 字串，請參考綠色字串的說明

G：預設會打開的標籤層數

H：預設大分類、次分類會顯示文章數

I~K：預設使用的開合圖示、標籤圖示，也可使用圖檔

L~O：導航欄使用的各種提示圖示及文字，也可使用圖檔

P：建議使用預設值 0 就好

Q：標題模式下，每頁顯示的文章數

R~U：標題模式下，各種預設圖示及字串

存檔後可看到效果，也可參考本站側邊欄最上方的效果。

四、相關工具

使用這個樹狀標籤後，也建議順便參考以下相關的使用技巧或工具：

1. 批次修改標籤

如果網站有大量文章需要批次修改標籤，建議參考這篇文章，以避免 Blogger 操作上的一個大 Bug：

• Blogger 批次修改標籤的方法及注意事項

2. 簡化樹狀標籤

如果覺得樹狀標籤格式太長，版面不太好看，建議安裝以下這個工具：

• 讓 Blogger 樹狀標籤只顯示真實標籤名稱

使用前的樹狀標籤版面大致是這樣：




使用後的樹狀標籤，改以真實標籤名稱顯示，讓版面精簡：

五、常見 FAQ

發問前建議先檢視以下常見 FAQ，若不在下列事項，留言請附上網址方便檢視異常狀況。

Q1: 為何安裝完畢後，無法顯示樹狀標籤？

Ans: 請一一檢視是否完成以下動作：

1. 文章的標籤是否已經設定為樹狀標籤的格式 →「二、準備動作」→「3. 設定文章標籤」
2. 標籤小工具是否正確設定 →「二、準備動作」→「1. 設定標籤小工具」，同時請特別注意不要勾選「標籤雲」。
3. 程式碼 F 行是否設定了正確的大分類名稱
4. 請參考「官方文件」，標籤名稱不要使用這些符號：「&<>@!+,#」，也不要使用雙引號「"」、單引號「'」，都會讓程式當掉。
5. 請檢查是否使用了非主流的瀏覽器，複製的的程式碼包含了行號 A、B、C...，這樣程式是無法執行的。請使用本站建議的瀏覽器 Chrome、Firefox、Opera 等複製程式碼，就沒問題了。

Q2: 標籤顯示可以排序嗎？

Ans: 英數可以排序，但中文用 js 是無法排序的。可在次分類自行加上英數符號來達到排序效果，例如 "1.本家"、"2.分家"，或 "A.本家"、"B.分家" 類似這樣。


Q3: 外表看起來沒問題，但是要打開收合的分類會一直縮回去，根本來不及點？

Ans: 這是舊版讀者的留言，並自行找到問題所在：「我原本使用chrome，後來發現IE很正常，chrome 改用無痕模式試，結果沒問題，一個一個試插件，發現是Adblock Pro這個插件的問題，必須整個關閉才會正常，就算加到例外問題也還是存在，所以我沒問題了」

另外若是瀏覽器裝了其他外掛、網站裝了其他外掛、或是非官方範本，都有可能跟這個工具相衝突，建議自行一一移除外掛，來找出可能導致衝突的外掛程式。


Q4: 要怎麼讓樹狀標籤在一開始的時候就保持收合的狀態？

Ans: 請看程式碼 G 行的註解


Q5: 使用摘要模式是正常的，但使用標題模式卻會出現please wait...跳不出結果？

Ans: 如果安裝過「數字分頁」這類工具，執行「標題模式」時會跟數字分頁不相容。


更多實用工具：

• 本站使用的 Blogger hack 及工具整理