May 6, 2007

[翻译]下拉式标签 - 第一个 Blogger Beta 的模板 hack

原文:http://hackosphere.blogspot.com/2006/08/drop-down-labels-blogger-beta-hack.html
更新:我后来在这个 hack 基础上又开发出了更好的版本。点击这里查看

  在 John 和 Blogger Buzz 的文章知道了 Blogger Beta 开放编辑布局模板功能后,我无法抑制我的好奇心。所以我决定马上试试我脑中已有的小点子。我相信这是 Blogger Beta 的第一个关于的模板 hack,但我不是很确定。
  你知道,标签是 Blogger 所提供分类的方式。但是,Blogger 对此只提供了链接列表的功能,不像 Archives 提供了一些其他诸如下拉菜单、层次结构(展开/合拢)之类的选项。我想在这儿有 hack 成的下拉菜单式标签可能性行。花了点时间研究模板之后,事情就轻而易举了。
  虽然 Blogger 开放了模板编辑功能,但他们只告诉了我们模板中最最简单的东西。所以,当你点击“编辑 HTML”,所显示的是没有细节的模板代码。但在右上角有个“展开窗口小部件代码”的选项,选中时,代码会以更 hacker 的方式显示。而 Blogger 关于页面元素的帮助页面只有“coming soon”。如果不能通过了解原始代码,作一个 hacker 还真不错。
  假设你已经在侧边栏创建了标签并且添加了页面元素,按照下面的方法来把标签转换成下拉菜单的样式——就像我的侧边栏中的那样。首先下载完整模板到本地电脑,备份后打开模板,找到下面的代码:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<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>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

用下面的代码替换上面的斜体部分
<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(
<data:label.count/>)
</option>
</b:loop>
</select>

  把修改好的模板到 Blogger 或 Voila,下拉式标签就改好了!
  (我也看了看展开/合拢选项在标签中是否也起作用,但 Blogger 好像是使用搜索来而没有为每个标签提供列表。当我时间充裕的时候我会研究一下实现的可能性。)

2 comments:

Anonymous said...

师傅,我看不懂~
55555555555555555555

Ken Lai said...

别着急,慢慢学习。

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger