Sử dụng data Blogger trong thuộc tính của HTML

Hiện tại thì rất nhiều thủ thuật trên blog này, đặc biệt là những thủ thuật về chỉnh sửa cho template đạt chuẩn HTML5, ví dụ gần đây nhất là có 2 bài Bài đăng phổ biến chuẩn HTML5 và Nhận xét phân cấp hack. Thủ thuật này hoàn toàn không có gì ghê gớm cả, nó xuất hiện trong Blogger từ xưa đến nay rồi, đơn giản là không có ai hướng dẫn cả.


Thế nên hôm nay mình cũng xin chia sẻ luôn với các bạn, những người có thể đã biết hoặc chưa biết về việc sử dụng data của Blogger trong các thuộc tính của thẻ HTML, để các bạn có thể tiện hơn trong việc tự mình tủy biến hoặc tối ưu giao diện của Blogger.

Lưu ý là bạn nào chưa biết data trong Blogger là gì và cách sử dụng nó thì hãy tham khảo qua bài viết

• Thẻ data là gì và cách sử dụng nó trong Blogger

còn rất nhiều thứ khác trong chuyên mục lập trình Blogger của mình nếu bạn có nhu cầu có thể tham khảo qua.

Sử dụng data Blogger trong thuộc tính của HTML

Ở trên mình có nói rằng nó đã xuất hiện trong Blogger từ lâu rồi, vậy nó nằm đâu. Trong bất kì một Template nào, khi mở chúng ta để tham khảo code ở bên trong chúng, bạn sẽ thấy có rất rất nhiều những đoạn html trong đó có chứa thuộc tính "expr".

Chính là nó đấy các bạn ạ, và theo vài thử nghiệm cá nhân của mình trong việc sử dụng nó, mình xin được mạn phép đưa ra cú pháp để sử dụng nó như sau:

<tên_thẻ expr:tên_thuộc_tính="data:tên_data">

ví dụ

<meta expr:content='data:blog.metaDescription' name='description'/>

khi chạy nó ra ra thế này

<meta content='mô tả của bài viết hoặc của trang chủ' name='description'/>

Một điều nữa là nếu như bạn nào muốn sử dụng thêm chữ nào đó để kết hợp với data thì làm theo cú pháp sau.

<tên_thẻ expr:tên_thuộc_tính="data:tên_data + &quot;tên_chữ&quot;">

vì dụ như trong widget blog mặc định, bạn sẽ thấy một đoạn mã sau

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>

ở đây họ gắn vào post-body với id của bài viết khi chạy đoạn mã trên thì nó sẽ thành ra thế này

<div class='post-body entry-content' id='post-body-XXXXXXXXX' itemprop='articleBody'>

với XXXXXXXXX là id của bài viết hiện tại.

Bạn có thể xem lại bài "Bài đăng phổ biến đạt chuẩn HTML5" của mình để tham khảo thêm mình đã đưa chiều cao chiều rộng ảnh vào thuộc tính style thế nào.

Lời kết

Về mấy bài viết hướng dẫn về ngôn ngữ lập trình nhỏ của Blogger thường thì có đôi phân khó hiểu, do đó đọc tới đâu thì test tới đó thì bạn sẽ cảm thấy dễ dàng hơn. Mọi thắc mắc thêm thì bạn có thể thoải mái để lại nhận xét ở dưới nhé.