2015年9月21日 星期一

在 Google Blogger 中建立樹狀標籤分類


  1. 後台→版面設定→清除所有標籤 Label
  2. 重新命名文章標籤名稱為「第一層-第二層-第三層」,可以保留原標籤,例如… 文章: 筆電音量快捷鍵設定,標籤:Debian, Laptop, Linux-Debian-基礎操作及運用
  3. 至版面設定新增一個小工具「標籤」
  4. 後台 → 範本 → 修改 HTML→跳至小工具→Label1,找到:
    <b:widget id='Label1' locked='false' title='分類' type='Label'> 

    展開區塊,再找到:
     <h2><data:title/></h2> 

    將 <h2>.......</h2> 修改為:
     <h2><div id="treeLabel_toggle"><a href="http://wayne-fu.blogspot.com/2013/01/multi-tree-label-update.html" target="_blank"><img class="post-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXu5214D1Tmf4cGR2DdioycBy4zCZtZMBdQnRs-aiyFminbHan_oTcq3oQ8zzN-WE9cVzy7XxxY6jXOwz5PBLE8ggwdIowJhLjW_SsEaXOQreuzUw2NjKdfdL0R6bI-0LlJBu9CCQE2ES9/s1600/info.png"/></a></div><data:title/></h2> 
  5. 安裝程式碼,改完 <h2>.......</h2> 後,再往下三行找到:
     <b:if cond='data:display == &quot;list&quot;'>
          <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='&quot;label-size label-size-&quot; + 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> 
    修改為下段,並再做細部修改:
     <div id='treeLabel_main' style='font-family: Arial;'><span class='item-control blog-admin' id='treeLabel_host'/></div>
    <style>
    #treeLabel_toggle {
      float: right;
      font-family: Arial;
    }
    #treeLabel_toggle a, #treeLabel_main a {
      font-size: 10pt;
      text-decoration: none;
    }
     
    /*查看色碼表 http://rhinejo.myweb.hinet.net/home/color/color-cord.html */
    .treeLabel_catText a:link {
    /*  color: #0b5394; /* 請填入大分類的顏色, 如果要使用系統預設的超連結顏色, 可刪除此行 */
      font-weight: bold;
    }
    .treeLabel_catText a:hover {
    /*  color: #b8b832;  /* 請填入滑鼠移過大分類要顯示的顏色, 如果要使用系統預設的超連結顏色, a:link 與 a:hover 的顏色都不要設定 */
      color: #FEFF91;
    }
     
    .treeLabel_category {  /* 這裡可設定大分類名稱區塊的 CSS */
      font-size: 12pt;
      margin-top: 4px;
    }
    .treeLabel_label {  /* 這裡可設定標籤名稱區塊的 CSS */
      font-size: 10pt;
      margin-top: 2px;  
    }
    </style>
     
    <script>
    //<![CDATA[
    var treeLabel = {
      category: ["Blog Usage", "Blender", "Embedded Boards", "Linux", "Programs", "Windows", "3D Printer"], // 雙引號內填入大分類名稱, 每個大分類用小寫逗號隔開, 最後一個大分類之後不可有逗號; 填入順序就是顯示的順序
      showLevel: 1,  // 預設打開的標籤層數, 填入 1 為全部收起的狀態
      showCategoryCount: "Y",  // 大分類若不顯示文章數, 請填入 "N"
      openLogo: "▼",  // 如使用圖檔,雙引號內請填入 http 開頭的網址
      closeLogo: "►",  // 如使用圖檔,雙引號內請填入 http 開頭的網址
      listLogo: "⇢",  // 如使用圖檔,雙引號內請填入 http 開頭的網址
      margin: 10,  // 縮排的像素值
      openText: "Open",  // 可改為自訂文字, 不顯示文字請改為 ""
      closeText: "Close",  // 可改為自訂文字, 不顯示文字請改為 "&nbsp;"
      interval: "Y"  // 預設每個大分類之間空一行, 如不要空行請填 "N"
    };
    //]]>
     
    treeLabel.data = [];
    treeLabel.labelName = [];
     
    <b:loop values='data:labels' var='label'>
     
    (function ()  {
      var a = &quot;<data:label.name/>&quot;,
          b = a.split(&quot;-&quot;),
          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, &quot;<data:blog.languageDirection/>&quot;, &quot;<data:label.url/>&quot;, &quot;<data:label.count/>&quot;]);
    } )();
     
    </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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXu5214D1Tmf4cGR2DdioycBy4zCZtZMBdQnRs-aiyFminbHan_oTcq3oQ8zzN-WE9cVzy7XxxY6jXOwz5PBLE8ggwdIowJhLjW_SsEaXOQreuzUw2NjKdfdL0R6bI-0LlJBu9CCQE2ES9/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>
  6. Reference http://www.wfublog.com/2013/01/multi-tree-label-update.html#more
    http://lester116.blogspot.tw/2013/08/blogger.html

沒有留言:

張貼留言