b:tag là một trong các thẻ dữ liệu phụ của Blogger và nó không bắt buộc phải sử dụng. Tuy nhiên nếu bạn biết áp dụng thẻ b:tag trong một số trường hợp nó lại đặc biệt hữu ích giúp các đoạn mã xml trở nên gọn gàng hơn mà giá trị không thay đổi.
Cú pháp của b:tag
Thẻ b:tag được sử dụng xuyên suốt chủ đề Blogger với cú pháp sau:
<b:tag name='tag-name'/>
Ví dụ:
<b:tag class='blogger-btag' name='div' />
<b:tag name='style' href='/demo.css' rel='stylesheet' />
<b:tag name='script' src='/jquery.min.js' />
Hiển thị đầu ra
<div class="blogger-btag"></div>
<link href="/demo.css" rel="stylesheet" />
<script src="/jquery.min.js" />
Sử dụng b:tag kết hợp điều kiện
<b:tag cond='condition' name='tag-name' />
Ví dụ chỉ tải link demo.css ở trang chủ
<b:tag cond='data:view.isHomepage' name='style' href='/demo.css' rel='stylesheet' />
Một vài ví dụ khi sử dụng b:tag
Viết css trong b:tag
Thay vì bạn sẽ viết css trong style với điều kiện ở trang index
<b:if cond='data:view.isMultipleItems'>
<style type='text/css'>
/* <![CDATA[ */
// Viết css các element con chỉ tải ở các trang index
/* ]]> */</style>
</b:if>
Bạn có thể thay thế style thành b:tag thành như sau:
<b:if cond='data:view.isMultipleItems'>
<b:tag name='style'>
/* <![CDATA[ */
// Viết css các element con chỉ tải ở các trang index
/* ]]> */</b:tag>
</b:if>
Lưu ý: Bạn không nên lồng điều kiện trong b:tag như tải link css, cụ thể viết gọn thành
<b:tag cond='data:view.isMultipleItems' name='style'>
/* <![CDATA[ */
// Viết css các element con chỉ tải ở các trang index
/* ]]> */</b:tag>
Vì khi viết gọn như vậy về nguyên tắc không sai, nhưng nếu ở các trang khác các dòng code css đó vẫn hiển thị màu xanh (không tải) như vậy sẽ mất thẩm mỹ.
Một lợi ích rất hay khi đặt code css trong b:tag là các dòng code đó sẽ chuyển sang màu tương đồng với màu css trong b:skin với trường hợp phải được đặt trong CDATA
Lấy ảnh bài viết
Giả sử mình muốn lấy ảnh bài viết hiển thị ở nhóm các trang index, mình có đoạn mã xml sau:
<a expr:href='data:post.url.canonical' expr:title='data:post.title'>
<b:if cond='data:view.featuredImage.isYouTube'>
<!-- Nếu bài viết nhúng video từ YouTube -->
<img expr:alt='data:post.title' expr:src='resizeImage(data:view.featuredImage.youtubeMaxResDefaultUrl, 320, "16:9")' />
<b:elseif cond='data:post.featuredImage'/>
<!-- Nếu bài viết up ảnh -->
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.featuredImage, 320, "16:9")'/>
<b:else/>
<!-- Nếu bài viết không có ảnh -->
<img expr:alt='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s320/safe_image.png'/>
</b:if>
</a>
Thay vào đó, mình sẽ sử dụng b:tag cho ảnh
<a expr:href='data:post.url.canonical' expr:title='data:post.title'>
<b:tag cond='data:view.featuredImage.isYouTube' expr:alt='data:post.title' expr:src='resizeImage(data:view.featuredImage.youtubeMaxResDefaultUrl, 320, "16:9")' name='img'/>
<b:tag cond='data:post.featuredImage' expr:alt='data:post.title' expr:src='resizeImage(data:post.featuredImage, 320, "16:9")' name='img'/>
<b:tag cond='!data:view.featuredImage.isYouTube and !data:post.featuredImage' expr:alt='data:post.title' name='img' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s320/safe_image.png'/>
</a>
Thẻ tag img đã được thay thế thành b:tag với name='img' và điều kiện cũng được đặt luôn trong b:tag. Ta có 3 thẻ b:tag với 3 điều kiện ảnh, tuy nhiên nếu chỉ sử dụng một thẻ b:tag duy nhất, lúc này cần thêm thẻ mới có tên b:attr
<a expr:href='data:post.url.canonical' expr:title='data:post.title'>
<b:tag expr:alt='data:post.title' name='img'>
<b:attr cond='data:view.featuredImage.isYouTube' name='src' expr:value='resizeImage(data:view.featuredImage.youtubeMaxResDefaultUrl, 320, "16:9")'/>
<b:attr cond='data:post.featuredImage' name='src' expr:value='resizeImage(data:post.featuredImage, 320, "16:9")'/>
<b:attr cond='!data:view.featuredImage.isYouTube and !data:post.featuredImage' name='src' value='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s320/safe_image.png'/>
</b:tag>
</a>
Hoặc cũng có thể thay thế thẻ liên kết a bao quanh bằng b:tag với name='a'
<b:tag expr:href='data:post.url.canonical' expr:title='data:post.title' name='a'>
<b:tag expr:alt='data:post.title' name='img'>
<b:attr cond='data:view.featuredImage.isYouTube' name='src' expr:value='resizeImage(data:view.featuredImage.youtubeMaxResDefaultUrl, 320, "16:9")'/>
<b:attr cond='data:post.featuredImage' name='src' expr:value='resizeImage(data:post.featuredImage, 320, "16:9")'/>
<b:attr cond='!data:view.featuredImage.isYouTube and !data:post.featuredImage' name='src' value='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s320/safe_image.png'/>
</b:tag>
</b:tag>
Mở rộng, nếu mình muốn chèn thêm điều kiện cho liên kết tiêu đề data:post.link, thay vì phải dùng đoạn code sau:
<div class='post_thumb'>
<b:if cond='data:post.link'>
<b:tag expr:href='data:post.link' expr:title='data:post.title' name='a'>
<b:tag expr:alt='data:post.title' name='img'>
<b:attr cond='data:view.featuredImage.isYouTube' name='src' expr:value='resizeImage(data:view.featuredImage.youtubeMaxResDefaultUrl, 320, "16:9")'/>
<b:attr cond='data:post.featuredImage' name='src' expr:value='resizeImage(data:post.featuredImage, 320, "16:9")'/>
<b:attr cond='!data:view.featuredImage.isYouTube and !data:post.featuredImage' name='src' value='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s320/safe_image.png'/>
</b:tag>
</b:tag>
<b:else/>
<b:tag expr:href='data:post.url.canonical' expr:title='data:post.title' name='a'>
<b:tag expr:alt='data:post.title' name='img'>
<b:attr cond='data:view.featuredImage.isYouTube' name='src' expr:value='resizeImage(data:view.featuredImage.youtubeMaxResDefaultUrl, 320, "16:9")'/>
<b:attr cond='data:post.featuredImage' name='src' expr:value='resizeImage(data:post.featuredImage, 320, "16:9")'/>
<b:attr cond='!data:view.featuredImage.isYouTube and !data:post.featuredImage' name='src' value='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s320/safe_image.png'/>
</b:tag>
</b:tag>
</b:if>
</div>
Mình có thể rút gọn thành
<b:tag class='post_thumb' name='div'>
<b:tag expr:title='data:post.title' name='a'>
<b:if cond='data:post.link'>
<b:attr expr:value='data:post.link' name='href'/>
<b:else/>
<b:attr expr:value='data:post.url.canonical' name='href'/>
</b:if>
<b:tag expr:alt='data:post.title' name='img'>
<b:attr cond='data:view.featuredImage.isYouTube' expr:value='resizeImage(data:view.featuredImage.youtubeMaxResDefaultUrl, 320, "16:9")' name='src'/>
<b:attr cond='data:post.featuredImage' expr:value='resizeImage(data:post.featuredImage, 320, "16:9")' name='src'/>
<b:attr cond='!data:view.featuredImage.isYouTube and !data:post.featuredImage' name='src' value='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s320/safe_image.png'/>
</b:tag>
</b:tag>
</b:tag>
Một vài lưu ý
- Thẻ b:tag là không bắt buộc có thể sử dụng hoặc không
- Nếu sử dụng phải chính xác nếu không bị lỗi không hiển thị được dữ liệu, nghiêm trọng hơn nếu sử dụng trong widget lỗi và không hiển thị cả widget
- Nên kết hợp thẻ tag b:attr trong b:tag đề hợp nhất thành một b:tag duy nhất nếu một đoạn dữ liệu xml sử dụng đồng thời nhiều b:tag
