(雖然這只是我部落格的第二篇文章而已XD)
但總是要防範於未然呀~ 為了方便自己以及讀者觀看自己喜歡的分類~
那要如何分的好又分的巧呢??剛接觸Blogger於是便在網路搜尋相關文章
拜谷哥大神所賜找到一篇 Blogger文章分類-多層樹狀標籤
按照步驟一步一步的操作順便做個筆記~
step 1.因為是新的Blogger所以要到後台 → 版面配置 → 新增小工具 → 安裝標籤小工具
step 2.接著到後台 →範本 → 編輯HTML搜尋"Label1" 這個字串就能找到這個小工具的區塊
可以找到<b:widget id='Label1' locked='false' title='文章分類' type='Label'>
注意：title='文章分類' 是我在安裝標籤小工具時所輸入的標題。
step 3. 安裝「全部開合」功能：往下幾行就能找到字串 <h2><data:title/></h2>
接著新增以下紅字部分的字串到標籤中
<h2><div id="treeLabel_toggle"><a href="http://wayne-fu.blogspot.com/2013/01/multi-tree-label-update.html" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg46TiFqCNJAJasI0_NxayuEEfGj3PjEQLTz_F8Ti7Xk5rot3VsiIHrz5qqvhoIcmlTt0fvwR3lkMsaCs3hbENuOa5RTokswK95l4OmpVKEbHKOfdLl4R3IpZXvqczcC5f8SphjOtcYdDaB/s1600/info.png"/></a></div><data:title/></h2>
step 4. 安裝主程式碼，從step 3.往下找應該可以看到如下幾行程式碼
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <b:if cond='data:display == "list"'> | |
| <ul> | |
| <b:loop values='data:labels' var='label'> | |
| <li> | |
| <b:if cond='data:blog.url == data:label.url'> | |
| <span expr:dir='data:blog.languageDirection'><data:label.name/></span> | |
| <b:else/> | |
| <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> | |
| </b:if> | |
| <b:if cond='data:showFreqNumbers'> | |
| <span dir='ltr'>(<data:label.count/>)</span> | |
| </b:if> | |
| </li> | |
| </b:loop> | |
| </ul> | |
| <b:else/> | |
| <b:loop values='data:labels' var='label'> | |
| <span expr:class='"label-size label-size-" + data:label.cssSize'> | |
| <b:if cond='data:blog.url == data:label.url'> | |
| <span expr:dir='data:blog.languageDirection'><data:label.name/></span> | |
| <b:else/> | |
| <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> | |
| </b:if> | |
| <b:if cond='data:showFreqNumbers'> | |
| <span class='label-count' dir='ltr'>(<data:label.count/>)</span> | |
| </b:if> | |
| </span> | |
| </b:loop> | |
| </b:if> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="treeLabel_main" style="font-family: Arial;"><span id="treeLabel_host" class="item-control blog-admin"></span></div> | |
| <style> | |
| #treeLabel_toggle { | |
| float: right; | |
| font-family: Arial; | |
| } | |
| #treeLabel_toggle a, #treeLabel_main a { | |
| font-size: 10pt; | |
| text-decoration: none; | |
| } | |
| .treeLabel_catText a:link { | |
| color: #0b5394; /* 請填入大分類的顏色, 如果要使用系統預設的超連結顏色, 可刪除此行 */ | |
| font-weight: bold; | |
| } | |
| .treeLabel_catText a:hover { | |
| color: #b8b832; /* 請填入滑鼠移過大分類要顯示的顏色, 如果要使用系統預設的超連結顏色, a:link 與 a:hover 的顏色都不要設定 */ | |
| } | |
| .treeLabel_category { /* 這裡可設定大分類名稱區塊的 CSS */ | |
| font-size: 10pt; | |
| margin-top: 4px; | |
| } | |
| .treeLabel_label { /* 這裡可設定標籤名稱區塊的 CSS */ | |
| font-size: 10pt; | |
| margin-top: 2px; | |
| } | |
| </style> | |
| <script> | |
| //<![CDATA[ | |
| var treeLabel = { | |
| category: ["電腦", "休閒", "閱讀"], // 雙引號內填入大分類名稱, 每個大分類用小寫逗號隔開, 最後一個大分類之後不可有逗號; 填入順序就是顯示的順序 | |
| showLevel: 2, // 預設打開的標籤層數, 填入 1 為全部收起的狀態 | |
| showCategoryCount: "Y", // 大分類若不顯示文章數, 請填入 "N" | |
| openLogo: "▼", // 如使用圖檔,雙引號內請填入 http 開頭的網址 | |
| closeLogo: "►", // 如使用圖檔,雙引號內請填入 http 開頭的網址 | |
| listLogo: "⇢", // 如使用圖檔,雙引號內請填入 http 開頭的網址 | |
| margin: 10, // 縮排的像素值 | |
| openText: "全展開", // 可改為自訂文字, 不顯示文字請改為 "" | |
| closeText: "全收合", // 可改為自訂文字, 不顯示文字請改為 " " | |
| interval: "Y" // 預設每個大分類之間空一行, 如不要空行請填 "N" | |
| }; | |
| //]]> | |
| treeLabel.data = []; | |
| treeLabel.labelName = []; | |
| <b:loop values='data:labels' var='label'> | |
| (function () { | |
| var a = "<data:label.name/>", | |
| b = a.split("-"), | |
| l = b.length, | |
| data = [], | |
| i; | |
| //<![CDATA[ | |
| for(i=0;i<l;i++){if(i!=0&&i!=l-1&&b[i].search(" ")!=0){b[i]=" "+b[i]}data[i]=b[i]}; | |
| //]]> | |
| treeLabel.data.push([data, "<data:blog.languageDirection/>", "<data:label.url/>", "<data:label.count/>"]); | |
| } )(); | |
| </b:loop> | |
| //<![CDATA[ | |
| treeLabel.dg=function(a){return document.getElementById(a)};treeLabel.toggle=function(n){var k=treeLabel.dg,o=treeLabel.labelName,b=o.length,p=treeLabel.openLogo,h=treeLabel.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"}}}}};treeLabel.swap=function(c,d){var f=treeLabel.dg,a=f(d),e=f(c),b=treeLabel.openLogo,g=treeLabel.closeLogo;if(!e.firstChild.src){e.innerHTML=(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(){var l=treeLabel.dg,S=treeLabel.data,F=treeLabel.category,R=[],D=[],u=[],f=[],z=F.length,g=S.length,E=treeLabel.showLevel,v=treeLabel.openLogo,e=treeLabel.closeLogo,N=treeLabel.listLogo,d=treeLabel.margin,I=(treeLabel.interval=="Y")?"<p/>":"",w="",t="",m="",a=0,J,A,o,c=l("treeLabel_host"),Q=(window.getComputedStyle)?(window.getComputedStyle(c).display=="none")?"<a href='http://wayne-fu.blogspot.com/2013/01/multi-tree-label-update.html' target='_blank'><img src='http://2.bp.blogspot.com/-nn8uU4LhVtM/T8cdzYQnUZI/AAAAAAAACos/JcGy8V05y84/s1600/info.png' title='Blogger 多層樹狀標籤\n程式設計：WFU BLOG' style='width: 20px; vertical-align: middle;'/></a>":"":"",P,O,M,C,B,K,L,s,H,q,G,h,b,r;v=(v.search("http")<0)?v:"<img src='"+v+"' style='vertical-align: middle;'/>";e=(e.search("http")<0)?e:"<img src='"+e+"' style='vertical-align: middle;'/>";N=(N.search("http")<0)?N:"<img src='"+N+"' style='vertical-align: middle;'/>";S.sort();for(P=0;P<g;P++){treeLabel.labelName[P]=S[P][0];D[P]=S[P][1];u[P]=S[P][2];f[P]=S[P][3]}R=treeLabel.labelName;for(P=0;P<z;P++){for(O=0;O<g;O++){J=R[O];if(J[1]&&J[0]==F[P]){a++;if(a!=0){a=1}L=function(){if(O-1<0){return 0}K=0,A=R[O-1];function i(){if(J[K]==A[K]){K++;i()}}i();return K};M=L();o=function(){if(J[M+1]){H=0;q="";G=J.join("")+M;h="logo"+G;b=(M<E-1)?v:e;r=(M<E-1)?"block":"none";if(treeLabel.showCategoryCount=="Y"){for(C=0;C<g;C++){A=R[C];for(B=M;B>=0;B--){if(J[B]!=A[B]){break}if(J[B]==A[B]&&B==0){H+=parseInt(f[C]);q="("+H+")"}}}}w+="<div class='treeLabel_category'><span onclick='treeLabel.swap(\""+h+'","'+G+"\");'><a id='"+h+"' href='javascript:' style='margin-left:"+M*d+"px;'>"+b+"</a>";w+="<span class='treeLabel_catText'><a href='javascript:'> "+J[M]+" </a></span></span><span>"+q+"</span></div><div id='"+G+"' style='display:"+r+"'>";M++;o()}else{w+="<div class='treeLabel_label' style='margin-left:"+M*d+"px;'>"+N+" <a dir='"+D[O]+"' href='"+u[O]+"'><span dir='ltr'>"+J[M]+"</span></a> ("+f[O]+")</div>";A=R[O+1]||"";m="";s=function(){if(M-1>0){m+="</div>";if(!A){M--;s()}else{for(K=M;K>=1;K--){if(J[K-1]!=A[K-1]){K=2;break}if(J[K-1]==A[K-1]&&K==1){break}}if(K==1){m=m.replace("</div>","")}else{M--;s()}}}};s();w+=m}};o()}}if(a==1){w+=I+"</div>";a=0}}l("treeLabel_main").innerHTML=w;t="<a href='javascript:treeLabel.toggle(1);'>"+v+"</a><span class='treeLabel_catText'><a href='javascript:treeLabel.toggle(1);'>"+treeLabel.openText+"</a></span> ";t+="<a href='javascript:treeLabel.toggle(0);'>"+e+"</a><span class='treeLabel_catText'><a href='javascript:treeLabel.toggle(0);'>"+treeLabel.closeText+"</a></span> ";if(navigator.userAgent.indexOf("MSIE")<0){t+=Q}l("treeLabel_toggle").innerHTML=t})(); | |
| //]]> | |
| </script> |
完成了分類測試一下~奇怪怎麼沒有出現分類??
如果你有參照原文章的話，要注意標籤分類命名規則：
必須先將部落格所有文章的標籤改為「AAA-BBB-CCC-DDD」的標籤格式
如果我的分類並未分這麼多階層，只需改為「AAA-BBB」即可，例圖：
儲存後，文章分類就出現了^^
打完收工~以上感謝原作者Wayne FU提供的完整作法
本文是照著原文操作並做下紀錄。原出處
GOOD
回覆刪除