Blogger Code - b:tag

Một blogger giỏi không phải chỉ tải theme trên mạng về edit một chút css, js,thay font... rồi gán bản quyền thành của mình, một blogger giỏi là người làm chủ được code trên blog, nắm vững được hệ thống thẻ của blogger và có thể tự thiết kế, nâng cấp, bảo trì được template của mình. Trong loạt bài tới đây tôi sẽ lần lượt giới thiệu cho các bạn các thẻ thường dùng trong nền tảng blogger để bạn có thể tự thiết kế theme cho riêng mình, bắt đầu từ bài viết này sẽ là thẻ b:tag

Cách sử dụng b:tag rất đơn giản, nó cũng tương tự như các tag cơ bản trong HTML, được sử dụng trong hệ thống XML Editor của blog và sẽ được render sang mã HTML khi qua server của blogger.

+ b:tag hoạt động trong nội dung body (không đặt trong head, b:skin, b:section, b:widget)
+ b:tag có thể lồng vào nhau như các tag HTML cơ bản
+ b:tag phải có thuộc tính (ví dụ <b:tag name='xxx'/>)

Cấu trúc cơ bản của 1 thẻ b:tag

<b:tag cond='CONDITION' name='TAG_NAME'>
...
</b:tag>

hoặc

<b:tag cond='CONDITION' expr:name='EXPRESSION'>
...
</b:tag>

Ví dụ tôi viết

<b:tag name='div'>
...
</b:tag>

Khi render sang mã HTML sẽ thu được

<div>
...
</div>

Thêm điều kiện ví dụ chỉ hiển thị ở trang chủ

<b:tag cond='data:view.isHomepage' name='div'>
...
</b:tag>

Sử dụng với rẽ nhánh "Nếu trang chủ thì render thành div nếu không thì thành span"

<b:tag expr:name='data:view.isHomepage ? "div" : "span"'>
...
</b:tag>

Đặt class cho thẻ

<b:tag name='div' class='header'>
...
</b:tag>

Khi render

<div class='header'>
...
</div>

Kết hợp với b:attr (sẽ trình bày ở bài sau)

<b:tag name='div'>
  <b:attr name='name' value='section1'/>
</b:tag>

Kết quả

<div name='section1'>
...
</div>

Như vậy việc sử dụng thẻ b:tag này rất tối ưu cho việc thiết kế, thay vì dùng

<b:if cond='xxx'>
    <div>
         ...
    </div>
</b:if>

Tôi có thể gói gọn nó chỉ trong một lần khai báo

Hẹn gặp lại ở bài viết sau !