Drupal | 完美的標籤選擇器

花水木在2009-11-18 (三) 09:56初次發表，在2009-11-18 (三) 11:03做了最後更新。

Drupal的分類系統若勾選「自由分類」，就能夠有「標籤」的功能。不過預設的樣子並不易用，

上圖是Drupal預設的標籤欄位，可以看出他非常地陽春。不但沒有推薦的標籤可以選，還必須用逗號分隔，對一般end-user來說根本懶得理會，若是網站並非自己心愛的部落格，哪會想花心思在那邊下標籤？

因此今天我的目標是

1.顯示建議標籤
2.不需要逗號分隔，提昇易用性

像是iT邦幫忙的介面雖談不上美，但就很易用

安裝Active Tags

Drupal有幾個優化標籤的模組，這個Active Tags是最好用的。
模組官網：
http://drupal.org/project/active_tags
正體支援站的中文介紹：
http://drupaltaiwan.org/module/active_tags

安裝時把Active Tags和Active Tags Popular都選起來。

到「編輯主分類」處啟用功能，

成功地使用了Active Tags畫面如下：

改造Active Tags

這邊開始才是本文重點。

Active Tags有幾個缺點，
1.只有綠色的小加號 + 才是可點範圍，常常會點不到，小妹常眼花點偏了，就必須找好久才點到 + 號。照理說應該整個標籤都要可以點才對。
2.行末標籤會被切斷，像剛才那張圖的the ming就被切斷了，很沒道理。

改法如下：

一、在版型的js檔加上

Drupal.theme.prototype.activeTagPopular = function(context, tags) {
  var content = '';
 
  if (tags.length) {
    content = '<div class="pop-tags"><div class="tags-label">' + Drupal.t('Add popular tags: ') + '</div>';
    jQuery.each(tags, function(i, v) {
      var tagitem = '<div class="tag-popular"><span class="tag-text">' + v + '</span><span class="add-tag-popular">' + v + ' +</span></div>';
      content += tagitem;
    });
    content += '</div>';
  }
 
  return content;
};