Cách sử dụng thẻ b:class và b:attr thêm thuộc tính vào widget

Mặc định các thẻ b:widget bao gồm một số thuộc tính bắt buộc: id, title và type trong đó với thuộc tính type có giá trị bằng với loại của tiện ích ví dụ: HTML, PopularPosts, Label...bạn không thể sửa được giá trị này. Với thuộc tính id thì giá trị của nó bằng với loại tiện ích và số đằng sau và bạn cũng chỉ thay đổi được số ví dụ sửa HTML1 thành HTML2 nếu trong template chưa có tiện ích HTML khác có id giá trị bằng HTML2.

Lưu ý: 999 là con số tối đa cho mỗi loại tiện ích (widget) mà bạn thêm được

Các thẻ b:widget khi trích xuất HTML được thay thế bằng các thẻ div và tự động thêm class có giá trị mặc định widget và giá trị bằng thuộc tính type của b:widget, suy ra mỗi thẻ b:widget khi trích xuất HTML đều có 2 giá trị trong thuộc tính class.

Nếu bạn muốn thêm các thuộc tính khác vào widget khi trích xuất HTML, bạn có thể sử dụng đến 2 thẻ mặc định có sẵn: b:class và b:attr. Cách thực hiện như sau:

Trong mỗi thẻ b:widget đều có một cặp thẻ <b:includable id='main'>⋯</b:includable> hoặc <b:includable id='main' var='this'>⋯</b:includable>, bạn có thể sử dụng b:class và b:attr để thêm thuộc tính cho widget trong này.

Giả sử mình muốn thêm class PopularPosts vào widget HTML/Javascript, mình sẽ thêm như sau:

<b:widget id='HTML1' locked='false' title='Bài đăng mới' type='HTML' visible='true'>

  <b:widget-settings>⋯</b:widget-settings>

  <b:includable id='main'>

    <!--Sử dụng b:class-->

    <b:class name='PopularPosts'/>

    <!--Sử dụng b:attr-->

    <b:attr name='class' value='PopularPosts'/>

    <!--Mặc định-->

    <b:include name='widget-title'/>

    <div class='widget-content'>

      <data:content/>

    </div>

  </b:includable>

</b:widget>

=> Khi trích xuất HTML

<div class="widget HTML PopularPosts" data-version="2" id="HTML1">



</div>

Nếu bạn muốn thêm các thuộc tính khác ngoài thuộc tính class thì chỉ sử dụng được thẻ b:attr để thêm thuộc tính.