將blogger標籤改為樹狀分類(懶人包)

by •12月 22, 2019•0 Comments

說明

因為Blogger只提供標籤功能，所以參考[教學]5分鐘讓你Blogger的標籤改成樹狀階層式，然後稍做修改，並修正分類標籤偏移、行距不足問題，結果如下

操作步驟

備份主題

新增小工具

  1. 點版面配置
  2. 點「新增小工具」
  3. 點「標籤」項目旁的+
  4. 依照您的喜好設定標籤
  5. 點儲存
  6. 點儲存排列方式
  1. 點主題
  2. 點⋮
  3. 點編輯HTML
  1. 點下方的四個方塊按鈕
  2. 點「Label1」，如果之前有新增其他小工具，可能會是Label2或Label3

將以下程式碼覆蓋於<b:widget id='Label1' ... </b:widget>處
(若先前有新增其它小工具，可能不會是Label1)

<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/AVvXsEhoBRlPhTEIX1kYKYS4_W8iUpr5o3DjbcHsLo644CUn7p47-feDPawyQ3VoXpbprg6qrNg7IJcFW3mYUo3FM6r_XDjq_0I6hcKwftr_mG0tEnpVzyAlxnLfJKOVBxeBpfTzom9SZup6RA4/)"
    }
    else {
      ul.style.display="none"
      li.style.backgroundImage="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLwlu4amop9ih-M1QUcA8GpmycYopwyF1hMhb2HbuRUeVd-vTVB63e1ITq88tlWxlEpz8aoaez50zR7BWb3hvt6WTknf_4FDItzMlPIlMG782IXHWE6o7QBH2QtdRvIPN5w8IKvHmgjW0/)"
    }    
}
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/AVvXsEjrCRTd5lvgQPpRPjowyitWgzDVLVhLh_THHIejaXMA3D2wsBgBfMZZ4mSW34zaIR1B2cXltq89KgpqlUlkiMOQx3z1lzEl87G3OY5BhSPl6B9HUCe_DBH7BT2BhT-8tLwu9I8RKFDos7I/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/AVvXsEiLwlu4amop9ih-M1QUcA8GpmycYopwyF1hMhb2HbuRUeVd-vTVB63e1ITq88tlWxlEpz8aoaez50zR7BWb3hvt6WTknf_4FDItzMlPIlMG782IXHWE6o7QBH2QtdRvIPN5w8IKvHmgjW0/) no-repeat left 5px;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 style="padding-left: 20px;">
      <script>
          draw_tree(label_tree);
      </script>
      </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

修改標籤

將所有標籤格式修改為[第一層][第二層]第三層，最後按F5重新整理後，出現樹狀標籤啦~~

<