Blogger Code - b:attr

Thẻ đơn b:attr dùng để thêm thuộc tính cho thành phần cha, trong bài viết này chúng ta sẽ tìm hiểu cách sử dụng nó

+ b:attr hoạt động trong body (không đặt trong b:skin, b:section, b:widget)
+ b:attr có thể lồng nhau
+ b:attr phải nằm trong 1 tag nào đó

Cấu trúc

<div>
  <b:attr cond='CONDITION' name='ATTRIBUTE_NAME' value='VALUE'/>
</div>

Hoặc sử dụng với biểu thức

<div>
  <b:attr cond='CONDITION' expr:name='EXPRESSION' expr:value='EXPRESSION'/>
</div>

2 thuộc tính bắt buộc cho thẻ này đó là name và value. Ví dụ khi tôi viết

<div>
  <b:attr id='ILOVEBLOGGER'/>
</div>

Khi render

<div id='ILOVEBLOGGER'>
...
</div>

Viết

<div>
  <b:attr cond='data:view.isHomepage' name='style' value='background: transparent'/>
</div>

Kết quả với trang chủ

<div style='background: transparent'>
...
</div>

Những trang khác sẽ không có style trên

Khi sử dụng với biểu thức

<a>
  <b:attr name='href' expr:value='data:blog.homepageUrl path "/search/" params { label: "TOTO" }'/>
  LINK
</a>

Kết quả

<a href='https://BLOG_NAME.blogspot.com/search?label=TOTO'>
 LINK
</a>

Kết hợp nhiều thẻ b:attr

<a>
  <b:attr name='href' expr:value='data:view.url'/>
  <b:attr name='target' value='_blank'/>
  <b:attr name='title' expr:value='data:view.title'/>
  LINK
</a>

Kết quả

<a href='https://BLOG_NAME.blogspot.com/' target='_blank' title='PAGE_TITLE'>
  LINK
</a>

Lưu ý: khi kết hợp b:attr với các thẻ đơn như img, input, link trình chỉnh sửa XML của blogger sẽ báo màu đỏ khi đó bạn sẽ khắc phục bằng cách kết hợp b:attr với thẻ b:tag, ví dụ với thẻ img như sau

<b:tag name='img' expr:src='data:view.featuredImage'>
  <b:attr name='alt' value='My image'/>
</b:tag>

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