Thẻ tiện ích cho bố cục

Khi đang sử dụng chủ đề Bố cục để tạo phần nội dung cho blog, bạn có thể sử dụng tiện ích để thêm các phần tử trang như ảnh và danh sách trang web ưa thích.

Các loại thẻ

Phần này mô tả HTML bạn có thể sử dụng bên trong thẻ đóng.

Include (Bao hàm) (b:include)

Trường hợp sử dụng thẻ include

Thẻ include hữu ích nhất nếu bạn có một phần mã muốn sử dụng lại ở nhiều nơi khác nhau hoặc chỉ bao hàm phần mã đó trong một số trường hợp nhất định.

Để thực hiện việc này, hãy viết nội dung bên trong b:includable rồi sử dụng b:include ở bất cứ nơi nào bạn muốn nội dung đó hiển thị.

Định dạng

 

<b:includable id='main' var='thiswidget'>
  [chèn bất kỳ nội dung nào bạn muốn tại đây]
</b:includable>

 

Các thuộc tính

  • id (bắt buộc): Mã nhận dạng duy nhất, bao gồm các chữ cái và chữ số. Mỗi tiện ích phải có một thẻ includable với id='main'.
  • var (không bắt buộc) Mã nhận dạng bao gồm các chữ cái và chữ số, dùng để tham chiếu dữ liệu trong phần này.

Nếu bạn tạo nhiều thẻ includable với ID khác nhau, những thẻ này sẽ không được tự động hiển thị. Tuy nhiên, nếu bạn tạo một thẻ includable với id='new' thì bạn có thể tham chiếu thẻ này trong thẻ includable chính của mình với cú pháp <b:include name='new' /> và thẻ sẽ hiển thị theo cách đó.

Các thuộc tính của thẻ b:include như sau:

  • name (bắt buộc): Mã nhận dạng bao gồm các chữ cái và chữ số. Mã này phải tương ứng với ID của một b:includable hiện có trong cùng một tiện ích.
  • data (không bắt buộc): Một biểu thức hoặc dữ liệu để truyền đến phần thẻ includable. Dữ liệu này sẽ trở thành giá trị của thuộc tính var trong thẻ includable.
  • cond (không bắt buộc) Một biểu thức làm cho thẻ include chỉ thực thi khi kết quả của nó là đúng. Biểu thức này giống với thuộc tính cond trên b:if.

Ví dụ

Dưới đây là ví dụ về cách sử dụng b:includable và b:include.

Nội dung chính cần hiểu ở đây là cách thức phần "main" (chính) bao hàm phần "post" (bài đăng). Phần "main" truyền một bài đăng được gọi là "p" và phần được bao hàm tham chiếu nó dưới dạng var là "post" rồi xuất ra tiêu đề.

