Tổng hợp các thẻ điều kiện Blogger 2022

 

Bài viết này mình xin tổng hợp các thẻ điều kiện Blogger hay dùng trong thiết kế giao diện Blogspot.

Trong quá trình thiết kế và sử dụng Blogger, mình có hay sử dụng một số thẻ để lập trình. Nay xin phép tổng hợp lại trong bài viết này để anh em tham khảo khi cần thiết.

Các loại thẻ Blogger cơ bản

Thẻ IF / ELSE

Thẻ <b:if> / <b:else/> là thẻ điều kiện cơ bản hay gặp nhất trong thiết kế giao diện của Bloger. Thẻ này dùng để đặt điều kiện thực thi.

Ví dụ về cấu trúc của thẻ IF/ELSE bên dưới:

<!-- Ví dụ về cú pháp thẻ IF/ELSE -->
<b:if cond='data:view.isPost'>

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

<b:else/>

</b:if>

Thẻ Loop

Thẻ <b:loop> trong Blogger dùng để thực hiện vòng lặp. Thẻ này thường được sử dùng để trích xuất dữ liệu trong một mảng.

<!-- Ví dụ về cú pháp vòng lặp LOOP -->
<b:loop index='i' values='data:links' var='link'>
<a expr:title='data:link.name'/>
<data:link.target/>
</a>
</b:loop>

Trong ví dụ ở trên thì hàm <b:loop> dùng để trích xuất dữ liệu trong mảng data:links, biến phần tử được khai báo var='link'.

Để trích xuất giá trị trong hàm <b:loop> ở trên, chúng ta sử dụng cấu trúc: data:"phần tử"."thuộc tính". Ở trong ví dụ trên, phàn tử link có 2 thuộc tính target và name.

Thẻ Tag

Thẻ <b:tag> được dùng để khai báo 1 phần tử HTML trong Blogger. Loại phần tử HTML được quy định bởi thuộc tính name.

<!-- Ví dụ về cú pháp thẻ <b:tag/> -->
<b:tag expr:href="data:blog.homepageUrl.canonical" name="a">
   SAMPLE TEXT
</b:tag>

Trong ví dụ ở trên, chúng ta sử dụng thẻ <b:tag> để khai báo 1 phần tử <a>. Kết quả bên dưới:

<!-- Ví dụ về cú pháp thẻ <b:tag/> -->
<a href="https://omegakd.blogspot.com">
   SAMPLE TEXT
</a>

Thẻ Class

Thẻ <b:class> được sử dụng để thêm class name vào phần tử cha chứa thẻ này. Class name đươc quy định bởi thuộc tính name.

<!-- Ví dụ về cú pháp thẻ <b:class/> -->
<div class="class1">
<b:class cond='data:view.isMultipleItems' name='index-post'/>
SAMPLE TEXT
</div>

Trong ví dụ ở trên, sẽ cho kết quả như bên dưới nếu khớp điều kiện cond='data:view.isMultipleItems' trả về true.

<!-- Ví dụ về cú pháp thẻ <b:class/> -->
<div class="class1 index-post">
SAMPLE TEXT
</div>

Thẻ Includable

Thẻ <b:includable> dùng để gọi một hàm đã khai báo sẵn trước đó. Hàm được gọi quy định bởi thuộc tính name, và khai báo bởi thuộc tính id.

<!-- Ví dụ về cú pháp thẻ <b:includable/> -->

<!-- Khai báo nội dung cho thẻ <b:includable/> -->
<b:includable id='postMeta' var='post'>
   SAMPLE CONTENT
</b:includable>
<!-- Ví dụ về cách sử dụng thẻ <b:includable/>-->
<b:include data='post' name='postMeta'/>

Các loại thẻ điều kiện Blogger

Phần này sẽ trình bày về các loại thẻ điều kiện có thể dùng trong thuộc tính cond. Thuộc tính điều kiện này được sử dụng bởi các thẻ: <b:if>, <b:tag>, <b:class>, <b:loop>, <b:includable>,…

Bên dưới tổng hợp các điều kiện thường dùng trong thuộc tính cond:

Cấu trúc dữ liệu data:view

• data:view.isError: true nếu không tìm thấy trang. Dùng để thiết kế trang Error 404.
• data:view.isHomepage: true nếu là trang chủ.
• data:view.isLabelSearch: true nếu đang xem trang Label.
• data:view.isMobile: true nếu đang xem ở chế độ di động.
• data:view.isPage: true nếu đang xem Trang.
• data:view.isPost: true nếu đang xem Bài viết.
• data:view.isSearch: true nếu đang xem kết quả tìm kiếm.
• data:view.isSingleItem: true nếu đang xem trang đơn: Page/Post
• data:view.isMultipleItems: true nếu đang xem trang đa: HomePage/Search/Archive
• data:view.isLayoutMode: true nếu đang xem ở setting Layout trong dashboard của Blogger.

Xem thêm bản đầy đủ về Blogger Template Cheat Sheet.

Một số ví dụ về các thẻ điều kiện

Trích xuất dữ liệu từ liên kết đính kèm (enclosure link)

Chúng ta có thể lấy dữ liệu từ liên kết đính kèm với bằng cách dùng thẻ <b:loop> như ví dụ sau:

<!-- Ví dụ về trích xuất dữ liệu từ liên kết đính kèm -->
<b:loop index='i' values='data:post.enclosures' var='enclosure'>
   <data:enclosure.url/>
   <data:enclosure.mimeType/>
</b:loop>

Ngoài ra, chúng ta còn có thể kết hợp thẻ điều kiện <b:if> để kiểm tra trước nội dung của liên kết đính kèm. Trong ví dụ bên dưới, sử dụng thẻ <b:if> để kiểm tra đính kèm có tồn tại type audio trước khi tạo liên kết tải.

<!-- Ví dụ về trích xuất dữ liệu từ liên kết đính kèm -->
<b:if cond="data:post.enclosures any (l => l.mimeType in {"audio"})”>
   <b:loop index="i" values="data:post.enclosures" var="enclosure">
      <b:if cond="data:enclosure.mimeType == "audio"">
         <a expr:href="data:enclosure.url">Download</a>
      </b:if>
   </b:loop>
</b:if>

Trích xuất nội dung bài viết

Để trích xuất 1 đoạn ngắn bài viết, chúng ta có thể dùng thẻ <b:eval> để trích xuất nội dung từ data:post.snippets.

<!-- Ví dụ về trích xuất nội từ bài viết -->
<p class='entry-excerpt excerpt'>
   <b:eval expr='data:post.snippets.long snippet { length: 125 }'/>
</p>

Trong đoạn mẫu trên, nội dung bài viết được giới hạn ở 125 ký tự.

Hy vọng bài viết mang lại một số kiến thức hữu ích cho anh em tham khảo trong quá trình thiết kế blogspot.