搜索
清除搜索查询
关闭搜索框
Google 应用
主菜单

布局专用的小部件标记

当您利用“布局”主题背景创建博客正文部分时,可以使用小部件来添加页面元素,例如照片和友情链接。

标记类型

本部分介绍了可在封闭标记中使用的 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:includableb: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:)

示例

  • <data:title/> 将输出小部件的标题

  • <data:photo.url/> - Size: <data.photo.width /> x <data.photo.height /> 将输出照片组件的属性。照片可能具有网址、高度和宽度等组件。如果使用了“.”符号,则表明我们想要照片而非其他内容的网址。

查看更多示例

查看受支持布局数据标记的完整列表。

 

循环 (b:loop)

使用“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)

使用“if”、“elseif”或“else”的情况

利用 b:ifb:elseifb:else 标记,可以在特定情况下展示特定内容,并在其他情况下展示其他内容。例如,您可能只想在首页上显示特定文本,但在查看单独的博文时显示其他文本。

格式

 

<b:if cond='condition'>
  [条件为真时显示的内容]
<b:elseif cond='another condition'/>
  [之前没有 if 或 elseif 条件为真,但此 elseif 条件为真时显示的内容]
<b:else/>
  [未满足 if 或 elseif 条件时显示的内容]
</b:if>

 

b:elseifb: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)

使用“Switch”的情况

使用 b:switch 标记的情况与使用包含多个 b:elseifb: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:)

使用表达式的情况

利用“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 标记可用来评估比标准数据标记更为复杂的表达式。

格式

<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 标记,您可以暂时存储已计算表达式的值,并避免复杂的内联表达式。

格式

<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:widgetb: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'>
        <select expr:id='data:widget.instanceId + "_select"'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option> 
          </b:if>
        </b:loop>
        </select>
        <span class='pagelist-arrow'>&amp;#9660;</span>
      <b:else/>
        <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          <b:else/>
            <li>
              <a expr: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>

 

本文是否对您有帮助?
您有什么改进建议?