版面配置的小工具標記

使用版面配置主題建立網誌的主體部分時，您可以使用小工具加入各種網頁元素，例如圖片和網誌聯播。

標記類型

以下說明您可以在結尾標記中使用的 HTML 語法。

Include (b:include)

使用 include 的時機

如果您想在多個不同的位置重複使用某一段特定的程式碼，或是只想在特定狀況下納入這段程式碼，include 就是您的最佳選擇。

如要使用 include，請在 b:includable 標記內插入要使用的內容，然後在您要顯示該內容的位置使用 b:include。

格式

 

<b:includable id='main' var='thiswidget'>
  [請在此插入您要使用的內容]
</b:includable>

 

屬性

  • id (必要)：由字母和數字組成的專屬識別碼。每個小工具都必須包含一個擁有 id='main' 的可納入項目。
  • var (選用)：由字母和數字組成的識別碼，用來參照這個區段中的資料。

如果您使用多個具有不同 ID 的可納入項目，系統將不會自動顯示這些項目。不過，如果您使用包含 id='new' 的可納入項目，則可在主要的可納入項目中使用 <b:include name='new' /> 參照該可納入項目，這樣系統就會正確顯示相關內容了。

以下是 b:include 標記的屬性：

  • name (必要)：由字母和數字組成的識別碼，必須與所屬小工具中現有 b:includable 的 ID 相符。
  • data (選用)：傳送至可納入項目區段的運算式或資料片段。這會成為可納入項目中 var 屬性的值。
  • cond (選用)：可限制只在結果為 true 時執行 Include 的運算式，與 b:if 中的 cond 屬性相同。

範例

以下是 b:includable 和 b:include 的使用範例。

這裡主要說明的是如何在「main」區段中納入「post」區段。這段程式碼會傳送一篇呼叫「p」的文章，而納入的區段則會參照該文章做為變數「post」，然後列出標題。

