Thiết kế Blogger Template từ A tới Z (Phần 4) - Cách thức hoạt động của một Widget

Phần 3 tìm hiểu về Blogger XML trước đây mình có nói mình sẽ mỗ sẽ một widget của Blogger ra để các bạn hiểu được nó chạy như thế nào. Thế đây bài viết này mình sẽ giới thiệu đến các bạn cách thức hoạt động của một widget, và đây có lẽ là thứ cuối cùng bạn cần biết để tự mình viết ra một template theo ý muốn.


Đối với bài viết này thì nếu ai đã có hiểu biết về lập trình thì việc này cực kì dễ dàng, nhưng những ai chưa biết hoặc rành lắm cũng có thể yên tâm vì nó hoàn toàn không gọi là quá cao siêu cả. Ok tiến công vào việc chính của chúng ta thôi.

Cách thức hoạt động của một Widget

Để đơn giản hóa vấn đề hoạt động của một widget, mình xin giới thiệu sơ về ngắn gọn cách thức của một ngôn chạy như sau. Đơn giản ở đây chỉ có 2 điều bạn cần biết, điều đầu tiên đối với bất kì một chương trình được viết bằng bất cứ ngôn ngữ lập trình nào, khi bắt đầu chạy, nó sẽ tìm đến một hàm được ngôn ngữ đó quy định trước, thông thường nhất thì hàm đó có tên là "main", điều thứ hai bất kì ngon ngữ lập trình nào cũng chạy theo thứ tự từ trên xuống dưới, từ trái qua phải.

Cũng tương tự như vậy, nếu như một thẻ includable nó tương tự với hàm thì đây widget nó tương tự như một chương trình nhỏ vậy. Khi bắt đầu chạy nó cũng bắt đầu từ id="main" và cũng chạy theo thứ tự từ trên xuống dưới và từ trái sang phải vậy.

Rồi bây giờ mình sẽ lụm cái hàm main của cái widget Blog vào đây để chú thích một vài chỗ nhé, đây là widget bự nhất trong đám widget của Blogger rồi nên chắc giải quyết xong cái này thì không phải nói đến những cái khác nữa.

<b:includable id='main' var='top'>
  <b:if cond='data:mobile == &quot;false&quot;'> <!-- điều kiện không phải là điện thoại xem blog -->

    <!-- posts -->
    <div class='blog-posts hfeed'> <!-- tạo thẻ div một cách bình thường -->

      <b:include data='top' name='status-message'/> <!-- gọi hàm includable status-message bạn có thể vào hàm này xem thử có những gì trong đó -->

      <data:defaultAdStart/> <!-- chú thích nếu blog bạn có đăng ký google adsense -->
      <b:loop values='data:posts' var='post'> <!-- vòng lặp để lấy dữ liệu bài viết -->
        <b:if cond='data:post.isDateStart'> <!-- Cái này là cái tùy chọn nào đó mà mình không chắc nữa -->
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt; <!-- Họ phải chuyển mã HTML sang đây là vì Blogger không cho phép chỉ có thẻ mở, hoặc chỉ có thẻ đóng, do đó phải lừa đảo nó -->
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'> <!-- Cái này là cái tùy chọn nào đó mà mình không chắc nữa, nhưng nó sẽ tạo ra cái thẻ div có class la date-outer -->
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'> <!-- Nếu bạn kích hoạt tùy chọn hiển thị ngày đăng bài, cái tùy chọn đầu tiên trong widget Blog ấy-->
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'> <!-- Cái này cũng không chắc -->
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
        <b:include data='post' name='post'/> <!-- Gọi hàm includable có id là post -->
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <!-- Nếu là trang tĩnh -->
          <b:include data='post' name='comment_picker'/> <!-- Gọi hàm includable comment_picker, hàm này có nhiệm vụ chọn ra hệ thống nhận xét mà chúng ta có thể tùy chỉnh bên trong trang tổng quan -->
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- Nếu là trang bài viết -->

          <b:include data='post' name='comment_picker'/>
        </b:if>
        </div>
        <b:if cond='data:post.includeAd'> <!-- Nếu bạn có adsense và kích hoạt nó -->
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
      <data:adEnd/>
    </div>

    <!-- navigation -->
    <b:include name='nextprev'/> <!-- Gọi hàm nextprev, hàm này lấy ra thanh điều hướng ở cuối trang, trang mới hơn, cũ hơn, trang chủ -->

    <!-- feed links -->
    <b:include name='feedLinks'/> <!-- Gọi hàm feedLinks lấy ra địa chỉ tới rss/atom của bài viết cũng như nhận xét -->

    <b:if cond='data:top.showStars'> <!-- Tùy chọn này đã bỏ đi trong widget Blog nhưng nó vẫn còn vương vấn code ở đây, tùy chọn kích hoạt chấm điểm bài viết mặc định trong Blogger -->
      <script src='//www.google.com/jsapi' type='text/javascript'/>
      <script type='text/javascript'>
        google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
        function initialize() {
          google.annotations.setApplicationId(<data:top.blogspotReviews/>);
          google.annotations.createAll();
          google.annotations.fetch();
        }
        google.setOnLoadCallback(initialize);
      </script>
    </b:if>

  <b:else/>
    <b:include name='mobile-main'/> <!-- Nếu người dùng xem bằng điển thoại lại tiếp tục chuyển qua hàm main được viết riêng cho điện thoại -->
  </b:if>

  <b:if cond='data:top.showDummy'> <!-- Mình đoán không lầm đây là đoạn mã khi chúng ta xem trước bài viết trong khi viết bài, cái ngăn cản chúng ta không thể click chọn vào bài viết là đây -->
    <data:top.dummyBootstrap/>
  </b:if>

</b:includable>

xem kĩ các chú thích trên mình nghĩ không còn gì đê giải thích nữa rồi. Nhớ là nếu muốn hiểu hết thì cứ lần theo mấy hàm includable và mần theo thứ tự code là bạn sẽ hiểu được toàn bộ Blogger Template đó thôi.

Kết bài

Như vậy là kết thúc phần 4 - cách thức hoạt động của một widget trong Blogger, đối với mình thì nó tương đối dễ và đơn giản để hiểu, nhưng nếu bạn có bất kì thắc mắc nào thì nên để lại nhận xét nhé để mình có thể hướng dẫn thêm hoặc chăm chút lại bài viết để các bạn dễ hiểu hơn. Mình sẽ có gắng ra tiếp các thủ thuật Blogger về mọi thứ để giúp bạn tự hoàn thiện hoặc thiết kế giao diện cho blog của mình.