[Google Blogger] 要如何將標籤改成樹狀分類

Google Blogger文章可以建立一個以上的標籤，但標籤一多就會很雜，如果可以改成樹狀圖顯示，可以分門別類；下面說明如何將標籤改成樹狀分類：

    1. 在工具列新增一個"標籤"(新增小工具\基本)：如果你一開始沒放的話，就先新增一個，作為改成樹狀分類使用。

    2. 修改範本的內容：選擇範本 => 修改HTML

    3. 備份：備份原有的內容，以備不之需。

    4. 修改HTML代碼：
        - 在 head tag上面如下圖： 

          加上如下的程式碼：              

<link href='http://sites.google.com/site/dtreetest/dtree/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://sites.google.com/site/dtreetest/dtree/dtree.js' type='text/javascript'/> 
<script type='text/javascript'> 
  function TAG(label, id, sid, pid, subdir_count, count, url) 
  { 
    this.label = label; 
    this.id = id; 
    this.sid = sid;
    this.pid = pid;
    this.subdir_count = subdir_count;
    this.count = count; 
    this.url = url; 
  } 

  var tag = new Object(); var id = 0; function 
  add_Tag(tagString, count, url, dir) 
  { 
    var seq_id = 0; 
    var pre_id = 0; 
    var re_all = new RegExp("\\[(.+)\\]","g");
    var re_array = new RegExp("\\[(.+?)\\]","g"); 
    var m_all = tagString.match(re_all); 
    var m_array = tagString.match(re_array); 
        
    for (arrayNumber in m_array) // get add_Tag [Category]
    { 
      var same = 0;
      for (labelNumber in tag) // got Tag for labelNumber
      {
        if (tag[labelNumber].label == m_array[arrayNumber])
        {
          if (tag[labelNumber].sid == seq_id)
          {
            same = 1;
            pre_id = tag[labelNumber].id; 
            tag[labelNumber].subdir_count++; 
            tag[labelNumber].count += parseInt(count);
          }
        }
      }

      if (!same) 
      {
        id++; 
        tag[id] = new TAG(m_array[arrayNumber], id, seq_id, pre_id, 1, parseInt(count), "");
        pre_id = id; 
      }
       
      seq_id++;
    }
    id++;
        
    if (null == m_array)
    { 
      tag[id] = new TAG(tagString, id, seq_id, pre_id, 0, parseInt(count), url); 
    } 
    else
    {
      var final_tag = tagString.substring(m_all[0].length,tagString.length); 
      tag[id] = new TAG(final_tag, id, seq_id, pre_id, 0, parseInt(count), url);
    }
  } 
</script>

        - 加入下的代碼：先找到"<div expr:class='"widget-content " + data:display + "-label-widget-content"'>"，再往下找到第一個"<b:include name='quickedit'/>"之間替換成如下程式碼。上面加上如下的程式碼：

<script> 
  d = new dTree('d'); d.add(0,-1,'標籤分類'); 
</script> 
  <b:loop values='data:labels' var='label'> 
<script> 
add_Tag('<data:label.name/>','<data:label.count/>','<data:label.url/>','<data:blog.languageDirection/>'); 
</script> 
  </b:loop> 
  <script> 
  for (personNumber in tag) 
  { 
    if (tag[personNumber].subdir_count == 0) 
      d.add(tag[personNumber].id, tag[personNumber].pid, tag[personNumber].label+"("+tag[personNumber].count+")", tag[personNumber].url); 
    else 
      d.add(tag[personNumber].id, tag[personNumber].pid, tag[personNumber].label+"("+tag[personNumber].subdir_count+", tag[personNumber].url); 
  }
  document.write(d); 
</script>

    5. 存檔

    6. 在編輯文章時，請[]來作文章的樹狀標籤，結果如下圖