請注意，include 只有在 index 小於 10 的情況下才會執行 ，因此在這個範例中，最多只會顯示 10 篇文章 (index 最小為 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 /> 可顯示相片元件的屬性。相片可能包含各種元件，例如網址、高度和寬度。其中的「.」符號可表示我們要使用的是這張相片的網址，而非其他項目的網址。

查看更多範例

歡迎查看 Blogger 支援的所有版面配置資料標記清單。

 

迴圈 (b:loop)

使用 b:loop 的時機

b:loop 標記可讓您多次重複一個內容區段。這個標記最常見的用途，就是用來列出指定網頁文章清單內的每篇文章、留言清單內的每則留言，或是標籤清單內的每個標籤等。

格式

以下是常見的迴圈使用格式：

 

<b:loop var='identifier' values='set-of-data'>
  [請在此輸入要重複的內容]
</b:loop>

 

「identifier」(i) 部分可以是您選擇的任何名稱，每次執行迴圈時，都將用來代表清單中的每個新項目。您可以將資料標記說明文章中所列的任何資料，以項目清單的形式指定為變數的資料組。

舉例來說，網誌文章小工具中的 posts 就是一個清單。以下列程式碼為例，這段程式碼會對所有文章進行迴圈處理並列出每篇文章的標題，標題兩側為標題標記。

 

<b:loop var='i' values='data:posts'>
  <h2><data:i.title/></h2>
</b:loop>

 

請注意，「i」會逐一取得每篇文章的值，以便擷取每篇文章的標題。

數字範圍

迴圈標記可讓您重複使用特定數字範圍 (包含所指定的數字在內)，例如「1 to 3」(1 到 3) 或「-3 to -9」(-3 到 -9)。系統會使用範圍內數字的值做為變數的值。以下是使用 1、2 和 3 建立未排序清單的範例。

 

<b:loop var='i' values='1 to 3'>
  <li><data:i /></li>
</b:loop>
 

Index 屬性

迴圈標記也有一項選用的 index 屬性，可將原本為 0 的 index 改為要重複執行的數字。

 

<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>Index: <data:index />, Number: <data:number /></li>
  </b:loop>
</ul>

 

這個範例可使用下列項目建立未排序清單：

  • Index: 0, Number: 9
  • Index: 1, Number: 8
  • Index: 2, Number: 7
If、Elseif 和 Else (b:if)

使用 if、elseif 或 else 的時機

您可以使用 b:if、b:elseif 和 b:else 標記，根據不同的條件分別顯示特定的內容。舉例來說，您可能想在首頁顯示特定文字，但在使用者查看個別文章時則顯示不同的文字。

格式

 

<b:if cond='條件'>
  [在條件為 true 的情況下顯示的內容]
<b:elseif cond='其他條件'/>
  [在前述的 if 或 elseif 條件皆不為 true，且elseif 條件為 true 的情況下顯示的內容]
<b:else/>
  [在 if 和 elseif 條件皆不符合的情況下顯示的內容]
</b:if>

 

b:elseif 和 b:else 是選擇性的標記。不使用這兩個標記時，輸出結果可能是 b:if 區段所列的內容或空白。不過，無論在何種情況下都需要結束的 </b:if>。

您可以將「condition」(條件) 設成任何可為 true 或 false 的內容。某些資料標記本身就是 true/false 值，例如文章中的 allowComments對於其他資料片段，您可以透過與特定的值進行比較來獲得 true 或 false 的結果。使用方式請參閱下列範例：

  • <b:if cond='data:post.showBacklinks'>
    如果目前的文章設定為顯示反向連結則為 true。
  • <b:if cond='data:blog.pageType == "item"'>
    如果目前的網頁是項目網頁 (文章網頁) 則為 true。
  • <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
    如果目前的網頁是項目網頁 (文章網頁) 且設定為顯示反向連結則為 true。
  • <b:if cond='data:displayname != "Fred"'>
    如果這不是 Fred 的顯示名稱則為 true。
  • <b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
    如果這是 Fred 的顯示名稱，或是目前的網頁是靜態網頁 (非文章網頁) 則為 true。
  • <b:if cond='data:post.numComments > 1'>
    如果目前的文章有多則留言則為 true。
  • <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
    如果目前的網頁是特定文章或網頁則為 true。
Switch (b:switch)

使用 Switch 的時機

b:switch 標記的使用方式，就像是使用具備數個 b:elseif 標記的 b:if 標記。切換分支的優點是您無需重複輸入相同的變數名稱。您可以輕鬆檢視各個變數，查看各種情況的定義以及預設的情況為何。

格式

<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 資訊提供網址的連結。「+」這個運算子可將兩個字串連接起來。
  • <a expr:class='data:post.allowComments ? "comment" : "no-comment">留言</a>
    在這個連結中，class 在留言功能啟用時為「comment」，停用時則為「no-comment」。三元運算子 (?:) 會使用指定的布林值，如果布林值為 true，就會使用第一個值 (在 ? 後面)，如果布林值為 false，則會使用第二個值 (在 : 後面)。
評估運算式 (b:eval)

使用評估運算式的時機

您可以使用 b:eval 標記來判定比標準資料標記更複雜的運算式。

格式

<b:eval expr='[運算式]' />

範例

  • min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
    依據新的寬度值，輸出經過計算的相對高度。
  • <b:eval expr="data:post.labels[0].url" />
    輸出第一個文章標籤的網址。
  • <b:eval expr='data:post.allowComments ? "請留言" : "留言功能已停用" />
    允許留言時輸出「請留言」，不允許留言時輸出「留言功能已停用」。請注意，這個運算式會使用三元運算子。
變數別名 (b:with)

使用變數別名的時機

您可以使用 b:with 標記暫時保留計算運算式的值，並且避免複雜的內嵌運算式。

格式

<b:with var='myComputedValue' value='[資料運算式]' />

範例

對於以資料變數為基礎的複雜樣式屬性，您可以在剩下的 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'>
        <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>

 

true
搜尋
清除搜尋內容
關閉搜尋
主選單
11100470368282193722
true
搜尋說明中心
true
true
true
true
true
74
false
false