实现 Blogger 下的标签云

Update (on Oct. 7th 2009)，Blogger 系统已经开始集成标签云了。现在无须 Hack 代码，就可以直接调用 Blogger 的标签云。虽然官方博客为英文版，但是看图使用，还是比较容易理解的吧……

Blogger 支持 Label（又称 Tag，标签），而且在 Blogger 的测试版 Draft Blogger 中也提供了 Labels Gadget。但这个插件所能做的，只是列出所有标签，距离我所希望的 Label Cloud（或 Tag Could，标签云） 还是有点距离。

在 Denish 的 blogger 自制的标签云的基础上，做一些改进。实现了一个能够根据标签使用数量改变字体大小的标签云。首先按照 Denish 的方法，在 Layout 的 Page Elements 中添加一个 Labels Gadget，可对新添加的插件设置显示名称和标签排序方法。然后进入 Layout 的 Edit HTML，点选 Expand Widget Templates。在 Template 中，用插件的显示名作为关键词搜索，定位刚添加的插件。原始代码应该看起来类似这个样子：

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
 ......
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>
 ......
</b:widget>

需要修改的是 <ul> 和 </ul> 附近那块代码。改为：

<div style='padding-right:10px;'>
    <script type='text/javascript'>
      var tagcount = 0;
    </script>
    <ul style='list-style:none;'>
    <b:loop values='data:labels' var='label'>
      <b:if cond='data:blog.url == data:label.url'>
        <span expr:dir='data:blog.languageDirection'>
          <data:label.name/>
        </span>
      <b:else/>
        <span expr:dir='data:blog.languageDirection' name='taglabel'>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </span>
        <script type='text/javascript'>
          var size = Math.floor(2 * (<data:label.count/> / 5) + 10);
          document.getElementsByName('taglabel')[tagcount].style.fontSize = size + 'px';
          tagcount++;
        </script>
      </b:if>
      <span dir='ltr' style='margin-right:4px;'>(<data:label.count/>)</span>
    </b:loop>
    </ul>
   </div>

代码中， tagcount 是标签的计数器，用于统计标签的出现顺序。每次加载，先调用 getElementsByName('taglabel') 取得名称属性为“taglabel”的一系列 <span> 数组，并用 tagcount 定位 <span> 在数组中的位置。接下去，通过修改 <span> 中的 <font> ，便可轻松地按照标签的使用数量来改变字体大小。标签的使用数量可以轻松地从内置参数 data:label.count 中得到。

此外，除了这种简易修改法以外，网上推荐最多的还有这种方法，似乎还能实现标签颜色的变化。但是需要修改的代码似乎比较多……