Blogger 階層式標籤語法

很高興找到了 Gormit's 原型製作 所分享的 Blogger 文章分類工具 (第二版)

讓我的標籤（文章分類），可以階層的方式呈現！

以下引述 Gormit's 原型製作 的教學文章

-------------------------------------------------------

第二版,現在可以支援多層次的分類,並且可以展開/關閉分類
分類仍以中括號作為分類的標籤



使用　[分類1][分類2]標籤　的格式來定義標籤即可

安裝如同第一版的步驟

步驟一
打開版面配置,加入標籤這個小工具, 一定要設定為用按字母排序
顯示設定不重要等下一步的script只會以清單表現

步驟二
選擇"修改HTML" 並鉤選"展開小裝置範本"
找到步驟一新加的小工具 找像下列的字串


一直到
為止


步驟三
將上述範圍內的內容改為:

<b:widget id='Label3' locked='false' title='文章分類(v2)' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<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/AVvXsEhdytmVq5cd43MACqcvhDqmOQtGSw8zGI3rigI6pqugM2n7zYXeN23JMHOxwjm7IF5_MjPUzotfCsSk2WW4RVQLgpibE9GnfIwaykSx4bDmuaARRVwX6PdLZjNn97Pp8vz38cBmVQhuXRI/)"
        }
        else {
            ul.style.display="none"
            li.style.backgroundImage="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHFSgKycGacZr8WUj1zYIoQOMBlI_PrMCDmWUmamB6dRJtk663mhFeXxeZmVqQbgqCo95e7u9nzcS3PEgVWsBBo8nrbHA2vPqalmsQoB2Nl-vrZZVDH384vfd2nRQjFjZlh3tyMBrC9ig/)"
        }        
}
function draw_obj(obj)
{
    document.write("<li style='padding-left: 0px>'");
    document.write("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNF85YYvzThwnq-1CDpctaOOHI_m67TI1xgDWytXH-SB3q2u9uI0VzQldTeSgm965eC7b9D5Qi4UvojG9xPKnJFUxc0Mys1aA74zZSFU-RVLKo5essLMYVjAhyphenhyphen2_-sHWbhkGeIeWTEEUM/s1600/icon-yellow-bullet.png' /><a dir='"+obj['dir']+"' href='"+obj['url']+"'>"+obj['tag']+"</a>");
    document.write("<span dir='"+obj['dir']+"'>("+obj['cnt']+")</span>");
    document.write("</li>\n");
}
function draw_tree(tree)
{
    for(var tag in tree){
        if(tag!='_item'&amp;&amp; tag!='_cnt'){
            var rid = Math.random();
            document.write("<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/AVvXsEjHFSgKycGacZr8WUj1zYIoQOMBlI_PrMCDmWUmamB6dRJtk663mhFeXxeZmVqQbgqCo95e7u9nzcS3PEgVWsBBo8nrbHA2vPqalmsQoB2Nl-vrZZVDH384vfd2nRQjFjZlh3tyMBrC9ig/) no-repeat left 0px;cursor: pointer'>");
            document.write(tn(tag));
            document.write("("+tree[tag]['_cnt']+")");
            document.write("</li>");
            document.write("<ul id=ul_"+rid+" style='display:none;padding-left: 20px'>");
            draw_tree(tree[tag]);
            document.write("</ul>\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('','','','');
</script>
</b:loop>
      <ul>
      <script>
          draw_tree(label_tree);
      </script>
      </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

步驟四
按下儲存範本就完成了

步驟五
使用以下的格式作為文章的標籤
使用　[分類1][分類2]標籤　
程式會自動抓出[分類]的內容列表