Cách sử dụng thẻ b:attr và b:class trong blogspot

b:attr và b:class là 2 thẻ bổ sung trong blogspot, nó không yêu cầu bắt buộc phải sử dụng. Trong một số trường hợp nếu biết vận dụng 2 thẻ này sẽ giúp bạn giải quyết được vấn đề mà không cần sử dụng đến script

Tác dụng của 2 thẻ này thêm thuộc tính cho thành phần cha của nó. Nếu như b:attr có thể thêm nhiều thuộc tính như: href, style, src, class, id..thì thẻ b:class chỉ thêm được duy nhất được thuộc tính class.

Lấy ví dụ minh họa ta có đoạn html trong template sau đây:

<a class='homepage' href='https://www.thietkeblogspot.com/' title='Việt Design'></a>

Nếu dùng b:attr

<a>
  <!--Thêm thuộc tính class với giá trị bằng homepage-->
  <b:attr name='class' value='homepage'/>
  <!--Thêm thuộc tính href với giá trị bằng https://www.thietkeblogspot.com/-->
  <b:attr name='href' value='https://www.thietkeblogspot.com/'/>
  <!--Thêm thuộc tính title với giá trị bằng Việt Design-->
  <b:attr name='title' value='Việt Design'/>
</a>

Nếu dùng b:class

<a href='https://www.thietkeblogspot.com/' title='Việt Design'>
  <!--Thêm thuộc tính class với giá trị bằng homepage-->
  <b:class name='homepage'/>
</a>

Cú pháp của b:attr và b:class

<b:attr name='ATTRIBUTE_NAME' value='VALUE'/>
<b:class name='CLASS_NAME'/>
Sử dụng với điều kiện
<b:attr cond='CONDITION' name='ATTRIBUTE_NAME' value='VALUE'/>
<b:class cond='CONDITION' name='CLASS_NAME'/>
Sử dụng với điều kiện và expr đọc dữ liệu
<b:attr cond='CONDITION' expr:name='EXPRESSION' expr:value='EXPRESSION'/>
<b:class cond='CONDITION' expr:name='EXPRESSION'/>

Một vài ví dụ

Ví dụ 1: Giả sử mình muốn có class active trong thẻ li chỉ hiển thị ở trang chủ

Thay vì cách đặt mã xml thông thường sử dụng điều kiện

<b:if cond='data:view.isHomepage'>
  <li class='active'>
    <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home'><data:messages.home/></a>
  </li>
<b:else/>
  <li>
    <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home'><data:messages.home/></a>
  </li>
</b:if>

Mình sẽ viết rút gọn code thành như sau:

+ Sử dụng b:attr
<li>
  <b:attr cond='data:view.isHomepage' name='class' value='active'/>
  <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home'><data:messages.home/></a>
</li>
+ Sử dụng b:class
<li>
  <b:class cond='data:view.isHomepage' name='active'/>
  <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home'><data:messages.home/></a>
</li>

Ví dụ 2: Giả sử mình muốn class has-sticky chỉ có ở nhóm trang index và class has-jump chỉ có ở nhóm trang bài viết cùng với class header

// Nhóm trang index
<div class='header has-sticky'>
  <!--Trong này là các đoạn code rất dài-->
</div>
// Nhóm trang item
<div class='header has-jump'>
  <!--Trong này là các đoạn code rất dài-->
</div>

Với trường hợp code dài không thể sử dụng điều kiện trực tiếp, thay vào đó phải sử dụng javaScript hoặc Jquery thêm class và remove class

<b:if cond='data:view.isSingleItem'>
// Sử dụng javaScript
<script>
  var element = document.querySelector('.header');
  element.classList.add('has-jump');
  element.classList.remove('has-sticky');
</script>
// Sử dụng Jquery
<script>
  $('.header').removeClass('has-sticky').addClass('has-jump');
</script>
</b:if>

Tuy nhiên, bạn không cần sử dụng đến javaScript hay Jquery đều có thể thêm và loại bỏ class như sau:

+ Sử dụng b:attr
<div class='header'>
  <b:attr expr:value='data:view.isMultipleItems ? "has-sticky" : "has-jump"' name='class'/>
  <!--Trong này là các đoạn code rất dài-->
</div>
+ Sử dụng b:class
<div class='header'>
  <b:class expr:name='data:view.isMultipleItems ? "has-sticky" : "has-jump"'/>
  <!--Trong này là các đoạn code rất dài-->
</div>

Lưu ý

1. Thẻ b:attr và b:class có thể sử dụng xuyên suốt chủ đề chỉ trừ trong <b:skin>
2. Tác dụng của thẻ b:attr và b:class: Thêm thuộc tính trực tiếp vào thành phần cha giúp rút ngắn mã xml hoặc html trong template
3. Thẻ b:attr có thể thêm bất kỳ thuộc tính nào trong khi b:class chỉ thêm được class
4. Nếu chỉ đơn giản thêm class nên sử dụng b:class cho gọn còn thêm các thuộc tính khác mới sử dụng b:attr
5. Không nhất thiết phải sử dụng các thẻ này nhưng nếu sử dụng phải đúng cú pháp vì nếu sai sẽ không hiển thị được html thậm chí lỗi không hiển thị luôn cả widget nếu sử dụng thẻ trong b:widget
6. Nên sử dụng b:attr và b:class kết hợp với điều kiện