Blogger Code - b:class

Đúng như tên gọi, thẻ b:class chỉ dùng để đặt class cho thành phần chứa nó. Nói đến đây nhiều người sẽ đặt ra câu hỏi: sao không đặt class trực tiếp vào tag html luôn cho nóng. Chúng ta sẽ cùng đi tìm hiểu những chức năng hữu ích mà nó mang lại qua bài viết này

+ b:class hoạt động trong tất cả mã XML trừ (b:skin, b:section, b:widget)
+ b:class có thẻ lồng vào nhau

Cách khai báo

<b:class cond='CONDITION' name='CLASS_NAME'/>

hoặc dùng với biểu thức

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

Trong đó thuộc tính name là bắt buộc

Khi tôi viết

<div>
  <b:class name='footer'/>
</div>

Khi render

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

Chỉ đặt class cho trang chủ

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

Khi render sẽ chỉ trang chủ có class là footer

Chèn thêm class vào class

<div class='section'>
  <b:class name='footer'/>
</div>

Khi render

<div class='section footer'>
...
</div>

Để ghi đè class sử dụng thêm thẻ b:attr

<div class='footer'>
  <b:attr name='class' value='header'/>
</div>

Khi render class footer sẽ bị thay thể bởi header

Dùng nhiều b:class cho cùng 1 tag

<div class='section'>
  <b:class name='footer'/>
  <b:class name='left'/>
</div>

Kết quả

<div class='section footer left'>
...
</div>

Sử dụng với rẽ nhánh

<div>
  <b:class expr:name='data:view.isHomepage ? "superfooter" : "footer"'/>
</div>

Khi đó trang chủ div sẽ có class là superfooter và các trang còn lại có class là footer

Như vậy khi sử dụng thẻ b:class bạn có thể kết hợp với thẻ điều kiện cond='xxx' để đặt class cho các trang khác nhau, điều này sẽ giúp bạn dễ dàng css cho từng trang hơn

Chúc bạn học tốt