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 == "false"'>
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>
</div>
<b:if cond='data:post.includeAd'>
<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'>
</div></div>
</b:if>
<data:adEnd/>
</div>
<b:include name='nextprev'/>
<b:include name='feedLinks'/>
<b:if cond='data:top.showStars'>
<script src='//www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
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'/>
</b:if>
<b:if cond='data:top.showDummy'>
<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.
Belum ada tanggapan untuk "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"
Post a Comment