我的痕迹: 认识 Blogger 的 XML 模板
上午看了 Blogger 帮助中关于 XML 模板的讲解。
在这之前,我想象 Blogger 能提供一个完整的对象模型,可以通过 Javascript 访问,就像可以用 VBA 对 COM 服务器进行编程。我设想的的对象模型大致是这个样子:有一个类型为 Blogger 的根对象 ,它代表整个博客,有一堆属性,最重要的是 Posts 属性,这是一个 Post 类型的集合,Post 类描述了一个贴子的全部信息。
实际上我是把在桌面程序上的经验搬到这里来了,我不知道这个设想能不能实现,甚至不期望现今的博客服务能支持这个开发模型,反正就今天来看, Blogger 的 XML 模块中 Widget 的制作方法很有趣。
从经典模板的经验出发,我很好奇 XML 模板中那个标签组件是怎么做出来的,它能得到博客中的标签列表,并且统计各个标签的贴子数目,典型情况下,这需要循环语句啊!可如何用 XML 标记表达循环呢?看看用于布局的窗口小部件标记是怎么模仿编程语言中的控制流和变量引用的:
循环
b:loop 标记可让您多次重复一段内容。如果要输出指定页面帖子列表中的每个帖子、评论列表中的每条评论或标签列表中的每个标签等项目,这是最常用的标记。使用循环的一般格式为:
<b:loop var='identifier' values='set-of-data'>
[此处为重复的内容]
</b:loop>
这种用法非常类似于 C# 中的 foreach 语句,用以迭代一个集合。条件
您可以使用 b:if 和 b:else 在某些位置显示特定内容,而在其他位置不显示。一般格式如下:
<b:if cond='condition'>
[条件为"真"时显示的内容]
<b:else/>
[条件为"假"时显示的内容]
</b:if>变量的引用和传递
与此相关的标记有两个:b:includable 和 b:includable 。
includable 标记的角色相当于函数定义,它有个 var 属性,它是由字母和数字组成的标识符,用于引用此段内的数。
b:include 标记的角色相当于函数调用,它有个 data 属性,它表示要传递到 includable 段的表达式或数据片断。在 includable 段中,这也是 var 属性的值。有了上面的技术, 定义模板就很自由了,下面是标签小部件的代码:
<b:widget id='Label1' locked='false' title='标签' 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>
标签窗口小部件的布局数据标记:
title:窗口小部件标题。
labels:标签列表,每项可包含下列标记:
name:标签文字。
count:有此标签的帖子数。
url:显示有此标签的帖子的网页链接。
关于 XML 模板,最有参考价值的两篇文章应该是:
用于布局的窗口小部件标记:
http://help.blogger.com/bin/answer.py?answer=46995
布局数据标记:
http://help.blogger.com/bin/answer.py?answer=47270&hl=zh_CN#labels
需要注意的一件事是,经典模板中的数据标记使用很简单,把它插入任何需要的地方都可以——包括字符串中,这很重要,它意味着你何以在指定 HMTL 元素的属性时直接使用这种标记,但在 XML 模板中,需要使用 expr 对属性字符串求值,比如<a expr:id=data:post.id+"_header">。
我在 XML 模板中添了一些代码,期望达到折叠/展开贴子的效果,可碰到一点小问题:我的链接无论如何不调用 js 函数,换成按钮则行,折腾了好久(超过2个小时),我发现是一段外部 js 代码导致这个奇怪现象的,但那段代码是必须的,按钮又太丑,就因为这个我仍然没有升级到 XML 模块。
0 评论:
发表评论