石頭閒語:部落格小玩意2: 輕鬆在文章中加入「Tag, 標籤」連結

我的作法是，我只要在文章中註記 Tag 的文字， JavaScript 就會自動幫我把 Tag 轉成標籤連結。不用記複雜的語法，也不用剪貼複製，一切都是那麼順暢。這個小玩意共支援五種共享書籤系服務的 Tag 連結，分別是：黑米 HEMiDEMi, 智邦 MyShare, Yahoo 分享書籤, 國外的 del.icio.us, technorati。

2007/02/05 做了一次編修: 修正 Opera 的問題。增加設定方式的說明。增加 notShowTitle 設定。
2007/02/06 做了一次編修: 第3行的測試用程式碼忘了改掉，已修正。
2007/02/09 做了一次重大編修: 取消 <tags> 語法，改用 HTML 規範的 <meta name="keywords"> 語法。原因有二：一、為了解決 Opera 無法正確處理自定HTML元素的問題；二、有助於搜尋引擎最佳化 (SEO) 。
2007/02/11 做了一次編修: 加入樂多，以「樂多」的搜尋功能作為標籤搜尋，加進標籤連結之中，加強與樂多其他部落格相關文章之聯繫。改變 window.onload 事件的觸發方式，以免與其他小工具衝突。

簡單的 Tag 語法

首先，我希望在文章中註記 Tag 的語法要很簡單，因此我規劃了兩種語法形式。第一種是用 <div>，屬性 name 要設定為 "tags" ，而 Tag 註記則寫在 <div> 區塊中。第二種是用 <meta name="keywords"> ，要把 Tag 寫在屬性 content 中，這種語法是擴展自 HTML 以 <meta> 定義文章關鍵字之應用，且瀏覽器不會將內容顯示在畫面上。是用 <tags> ，要把 Tag 寫在屬性 value 中。第二種語法是我的「自定 HTML 元素」，瀏覽器不認得，所以瀏覽器不會主動顯示在畫面上。這種自定 HTML 元素的方式，我自有其用途，雖然在這看不出作用。我寫 Tag 的方式也要很自由，只要寫單純的文字內容；可以用空格也可用逗號 (,) 分隔標籤。還有，我希望我可以在文章中任何地方放這些語法，也很可以放很多組。兩種語法的使用方式如下第4、11、15行所示。

使用 <div> 語法時，我留了個小技巧。如果第一個詞是冒號 (:) 結尾的，如上例所示，就不把它當作標籤。因為這個語法要透過 JavaScript 轉換成連結，若讀者的瀏覽器不支援 JavaScript 或者關閉了 JavaScript 時，就不會轉換了。如果我把第一個詞加上冒號，讀者透過不跑 JavaScript 的瀏覽器時，仍然會看到上面的文字內容，這樣讀者就可以看懂這些文字是 Tag 的意思，而不會覺得有一段莫明其妙的「單字」在文章中。我們也可以用 CSS 定義 Tag 的顯示外觀，因為我的標籤註記語法是 HTML 的一部份，所以只要在 CSS 中定義好樣式內容，再將樣式名稱加在語法中就可以了，如第 15 行所示。

為每一篇文章加上 Tag 連結

決定用法後，我就寫了一段 JavaScript 。樂多的用戶只要把這段 JavaScript 加在「Blog 基本設定」的「說明」欄位處。然後更新所有文章後就會生效。注意，請添加在部落格正常說明文字之後，不要把你的部落格說明漏掉了。其他系統的用戶請自己找地方加。

我的轉換動作是「就地轉換」，亦即 Tag 語法寫在什麼地方，就在什麼地方產生 Tag 連結。像上面的範例有三段 Tag 語法，就會在原地轉成三段 Tag 連結。

我列出了五種共享書籤服務的 Tag 連結的設定值，通常我們只需要留自己最常用的那一種就好了。如果五種都用，那麼就會產生五行 Tag 連結列。嘿嘿嘿。對了，不熟 JavaScript 語法者要注意逗號，最後一組設定值之後不要加逗號。而設定值的屬性意義如下列：

title
必要。 Tag 連結列的標題兼識別字。
url
必要。 Tag 連結的 URL 格式。
icon
選擇性屬性。顯示在 Tag 連結列最前面的圖像 URL 。
linkClassName
選擇性屬性。 Tag 連結列之 a HTML標籤的 CSS class 名稱。這讓我們可以為不同的書籤服務設定不同的顯示樣式。
notShowTitle
選擇性屬性。不在 Tag 連結列前顯示 title (文字) 。如果你只想用顯示圖像 (icon) ，不要文字，則設定此屬性為 true。

var tagElements, tagService, tagElement, tags, tagLinks, span;
    for (var i = 0; i < tagServices.length; ++i) {
      tagService = tagServices[i];
      if (tagService.icon) {
        tagService.img = document.createElement('img');
        tagService.img.src = tagService.icon;  tagService.img.alt = '['+tagService.title+']';
      }
    }

function makeTagsSpan(tagsValue) {
      var span, tags;
      tags = tagsValue.split(/[\s,]+/);
      if (!/[^:]$/.test(tags[0]))
        tags.shift(); //第一個字如果是冒號(:)結尾，則不視為 tag
      for (var i = 0; i < tags.length; ++i)
        tags[i] = tags[i].toLowerCase();

span = document.createElement('span');
      for (var is = 0; is < tagServices.length; ++is) {
        tagService = tagServices[is];
        if (is > 0) span.appendChild(document.createElement('br'));

tagLinks = [];
        for (var j = 0; j < tags.length; ++j) {
          tagLinks[j] = document.createElement('a');
          tagLinks[j].href = tagService.url + encodeURIComponent(tags[j]);
          tagLinks[j].target = tagService.title;
          if (tagService.linkClassName) tagLinks[j].className = tagService.linkClassName;
          tagLinks[j].appendChild(document.createTextNode(tags[j]));
        }

if (tagService.img) span.appendChild(tagService.img.cloneNode(false));
        if (!tagService.notShowTitle) span.appendChild(document.createTextNode(tagService.title + ': '));
        for (var j = 0; j < tagLinks.length; ++j) {
          span.appendChild(tagLinks[j].cloneNode(true));
          span.appendChild(document.createTextNode(' '));
        }
      }
      return span;
    }

var es,ies,ds,mn;
    ds = document.getElementsByTagName('div'), tagElements = []; ies = 0;
    for (var i = 0; i < ds.length; ++i) {
      if (ds[i].getAttribute('name') == 'tags') tagElements[ies++]=ds[i];
    }
    for (var i = 0; i < tagElements.length; ++i) {
      tagElement = tagElements[i];
      if (tagElement.firstChild && tagElement.firstChild.nodeValue)
        if (span = makeTagsSpan(tagElement.firstChild.nodeValue)) {
          tagElement.replaceChild(span, tagElement.firstChild);
        }
    }

ds = document.getElementsByTagName('meta'), tagElements = []; ies = 0;
    for (var i = 0; i < ds.length; ++i) {
      mn = ds[i].getAttribute('name');
      if (mn == 'keywords' || mn == 'tags') tagElements[ies++]=ds[i];
    }
    var tagsValue;
    for (var i = 0; i < tagElements.length; ++i) {
      if (!(tagsValue = tagElements[i].getAttribute('content')))
        tagsValue = tagElements[i].getAttribute('value');
      if (tagsValue) {
        tagElement = document.createElement('div');
        tagElement.className = tagElements[i].className;
        if (span = makeTagsSpan(tagsValue)) {
          tagElement.appendChild(span);
          if (/HTMLHeadElement/i.test(tagElements[i].parentNode.toString())) {
            var bb = (function() {
              var d = document.getElementsByTagName('div');
              for (var i = 0; i < d.length; ++i) {
                if (d[i].className == 'main') return d[i];
              }
            })();
            //YUI.util.Dom.getElementsByClassName('main', 'div', document)[0];

bb.insertBefore(tagElement, bb.firstChild); /*放在本文前面*/
            //bb.appendChild(tagElement); /*放在本文後面*/
          }
          else
            tagElements[i].parentNode.insertBefore(tagElement, tagElements[i].nextSibling);
        }
      }
    }
  };
  if (window.attachEvent) window.attachEvent('onload', addCurrentArticleTaglets);
  else window.addEventListener('load', addCurrentArticleTaglets, false);
}
//-->
</script>

這段語法也可以和我的另一個小玩意《為部落格加上「加入xx分享書籤」的按鈕》一起用。對了，如果各位有其他的網頁空間可以放檔案，那麼可以參考丸小管在《為樂多加入收藏按鈕》的作法，把這些程式碼放到外部的檔案中。

傷腦筋， Opera 處理自定HTML元素 <tags> 的問題比我預想的還麻煩。本來因為已經解決了，實際上跟其他 javascript 的程式碼一合起來還是會出問題。

雖然 Opera 的使用者不多，但我也不想放棄。再讓我想想要如何解決。

建議使用本工具的網友，儘量用 <div name="tags"> 的語法註記 Tag 。

你的方法真是太棒了，我的只是新手的笨方法。^^

不過我還是得用我的笨方法...Orz
因為我會先存入del.icio.us然後再複製tags去我的產生器產生html。這樣我可以直接點選我之前下過的tags，而不用自己輸入。

不知道這能不能有比較方便的解決方式？（我自己是沒辦法啦，不會寫程式...Orz）

姓名 :
Email :
URL :
驗證碼 :	( 請依顯示文字填入 ) 重新產生驗證碼
	記住我的資訊顯示我的圖像 ( 登入或申請個人圖像 )
回應內容 :

石頭閒語

2007年02月5日

部落格小玩意2: 輕鬆在文章中加入「Tag, 標籤」連結

簡單的 Tag 語法

為每一篇文章加上 Tag 連結

引用URL