Xin lưu ý rằng thẻ include chỉ chạy khi chỉ mục nhỏ hơn 10, do vậy chỉ có tối đa 10 bài đăng sẽ được hiển thị trong ví dụ này (chỉ mục bắt đầu từ 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>

 

Đầu ra dữ liệu (data:)

Ví dụ

  • <data:title/> sẽ  xuất ra tiêu đề của tiện ích

  • <data:photo.url/> - Size: <data.photo.width /> x <data.photo.height /> sẽ xuất ra thuộc tính của thành phần ảnh. Một ảnh có thể có các thành phần như URL, chiều cao và chiều rộng. Việc sử dụng ký hiệu "." cho biết chúng ta muốn URL của ảnh này chứ không phải URL từ nội dung nào khác.

Xem thêm ví dụ

Xem danh sách đầy đủ của chúng tôi về các thẻ dữ liệu bố cục được hỗ trợ.

 

Loop (Vòng lặp) (b:loop)

Trường hợp sử dụng b:loop

Thẻ b:loop cho phép bạn lặp lại nhiều lần một phần nội dung. Thẻ này thường được sử dụng để xuất ra mỗi bài đăng trong danh sách các bài đăng của một trang cụ thể hoặc mỗi nhận xét hay mỗi nhãn, v.v.

Định dạng

Định dạng chung để sử dụng thẻ loop như sau:

 

<b:loop var='identifier' values='set-of-data'>
  [nội dung sẽ được lặp lại ở đây]
</b:loop>

 

Phần 'identifier' (mã nhận dạng) (i) có thể là bất kỳ tên nào bạn chọn và sẽ được sử dụng để đại diện cho mỗi mục mới trong danh sách qua mỗi vòng lặp. Tập hợp dữ liệu bạn chỉ định cho các giá trị có thể là bất kỳ dữ liệu nào được mô tả là danh sách các mục trong bài viết về thẻ dữ liệu.

Ví dụ: trong tiện ích bài đăng trên blog, posts (bài đăng) là một danh sách. Mã như bên dưới sẽ lặp lại qua mỗi bài đăng, xuất ra tiêu đề của mỗi bài đăng với thẻ tiêu đề ở xung quanh.

 

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

 

Hãy để ý cách "i" lần lượt nhận giá trị của mỗi bài đăng, nhờ vậy bạn có thể xuất ra tiêu đề của mỗi bài đăng.

Number Range (Dãy số)

Một thẻ vòng lặp cho phép bạn lặp qua cả một dãy số, chẳng hạn như ‘1 to 3' (từ 1 đến 3), ‘-3 to -9' (từ -3 đến -9), trong đó giá trị của biến nhận giá trị của số. Ví dụ sau sẽ tạo một danh sách các số 1, 2 và 3 không xếp theo thứ tự.

 

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

Thuộc tính chỉ mục

Thẻ loop cũng có thuộc tính chỉ mục không bắt buộc, thuộc tính này cho chỉ mục bắt đầu từ 0 của lần lặp hiện tại qua mỗi vòng lặp.

 

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

 

Ví dụ này sẽ tạo một danh sách không xếp theo thứ tự của:

  • Index: 0, Number: 9
  • Index: 1, Number: 8
  • Index: 2, Number: 7
If, elseif và else (b:if)

Trường hợp sử dụng if, elseif hoặc else

Bạn có thể sử dụng các thẻ b:if, b:elseif và b:else để hiển thị nội dung nhất định trong những trường hợp nhất định và nội dung khác trong những trường hợp khác. Ví dụ: bạn có thể chỉ muốn hiển thị văn bản nhất định trên trang chủ nhưng hiển thị văn bản khác khi xem bài đăng riêng lẻ.

Định dạng

 

<b:if cond='condition'>
  [nội dung hiển thị nếu điều kiện đúng]
<b:elseif cond='another condition'/>
  [nội dung hiển thị nếu không có điều kiện if hoặc elseif nào trước đó đúng và điều kiện elseif này đúng]
<b:else/>
  [nội dung hiển thị nếu không có điều kiện if hoặc elseif nào thỏa mãn]
</b:if>

 

Các thẻ b:elseif và b:else là không bắt buộc. Nếu không có các thẻ này, kết quả sẽ là nội dung được liệt kê trong phần b:if hoặc không có kết quả. Tuy nhiên, thẻ đóng </b:if> là bắt buộc trong mỗi trường hợp.

Bạn có thể đặt bất kỳ nội dung nào có giá trị đúng hoặc sai bên trong "condition" (điều kiện). Bản thân một số thẻ dữ liệu chính là những giá trị đúng/sai, chẳng hạn như allowComments (cho phép nhận xét) trên một bài đăng. Với những dữ liệu khác, bạn có thể so sánh chúng với những giá trị cụ thể để có giá trị đúng hoặc sai. Sau đây là một số ví dụ:

  • <b:if cond='data:post.showBacklinks'>
    Đúng nếu bài đăng hiện tại được đặt để hiển thị liên kết ngược.
  • <b:if cond='data:blog.pageType == "item"'>
    Đúng nếu trang hiện tại là một trang mục (trang bài đăng).
  • <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
    Đúng nếu trang hiện tại là trang mục (trang bài đăng) và bài đăng hiện tại được đặt để hiển thị liên kết ngược.
  • <b:if cond='data:displayname != "Fred"'>
    Đúng nếu đây không phải là tên hiển thị của Fred.
  • <b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
    Đúng nếu Fred là tên hiển thị hoặc trang hiện tại là trang tĩnh (không phải trang bài đăng).
  • <b:if cond='data:post.numComments > 1'>
    Đúng nếu bài đăng có nhiều hơn một nhận xét.
  • <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
    Đúng nếu trang hiện tại là một bài đăng cụ thể hoặc một trang.
Switch (Chuyển đổi) (b:switch)

Trường hợp sử dụng thẻ Switch

Bạn có thể sử dụng thẻ b:switch giống như sử dụng thẻ b:if có nhiều thẻ b:elseif. Lợi ích của nhánh switch là bạn không cần lặp lại tên biến. Bạn có thể dễ dàng đọc các thẻ này để xem mỗi trường hợp và trường hợp mặc định là gì.

Định dạng

<b:switch var='[Data expression]'>
<b:case value="[Value 1]" />
 [Cho kết quả nếu giá trị var bằng Value 1]
<b:case value="[Value 2]" />
 [Cho kết quả nếu giá trị var bằng Value 2]
[… bất kỳ giá trị nào khác]
<b:default />
 [Cho kết quả nếu giá trị var không bằng bất kỳ giá trị nào khác được nêu]
</b:switch>

Ví dụ

Ví dụ này cho thấy cách xuất ra một tiêu đề khác, tùy thuộc vào loại trang đang được hiển thị.

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>Page</h1>
<b:case value="item" />
  <h1>Post</h1>
<b:default />
  <h2>Blog Posts</h2>
</b:switch>

Biểu thức thuộc tính (expr:)

Trường hợp sử dụng Biểu thức

Bạn có thể sử dụng thuộc tính expr để đặt các giá trị thuộc tính dựa trên giá trị trong từ điển dữ liệu. 

Ví dụ

  • <a expr:href='data:blog.homepageUrl'>Home</a>
    Liên kết trang chủ có URL trang chủ của blog.
  • <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a>
    Liên kết có URL nguồn cấp dữ liệu RSS của bài đăng trên blog. Toán tử ‘+' liên kết hai chuỗi này.
  • <a expr:class='data:post.allowComments ? "comment" : "no-comment">Comment</a>
    Liên kết có lớp là "comment" (nhận xét) khi cho phép nhận xét và "no-comment" (không nhận xét) khi không cho phép nhận xét. Toán tử tam phân (?:) nhận giá trị luận lý nhất định và chọn giá trị đầu tiên (sau ?) nếu luận lý đúng hoặc giá trị thứ hai (sau :) nếu luận lý sai.
Evaluated Expression (Biểu thức được đánh giá) (b:eval)

Trường hợp sử dụng biểu thức được đánh giá

Bạn có thể sử dụng thẻ b:eval để đánh giá một biểu thức phức tạp hơn thẻ dữ liệu chuẩn.

Định dạng

<b:eval expr='[Expression]' />

Ví dụ

  • min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
    Cho kết quả tính toán chiều cao tương đối, dựa trên giá trị chiều rộng mới.
  • <b:eval expr="data:post.labels[0].url" />
    Cho kết quả URL của nhãn bài đăng đầu tiên.
  • <b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
    Cho kết quả "Comment" (Nhận xét) khi cho phép nhận xét và "Comments Disabled" (Nhận xét bị vô hiệu hóa) khi không cho phép nhận xét. Lưu ý rằng biểu thức này sử dụng toán tử tam phân.
Variable alias (Bí danh của biến) (b:with)

Trường hợp sử dụng bí danh của biến

Bạn có thể sử dụng thẻ b:with để lưu trữ tạm thời giá trị của biểu thức đã tính và tránh biểu thức nội dòng phức tạp.

Định dạng

<b:with var='myComputedValue' value='[Data expression]' />

Ví dụ

Đối với thuộc tính kiểu phức tạp dựa trên các biến dữ liệu, bạn có thể tính toán thuộc tính đó trước phần còn lại của đầu ra HTML để dễ đọc HTML lồng nhau hơn.

<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>My Header</h1>
   </div>
 </div>
</b:with>

Lưu ý rằng biến sẽ chỉ tồn tại đối với nút con của thẻ b:with.

Hãy xem ví dụ

Nhấp vào để xem ví dụ về cách tất cả các thẻ này được sử dụng trong HTML dành cho tiện ích PageList trong blog của bạn.

Ví dụ

Trong tiện ích này, bạn có thể xem ví dụ về cách sử dụng các thẻ b:widget, b:includable (và b:include), b:if (và b:else) và 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
Tìm kiếm
Xóa nội dung tìm kiếm
Đóng tìm kiếm
Trình đơn chính
2297941840277928610
true
Tìm kiếm trong Trung tâm trợ giúp
true
true
true
true
true
74
false
false