Một số thẻ điều kiện thông dụng và cách sử dụng trong Blogspot

Nếu bạn thường xuyên chỉnh sửa mẫu template ắt hản bạn phải biết đến thẻ điều kiện tuy nhiên các thẻ điều kiện này nhiều lắm không tài nào nhớ nổi và tất nhiên bạn phải hiểu thẻ điều kiện đó là gì sử dụng thế nào mới hợp lý.

Blogger cung cấp sẵn cho chúng ta danh sách các thẻ điều kiện mới khi họ cập nhật các mẫu mặc định như các mẫu Contempo, Soho, Emporio. Dưới đây là danh sách các thẻ điều kiện thông dụng thường được sử dụng nhất và cách sử dụng trong template.

Danh sách thẻ điều kiện thông dụng

1. data:view.isMultipleItems: bao gồm các trang sau:

+ data:view.isHomepage: Trang chủ
+ data:view.isLabelSearch: Trang Nhãn
+ data:view.isSearch: Các trang có /search đằng sau địa chỉ trang chủ
+ data:blog.searchQuery: Trang tìm kiếm từ khóa
+ data:view.isArchive: Trang lưu trữ
+ data:blog.searchLabel == &quotTên nhãn" Trang tìm kiếm cho 1 nhãn cố định

2. data:view.isSingleItem: Trang bài viết và trang tĩnh

+ data:view.isPost: Trang bài viết
+ data:view.isPage: Trang tĩnh

3. data:blog.pageId == "page_ID": Trang tĩnh với điều kiện page_ID

4. data:view.isError: Trang báo lỗi 404

5. data:blog.url == data:blog.canonicalHomepageUrl + "Url": Điều kiện với Url

6. Các thẻ điều kiện chỉ hoạt động với widget Blog1

+ data:post.isFirstPost: Bài viết đầu tiên
+ data:post.title: Tiêu đề bài viết
+ data:post.id == "post_ID": ID bài viết
+ data:label.name == "tên nhãn" Tên một nhãn cụ thể
+ data:post.firstImageUrl: Ảnh đầu tiên của bài viết
+ data:post.link: Liên kết tiêu đề
+ data:post.url: Url bài viết

Cách sử dụng các thẻ điều kiện

+ Các thẻ điều kiện mà mình liệt kê ở phần trên phải được đặt trong cond='thẻ điều kiện' ví dụ: cond='data:view.isHomepage'

+ Thêm dấu chấm than (!) đằng trước thẻ nếu điều kiện đó không bằng, ví dụ cond='!data:view.isHomepage'

+ Nội dung trong thẻ điều kiện có thể là thẻ meta, css, javascript hay html

+ Từ mục 1 đến mục 5 có thể đặt bất cứ chỗ nào trong template nhưng phải đặt trong

- <b:if...> kết thúc bằng </b:if>, ví dụ <b:if cond='data:view.isHomepage'>
- <b:section ...> kết thúc bằng </b:section>, ví dụ: <b:section cond='data:view.isSingleItem' id='qc_bottom' name='QC_Bottom' showaddelement='false'>
- <b:widget...> kết thúc bằng </b:widget>, ví dụ <b:widget cond='data:view.isPost' id='PopularPosts1' locked='true' title='Phổ biến trong tuần' type='PopularPosts' version='1'>

+ Sử dụng 'and' hoặc 'or' hoặc <b:else/> kết hợp nhiều điều kiện trong một thẻ, ví dụ:

- Sử dụng với 'and': <b:widget cond='data:view.isMultipleItems and !data:blog.searchQuery' id='HTML3' locked='true' title='Quảng cáo' type='HTML' version='2' visible='false'>
- Sử dụng với 'or': <b:if cond='data:post.id == "postID 1" or 'data:post.id == "postID 2" or 'data:post.id == "postID n"'>
- Sử dụng với <b:else/> ví dụ:

Copy

<b:if cond='data:view.isMultipleItems and !data:view.isHomepage'>

// Nội dung

<b:else/>

<b:if cond='data:view.isHomepage'>

// Nội dung

<b:else/>

// Nội dung

</b:if></b:if>

+ Các thẻ điều kiện trong mục 6 chỉ được đặt trong widget Blog và trong thẻ <b:if...> kết thúc bằng </b:if>, ví dụ <b:if cond='data:post.isFirstPost'>

Một vài lưu ý:

+ Khi sử dụng thẻ điều kiện nên sử dụng kết hợp nhiều điều kiện trong một thẻ chẳng hạn khi đặt thẻ meta sử dụng cho các trang tiếp theo

Copy

<b:if cond='data:view.isSearch and !data:view.isLabelSearch and !data:blog.searchQuery'>

<title><data:messages.morePosts/> - <data:blog.title/></title>

<meta expr:content='data:messages.morePosts +  &quot; - &quot; + data:blog.title' name='description'/>

</b:if>

Hoặc khi viết css cho trang tĩnh nhưng loại bỏ một trang cụ thể

Copy

<b:if cond='data:view.isPage and data:blog.pageId != "5383490038187241731"'>

<style>

#backer{display:none}

</style>

</b:if>

+ Nếu bắt buộc phải sử dụng thẻ điều kiện trong <b:if> thì mới sử dụng còn không cứ đặt thẻ điều kiện trực tiếp trong <b:section > hoặc <b:widget>. Lấy ví dụ cấu trúc HTML khi đặt thẻ <b:if>

Copy

<b:if cond='data:view.isSingleItem'>

<div class=sidebar-wrapper'>

  <b:section class='sidebar' id='sidebar' name='Sidebar' showaddelement='true'>

    <b:widget...>...</b:widget>

  </b:section>

</div>

</b:if>

Chúng ta có thể thiết kế lại như sau để tối ưu hơn:

Copy

<b:section cond='data:view.isSingleItem' class='sidebar-wrapper' id='sidebar' name='Sidebar' showaddelement='true'>

  <b:widget...>...</b:widget>

</b:section>

Vì <b:section > hay <b:widget> khi tải trang đều ra thẻ <div> nên không cần thiết phải đặt <b:section > trong thẻ <div> mà đặt class trực tiếp trong <b:section >

+ Nếu đã đặt điều kiện trong <b:section > vẫn có thể đặt điều kiện trong <b:widget> nhưng phải điều kiện cho một trang cụ thể ví dụ:

Copy

<b:section cond='data:view.isSingleItem' class='sidebar-wrapper' id='sidebar' name='Sidebar' showaddelement='true'>

  <b:widget cond='data:view.isPost'>...</b:widget>

  <b:widget  cond='data:view.isPage'>...</b:widget>

</b:section>

Nội dung chính