增強標籤分類功能: 標籤雲 (Label Cloud)

增強標籤分類功能: 標籤雲 (Label Cloud)

最早看到類似標籤雲這種東西是在美味書籤 (del.icio.us)裡面，它是用一目了然的顯示方式用來列出所有你做分類的書籤群組、並且用字型顏色和大小來 highlight 群組內的數量，應用在 Blog 標籤 (Label) 上面，一方面可以列出所有分類的標籤、以及被標註的文章數量，方便讀者去找同類型的文章，另一方面可以知道這個 Blog 裡面哪類的文章最多最熱門，也可以提供閒逛的讀者參考。所以我就找來取代 Sidebar 上預設的標籤列表，並且作了一些調整和修改。

修改之前，先確定 Sidebar 上面要已經有標籤 (Label) 的網頁元素（如果沒有記得先加入：範本 Template -> 網頁元素 Page Elements -> 選定 Sidebar 加入網頁元素 -> 標籤 -> 加入 Blog）。我把參考來的作法分類處理了一下，切成三段修改：第一段是關於 CSS 樣式的部分，用來顯示 Label Cloud 裡面文字置中和行距之類的，第二段是 Javascript，實際上用來顯示排序和更改標籤的字型顏色和大小，最後一段是在標籤的 element 裡面 (widget)，作為呼叫 Javascript 函示的進入點。

第一個步驟，打開樣版文件 Template，找到 CSS 樣式定義的部分，插入下面的定義：

/* Style for Label Cloud */
#labelCloud {
  text-align: center;
}

#labelCloud .label-cloud li{
  display: inline;
  background-image: none !important;
  padding: 0 5px;
  margin: 0;
  vertical-align: baseline !important;
  border: 0 !important;
}

#labelCloud ul{
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}

#labelCloud .label-count {
  padding-left: 0.2em;
  font-size: 9px;
  color: #777;
}

接下來，找範本的 </head> 標籤，把下面幾行 javascript 貼到該標籤的前面（如果已經有自訂的 Javascript 函示，可以只貼 <script> 標籤內的那些段 function 進去）。請注意，紅色的部分是需要自行調整的，標籤的字型顏色或大小和網址請根據自己的 Blog 樣式來更改。

<!-- User defined inline javascript -->
<script language='javascript' type='text/javascript'>
<!-- Functions used for Label Cloud: adjustLabel(), generateLabels()-->
var labels = new Object;
function adjustLabel(min, max, weight, total) {
  if (min &gt; max)
    var temp=(min-max)/Math.log(total), result=min-Math.floor(Math.log(weight)*temp);
  else
    var temp=(max-min)/Math.log(total), result=Math.floor(Math.log(weight)*temp+min);
  return result;
}

function generateLabels(){
  var blogURL = '';
  var maxFontSize = 18;
  var minFontSize = 11;
  var maxColor = [204,204,204];
  var minColor = [119,119,119];
  var showCount = true;

  var labelColor= [];
  var labelSize = 0;
  var labelCount = new Array();

  for (var i in labels)
    if (!labelCount[labels[i]])
      labelCount[labels[i]] = new Array(labels[i])

  total = labelCount.length-1;
  section = document.getElementById('labelCloud');
  ul = document.createElement('ul');
  ul.className = 'label-cloud';

  for(var tag in labels) {
    for (var i=0; i &lt; 3; i++)
      labelColor[i]=adjustLabel(minColor[i], maxColor[i], labels[tag], total);

    labelSize = adjustLabel(minFontSize, maxFontSize, labels[tag], total);
    li = document.createElement('li');
    li.style.fontSize = labelSize+'px';

    a = document.createElement('a');
    a.title = labels[tag]+' articles with Label: '+tag;
    a.style.color = 'rgb('+labelColor[0]+','+labelColor[1]+','+labelColor[2]+')';
    a.href = blogURL+'/search/label/'+encodeURIComponent(tag);

    if (showCount) {
      span = document.createElement('span');
      span.innerHTML = '('+labels[tag]+') ';
      span.className = 'label-count';
      a.appendChild(document.createTextNode(tag));
      li.appendChild(a);
      li.appendChild(span);
    }
    else {
      a.appendChild(document.createTextNode(tag));
      li.appendChild(a);
    }
    ul.appendChild(li);
    ul.appendChild(document.createTextNode(' '));
  }
  section.appendChild(ul);
}
</script>

第三步，修改網頁元素 (Page Element)。如果你開啟 Template 並編輯 HTML 時沒有展開 widget (小裝置?!)，搜尋範本裡的下面這一行（如果你改過 Title，那麼下面紅色的字串就不一定是 Labels）：

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

把它用下面的代碼取代：

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>  <!-- Add Label Cloud -->
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='labelCloud'/>
    <script type='text/javascript'>
      <b:loop values='data:labels' var='label'>
        labels[&quot;<data:label.name/>&quot;] = <data:label.count/>;
      </b:loop>
      generateLabels();
    </script>
    <noscript>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <data:label.name/>
          <b:else/>
            <a expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          (<data:label.count/>)
        </li>
      </b:loop>
      </ul>
    </noscript>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>   

如果編輯的範本有展開 widget，那就是取代掉上面那一行一直到標籤 </b:widget> 裡面的內容。建議當你有多個標籤和很多文章以後再使用這個功能，不然效果會不顯著。

參考文章：

本文引自 http://abintech.twidv.com/2006/11/label-cloud.html