[教學]5分鐘讓你Blogger的標籤改成樹狀階層式

1.打開【版面配置】,【新增小工具】加入【標籤】這個小工具, 設定為用按字母排序。

2.打開【範本】選擇【編輯HTML】,找到下列的字串《或按下【ctrl】鍵 +【 F 】鍵(Mac 請按下CMD + F ),搜尋關鍵字 標籤 》。
<b:widget id="Label1" locked="false" title="標籤" type="Label">
一直到
一直到
一直到
</b:widget>
3.將上述範圍內的內容改為:
<b:widget id='Label1' locked='false' title='文章分類' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<script>
var label_tree= new Object();

function tn(tag)
{
    return tag.substring(1,tag.length-1);
}

function build_node(tree,idx,cnt)
{
    if(!tree[idx[0]]){
        tree[idx[0]]=new Object();
        tree[idx[0]]['_cnt']=0;
        tree[idx[0]]['_item']=new Array();
    }
    tree[idx[0]]['_cnt'] = parseInt(tree[idx[0]]['_cnt']) + parseInt(cnt);      
    if(idx.length==1){
        return tree[idx[0]];      
    }
    return build_node(tree[idx[0]],idx.slice(1),cnt);
}
function add_label(_name,_cnt,_url,_dir)
{
    var e1 = new RegExp("\\[(.+?)\\]","g");
    var e = new RegExp("\\[(.+)\\]","g");
    var m = _name.match(e);
    var tag = _name;
   
    var obj=new Object();
    obj['tag']=_name;
    obj['cnt']=_cnt;
    obj['dir']=_dir;
    obj['url']=_url;
    if(m){
        obj['tag']= _name.substring(m[0].length,_name.length);              
        var m1 = _name.match(e1);
        if(m1){
            node=build_node(label_tree,m1,_cnt);
            if(node){          
                node['_item'].push(obj);
            }
        }      
    }
    else{
        if(!label_tree['_item']){
            label_tree['_item']=new Array();
        }
        label_tree['_item'].push(obj);
    }
}
function menu_exp(id)
{
        var ul=document.getElementById("ul_"+id);
        var li=document.getElementById("li_"+id);
        if (ul.style.display=="none"){
            ul.style.display="block"
            li.style.backgroundImage="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjCfez1VfZdW08LkzJFHqk1e-uGA1LG6iDS1Cqal1j8biSKtKXkvKXxzhKs3L_sU6NNaMtCdxg5kxjQZte2op-Nm6NakFGW6Y1W6bkX6DmSzJMp4MMs7p_CeBi2t4JVxV8HzmB9HR206U/)"
        }
        else {
            ul.style.display="none"
            li.style.backgroundImage="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvgldBEOC3UZ9SaSMPkRLX_PaoDK4jUrWwwdwYkkrVq7CqyvdsuEnz3wNpjJ19myDHU8JhzotijMU1H8WEKVhFIwfNjyhxHelKkeM7-aH8gfJ-Rs-osKhn4N7XCHI1eqvR-qU1FgnOUEk/)"
        }      
}
function draw_obj(obj)
{
    document.write("&lt;li style='padding-left: 0px&gt;'");
    document.write("&lt;img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3jgSqm2iBwGaVF-hbpK-vM4u9VmlEJB5NkSVcRsrSIiVoL6-NheMZAquFllvytmD1Ppj5rMGMo8dIP4i6lYeyeixrZz-74V7VPZBW_JstTeEznWS6iCUPmGVsHYrXjLAP9pWYwkDikvA/s1600/icon-yellow-bullet.png' /&gt;&lt;a dir='"+obj['dir']+"' href='"+obj['url']+"'&gt;"+obj['tag']+"&lt;/a&gt;");
    document.write("&lt;span dir='"+obj['dir']+"'&gt;("+obj['cnt']+")&lt;/span&gt;");
    document.write("&lt;/li&gt;\n");
}
function draw_tree(tree)
{
    for(var tag in tree){
        if(tag!='_item'&amp;&amp; tag!='_cnt'){
            var rid = Math.random();
            document.write("&lt;li class=submenu id=li_"+rid+" onclick=menu_exp('"+rid+"'); style='font-weight:bold;padding-left: 20px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvgldBEOC3UZ9SaSMPkRLX_PaoDK4jUrWwwdwYkkrVq7CqyvdsuEnz3wNpjJ19myDHU8JhzotijMU1H8WEKVhFIwfNjyhxHelKkeM7-aH8gfJ-Rs-osKhn4N7XCHI1eqvR-qU1FgnOUEk/) no-repeat left 0px;cursor: pointer'&gt;");
            document.write(tn(tag));
            document.write("("+tree[tag]['_cnt']+")");
            document.write("&lt;/li&gt;");
            document.write("&lt;ul id=ul_"+rid+" style='display:none;padding-left: 20px'&gt;");
            draw_tree(tree[tag]);
            document.write("&lt;/ul&gt;\n");
        }
    }
    if(tree['_item']){
        for(var i=0;i &lt; tree['_item'].length;i++){
            draw_obj(tree['_item'][i]);
        }
    }
       
}
</script>
<b:loop values='data:labels' var='label'>
<script>
    add_label('<data:label.name/>','<data:label.count/>','<data:label.url/>','<data:blog.languageDirection/>');
</script>
</b:loop>
      <ul>
      <script>
          draw_tree(label_tree);
      </script>
      </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
4.按下【儲存範本】就完成了將Blogger的標籤改成樹狀階層式(1層變3層)。
以上程式碼第一列的 文章分類 四個字為此小工具所顯示的名稱,可改成自己想顯示的名稱。

重點是在設定標籤名稱時,在【輸入新的標籤】時,一定要使用以下的格式
[分類名稱1][分類名稱2]標籤名稱 來定義標籤。

以下範例是用[旅遊][台灣]標籤名、[旅遊][日本]標籤名,做的效果
未打開標籤

打開[旅遊]這層標籤

打開[台灣]這層標籤
推薦網誌:宜蘭傳藝中心門票限時優惠買1送1 - 小美輕鬆旅

熱門排行

2024.2.11 friDay影音序號免費體驗

用電腦玩手機遊戲較不傷眼睛,乾淨輕量版Android模擬器推薦

置頂視窗釘選最上層顯示小工具DeskPins Win10、Win11

移除百度(Baidu)搜索,被百度綁架的解決方法

網路芳鄰電腦消失解決方法win10

不用到玉山銀行開戶,直接提領PayPal美金到台幣或外幣帳戶

免費賺比特幣7個網站推薦.錢包軟體下載及使用教學

friDay影音取消訂閱及刪除信用卡資料

2024.3.22 myVideo 序號免費體驗