当您利用“布局”主题背景创建博客正文部分时,可以使用小部件来添加页面元素,例如照片和友情链接。
标记类型
本部分介绍了可在封闭标记中使用的 HTML。
Include (b:include)使用“Include”的情况
如果您有一组代码,想在多个不同的地方重复使用,或只在特定情况下使用,则“Include”标记最为有效。
为此,请在 b:includable
中输入相应内容,然后在要用到该代码的所有地方使用 b:include
。
格式
<b:includable id='main' var='thiswidget'>
[在此输入您想要加入的任何内容]
</b:includable>
属性
- id(必选):由字母和数字构成的唯一标识符。每个小部件都必须有一个包含“id='main'”的 includable。
- var(可选):由数字和字母构成的标识符,用于引用此部分的数据。
如果您使用不同 ID 创建多项 includable,系统将不会自动显示这些内容。不过,如果某项 includable 是通过 id='new'
创建的,您就可以利用 <b:include name='new' />
在主 includable 中引用,而且该项内容也会以此方式显示。
“b:include”标记具有以下属性:
- name(必选):由字母和数字构成的标识符,必须与同一小部件中现有
b:includable
的 ID 相匹配。 - data(可选):将传递到 includable 的表达式或数据块。这将成为 includable 中 var 属性的值。
- cond(可选):只有结果为真时才执行 include 的表达式。该表达式与“b:if”的 cond 属性相同。
示例
下面举例说明了如何使用 b:includable
和 b:include
。
在此需要了解的主要是“main”部分如何将“post”部分包含在内。它先传递被称为“p”的博文(已包含的部分会将其引用为自己的 var“post”),然后再输出标题。
请注意,只有指标低于 10 时,“include”才会运行,因此以下示例中最多显示 10 篇博文(指标从 0 开始)。
<b:includable id='main'>
<b:loop var='p' index='index' values='posts'>
<b:include name='post' data='p' cond='index < 10'/>
</b:loop>
</b:includable>
<b:includable id='post' var='post'>
Title: <data:post.title/>
</b:includable>
示例
-
<data:title/> 将输出小部件的标题
-
<data:photo.url/> - Size: <data.photo.width /> x <data.photo.height /> 将输出照片组件的属性。照片可能具有网址、高度和宽度等组件。如果使用了“.”符号,则表明我们想要照片而非其他内容的网址。
查看更多示例
查看受支持布局数据标记的完整列表。
使用“b:loop”的情况
利用 b:loop
标记,您可以多次重复某部分内容。此标记最常用于针对指定页面输出博文列表中的各篇博文,或者输出各条评论或各个标记等。
格式
以下为使用循环的一般格式:
<b:loop var='identifier' values='set-of-data'>
[此处为重复的内容]
</b:loop>
您可以选择用任何名称作为“identifier”(即“i”)部分,而且在每次循环的过程中,该部分都将用于替代列表中的各项新内容。您为“value”指定的数据集可以是数据标记文章(即内容列表)中描述的任何数据块。
例如,posts
就是博文小部件中的一个列表。如下代码将在各博文中循环,并输出各篇博文的标题,其中标题的两边为标题标记。
<b:loop var='i' values='data:posts'>
<h2><data:i.title/></h2>
</b:loop>
了解“i”如何依次取用各篇博文的值,可方便您获取各博文的标题。
数值范围
利用循环标记,您可以迭代一定范围内(例如“1 至 3”和“-3 至 -9”)的数值,其中数值就是变量的值。通过以下示例,将创建 1、2 和 3 的无序列表。
<b:loop var='i' values='1 to 3'>
<li><data:i /></li>
</b:loop>
指标属性
循环标记还有一个可选的指标属性,它能通过循环提供当前迭代过程中从零开始的指标。
<ul>
<b:loop var='number' index='index' values='9 to 7'>
<li>Index: <data:index />, Number: <data:number /></li>
</b:loop>
</ul>
通过以下示例,可创建下列指标和数值的无序列表:
- 指标:0,数值:9
- 指标:1,数值:8
- 指标:2,数值:7
使用“if”、“elseif”或“else”的情况
利用 b:if
、b:elseif
和 b:else
标记,可以在特定情况下展示特定内容,并在其他情况下展示其他内容。例如,您可能只想在首页上显示特定文本,但在查看单独的博文时显示其他文本。
格式
<b:if cond='condition'> [条件为 true 时显示的内容] <b:elseif cond='another condition'/> [
之前没有 if 或 elseif 条件为 true,但此 elseif 条件为 true 时显示的内容] <b:else/> [未满足 if 或 elseif 条件时显示的内容] </b:if>
b:elseif
和 b:else
标记是可选项。如果不使用这些标记,输出结果可能是“b:if”部分的内容,也可能为空白。然而,无论在哪种情况下,都必须使用关闭标记 </b:if>
。
在“条件”部分,您可以输入任何计算结果为真或为假的内容。有的数据标记本身就是真值/假值,例如博文中的 allowComments
。您可以将其他数据片段与特定值进行比较,从而得出真结果或假结果。请参见以下示例:
<b:if cond='data:post.showBacklinks'>
当前博文被设置为显示反向链接时为真。<b:if cond='data:blog.pageType == "item"'>
当前页面是内容页(博文页面)时为真。<b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
当前页面是内容页(博文页面)而且当前博文被设置为显示反向链接时为真。<b:if cond='data:displayname ! = "Fred"'>
不是 Fred 的显示名时为真。<b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
是 Fred 的显示名而且当前页面是静态页面(非博文页面)时为真。<b:if cond='data:post.numComments > 1'>
当前博文有多条评论时为真。<b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
当前页面是特定博文或页面时为真。
使用“Switch”的情况
使用 b:switch
标记的情况与使用包含多个 b:elseif
的 b:if
标记的情况大致相同。使用“switch”分支时,您无需重复变量名称,这是“switch”的一大优势。您可以轻松读取这些内容,以便了解各种情况的定义以及默认情况。
格式
<b:switch var='[数据表达式]'>
<b:case value="[值 1]" />
[当 var 的估值等于值 1 时输出]
<b:case value="[值 2]" />
[当 var 的估值等于值 2 时输出]
[… 任何其他值]
<b:default />
[当 var 的估值不等于 b:case 情况下的任何其他值时输出]
</b:switch>
示例
以下举例说明了如何根据所呈现页面的类型输出不同的标头。
<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
<h1>页面</h1>
<b:case value="item" />
<h1>博文</h1>
<b:default />
<h2>博文</h2>
</b:switch>
使用表达式的情况
利用“expr”属性,您可以根据数据字典中的值设置属性值。
示例
<a expr:href='data:blog.homepageUrl'>首页</a>
包含博客首页网址的首页链接。<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>博文 RSS</a>
包含博文 RSS Feed 网址的链接。两个字符串通过“+”运算符连接。<a expr:class='data:post.allowComments ? "comment" : "no-comment">评论</a>
允许评论时包含“comment”的链接,以及不允许评论时包含“no-comment”的链接。三元运算符 (?:) 取指定的布尔值;如果布尔值为真,则选择第一个值(即“?”之后的值);如果布尔值为假,则选择第二个值(即“:”之后的值)。
使用评估表达式的情况
b:eval
标记可用来评估比标准数据标记更为复杂的表达式。
格式
<b:eval expr='[表达式]' />
示例
- 最小高度:
<b:eval expr="data:newWidth * data:height / data:width" />
px;
根据新的宽度值输出计算得出的相对高度。 <b:eval expr="data:post.labels[0].url" />
输出第一个博文标签的网址。<b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
允许评论时输出“评论”,禁止评论时输出“已停用评论”。请注意,此类表达式使用三元运算符。
使用变量别名的情况
利用 b:with
标记,您可以暂时存储已计算表达式的值,并避免复杂的内联表达式。
格式
<b:with var='myComputedValue' value='[Data expression]' />
示例
您可以在剩余的 HTML 输出之前计算基于数据变量的复杂类型属性,从而方便读取嵌套 HTML。
<b:with var='style'
value='"background-image: url(\"" + data:sourceUrl "\"); "
+ " width: " + data:width + "px; " '>
<div id='header-outer'>
<div id='header-inner' expr:style='data:style'>
<h1>我的标题</h1>
</div>
</div>
</b:with>
请注意,只有
b:with
标记的子节点才存在这种变量。查看示例
点击即可查看以下示例,了解如何在博客中为 PageList 小部件的 HTML 使用这些标记。
示例通过以下小部件,您可以查看 b:widget
、b:includable
(以及 b:include
)、b:if
(以及 b:else
)和 b:loop
标记的使用方法。
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'> <b:includable id='main'> <b:if cond='data:title != ""'>
<h2><data:title/>
</h2></b:if>
<div class='widget-content'><b:if cond='data:mobile'>
<selectexpr:id='data:widget.instanceId + "_select"'
><b:loop values='data:links' var='link'> <b:if cond='data:link.isCurrentPage'>
<optionexpr:value='data:link.href'
selected='selected'><data:link.title/></option><b:else/>
<optionexpr:value='data:link.href'
><data:link.title/></option></b:if> </b:loop>
</select> <span class='pagelist-arrow'>&#9660;</span><b:else/>
<ul><b:loop values='data:links' var='link'> <b:if cond='data:link.isCurrentPage'>
<li class='selected'> <aexpr:href='data:link.href'
><data:link.title/>
</a> </li> <b:else/> <li> <aexpr:href='data:link.href'
><data:link.title/>
</a> </li></b:if> </b:loop>
</ul></b:if>
<b:include name='quickedit'/> </div></b:includable> </b:widget>