Phân tích XHTML của widget Label và tùy chỉnh

Bài viết này mình sẽ phân tích từng thành phần của widget Label và đưa ra một số ứng dụng phát triển từ code mặc định của nó.

Widget Label sẽ có dạng như sau trong template của bạn

<b:widget id='Label1' locked='false' title='Category List' type='Label'>
  <b:includable id='main'>
    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>
    <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
      <b:if cond='data:display == &quot;list&quot;'>
        <ul>
          <b:loop values='data:labels' var='label'>
            <li>
              <b:if cond='data:blog.url == data:label.url'>
                <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
              <b:else/>
                <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
              </b:if>
              <b:if cond='data:showFreqNumbers'>
                <span dir='ltr'>(<data:label.count/>)</span>
              </b:if>
            </li>
          </b:loop>
        </ul>
      <b:else/>
        <b:loop values='data:labels' var='label'>
          <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
            <b:if cond='data:blog.url == data:label.url'>
              <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
            <b:else/>
              <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
            </b:if>
            <b:if cond='data:showFreqNumbers'>
              <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
            </b:if>
          </span>
        </b:loop>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

Và mình sẽ tách từng phần của đoạn XHTML trên ra để nói về công dụng của widget này để bạn có thể tùy biến nó đơn giản hơn

Tiêu đề của widget

<b:if cond='data:title'>
  <h2><data:title/></h2>
</b:if>

Tiêu đề của Label được nằm trong thẻ h2 và được nằm trong thẻ điều kiện chỉ hiển thị nếu bạn không để tiêu đề trống khi cài đặt widget trong layout(Bố cục)

Điều kiện hiển thị dạng List và Cloud

Đoạn code bên dưới có tác dụng tách 2 loại hiển thị của Label dạng List và Cloud

<b:if cond='data:display == &quot;list&quot;'>
  <!-- Đoạn code hiển thị dạng `list` -->
<b:else/>
  <!-- Đoạn code hiển thị dạng `cloud` -->
</b:if>

Đoạn code hiển thị dạng List

<ul>
  <b:loop values='data:labels' var='label'>
    <li>
      <b:if cond='data:blog.url == data:label.url'>
        <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
      <b:else/>
        <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
      </b:if>
      <b:if cond='data:showFreqNumbers'>
        <span dir='ltr'>(<data:label.count/>)</span>
      </b:if>
    </li>
  </b:loop>
</ul>

Đoạn code hiển thị dạng cloud

<b:loop values='data:labels' var='label'>
  <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
    <b:if cond='data:blog.url == data:label.url'>
      <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
      <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
      <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
    </b:if>
  </span>
</b:loop>

Phân tích từng thành phần dữ liệu trong 2 đoạn code trên

Dữ liệu	Thông Tin	Hiển Thị/ Ảnh Minh Họa
data:display	Yếu tố này để ta lựa chọn các dạng hiển thị cho labels	list, cloud
data:blog.url	[?]
data:label.url	Yếu tố này giúp hiển thị url của từng nhãn.	http://tên blog.blogspot.com/search/label/-/tên Label
data:label.name	Yếu tố này giúp hiển thị tên của từng nhãn.
data:blog.languageDirection	[?]
data:showFreqNumbers	Lựa chọn hiển thị các nhãn theo số lượng hay không.	true, false
data:label.count	Yếu tố này hiển thị số bài viết trên một nhãn.
data:label.cssSize	Yếu tố này giúp cho hiển thị các nhãn theo số cấp dựa theo số lượng bài viết trên các nhãn. Đối với lựa chọn hiển thị dạng cloud có thể điều chỉnh kích thước qua CSS.

Công cụ chỉnh sửa nhanh

Đoạn code bên dưới chính là biểu tượng chỉnh sửa nhanhcủa widget

<b:include name='quickedit'/>

Chỉnh sửa và tùy biến widget Label

Như đã phân tích từng thành phần phía trên, bây giờ ta đã có thể tùy biến theo ý mình. Và sau đây là một ví dụ cụ thể khi bạn để Label hiển thị dạng List, mình sẽ chỉnh sửa đoạn code hiển thị dạng list. Bạn có thể thực hành trên blog demo để hiểu rõ hơn vấn đề

                  <ul>
                      <b:loop values='data:labels' var='label'>
                        <li>
                          <b:if cond='data:blog.url == data:label.url'>
                            <span class='namex' expr:dir='data:blog.languageDirection'>
                              <data:label.name/>
                            </span>
                            <b:else/>
                            <b:if cond='data:showFreqNumbers'>
                              <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;max-results=6&quot;' expr:title='data:label.name'>
                                <span class='countxx'><data:label.count/></span>
                                <data:label.name/>
                              </a>
                              <b:else/>
                              <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;max-results=6&quot;'>
                                <data:label.name/>
                              </a>
                            </b:if>
                          </b:if>
                        </li>
                      </b:loop>
                    </ul>

Như bạn thấy mình đã chỉnh sửa toàn bộ đoạn code được tô màu đỏ. HTML xuất ra khi ta chưa sửa (mặc định) như sau:

<a dir="ltr" href="http://tên blog.blogspot.com/search/label/Tên label">Tên label</a><span dir="ltr">(2)</span>

Và sau khi ta sửa lại HTML sẽ xuất ra như sau:

<a dir="ltr" href="http://tên blog.blogspot.com/search/label/Tên label?&amp;max-results=6" title="Tên nhãn">
<span class="countxx">2</span>
Tên label
</a>

*2 là ví dụ về số bài viết của label
Vậy mình đã đưa dữ liệu đếm số bài viết (data:label.count) lên trước tên nhãn (data:label.name) và thêm vào thẻ span chứa nó class="countxx" (ta có thể thêm style cho số đếm bài viết qua class này). Ngoài ra mình còn thêm title cho link của Label bằng đoạn code expr:title='data:label.name', vậy khi ta rê chuột đến link label sẽ hiển thị title là tên của nhãn đó.
Ở phía trên mình đã nhắc đến việc thêm class="countxx" cho thẻ span chứa số đếm bài viết của 1 label. Vậy ta sẽ thêm đoạn CSS sau vào để tạo style cho nó

.countxx {
display: block;
float: left;
margin-right: 3px;
padding: 0 2px 0 2px;
min-width: 20px;
font-size: 9px;
text-align: center;
background-color: #0671A1;
color: white;
border-radius: 2px;
}

Thực hiện xong các bước trên Label của bạn sẽ hiển thị như sau

Bạn có thể xem demo trực tiếp trên blog này bằng cách click vào Chuyên Mục bên thanh sidebar phải của blog này và một ví dụ nữa khi bạn click vào mục Tips trên khung ribbon

Chúc các bạn thành công!

Tham khảo tài liệu từ DTE :]