Sử dụng tiện ích (widget) trong thiết kế template

Blogger cung cấp 29 tiện ích mặc định để bạn có thể áp dụng trong thiết kế template mà nguyên tắc mà mình đã đưa ra trong bài trước khi thiết kế bắt buộc phải sử dụng widget thay vì chèn html trực tiếp trong template.


Đầu tiên bạn cần có ý tưởng thiết kế rằng tôi sẽ sử dụng những widget nào? Làm thế nào để đơn giản hóa với người sử dụng template do tôi thiết kế. Trong bài này mình sẽ lấy ví dụ minh họa rõ hơn để các bạn tham khảo.

Đầu tiên tôi cần xây dựng bố cục cho phần hiển thị như sau:

<body>
<header id='header'>
  <div class='container'>
    // HTML hiển thị đầu trang
  </div>
</header>
<section id='page_body'>
  <div class='container'>
    // HTML hiển thị thân trang
  </div>
</section>
<footer id='footer'>
  <div class='container'>
    // HTML hiển thị chân trang trang
  </div>
</footer>
</body>

Trong đó tôi sử dụng class .container lấy kích thước hiển thị tối đa ví dụ:

. container {
  max-width: 1128px;
  margin: auto;
}

Bây giờ tôi sẽ đi vào thêm widget cho các phần hiển thị HTML

+ Với đầu trang tôi cần các tiện ích:
  • Tiêu đề (1)
  • Nhãn (1)
  • Tìm kiếm blog (1)
  • Danh sách liên kết (1)
  • HTML/Javascript (2)
Như vậy tôi cần tất cả 6 tiện ích, tôi sẽ chia 6 tiện ích thành 2 bên với bên trái 4 và bên phải 2 như vậy tôi phải thêm 2 thẻ tag b:section trong template để thêm tiện ích như sau:

<b:section id='header-left' name='Header (Left)' showaddelement='true'></b:section>
<b:section id='header-right' name='Header (Right)' showaddelement='true'></b:section>

Khi thêm xong lưu mẫu tôi vào phần Bố cục tôi chọn thêm các tiện ích mà tôi cần


Khi thêm xong lưu sắp xếp lại tôi vào chỉnh sửa template chọn đến các tiện ích vừa thêm chỉnh sửa lại bằng cách sử dụng thẻ data gọi dữ liệu của tiện ích ví dụ tôi muốn chỉnh sửa nội dung hiển thị trong tiện ích HTML sẽ có 2 thẻ data là data:title và data:content.

Trong cấu hình của tiện ích HTML có thẻ tag b:includable trong này có đoạn:

<b:includable id='main'>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>

Tôi sửa lại nội dung trong phần chữ màu xanh như sau:

<b:includable id='main'>
  <div class='follow'>
    <a expr:href='&quot;//www.blogger.com/follow-blog.g?blogID=&quot;+data:content' expr:title='data:title' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=590,height=540&quot;); return false;' rel='nofollow' target='blank'><data:title/></a>
  </div>
</b:includable>

Trong đó tôi cấu hình khi người dùng cài đặt tiện ích


sẽ cho ra đoạn HTML hiển thị

<div class="follow">
<a href="//www.blogger.com/follow-blog.g?blogID=670287149123457733" onclick="javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=590,height=540&quot;); return false;" rel="nofollow" target="blank" title="Theo dõi Blog">Theo dõi Blog</a>
</div>

Cứ như vậy bạn xây dựng tiện ích bằng cách cấu hình HTML trong tiện ích và bạn cần sử dụng đến thẻ data gọi dữ liệu của tiện ích và lệnh expr đọc thẻ data nếu phải sử dụng thẻ data trong thẻ tag ví dụ:

- Nếu sử dụng bên ngoài thẻ tag sử dụng: <data:content/>
- Nếu sử dụng trong thẻ tag ví dụ thẻ tag 'a' sử dụng expr:title='data:title'

Một ví dụ thêm khi xây dựng cho tiện ích LinkList cấu hình như sau trong thẻ tag b:includable:

<b:includable id='content'>
  <div class='dds'>
    <button class='dropdwn' expr:title='data:title'>
      <svg><use xlink:href='/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/></svg>
    </button>
    <div class='dds-menu'>
      <ul>
        <b:loop values='data:links' var='link'>
          <li>
            <a expr:href='data:link.target' expr:title='data:link.name' target='_blank'><data:link.name/></a>
          </li>
        </b:loop>
      </ul>
    </div>
  </div>
</b:includable>

Như vậy khi thiết kế tổng thể cho phần hiển thị HTML đầu trang như hình minh họa dưới đây:


Bài viết tham khảo:
Chấm hết bài!!!!
Bài đăng mới hơn Bài đăng cũ hơn
Bài viết này có hữu ích không?