Mã nguồn cho Blogger (phần 2)

Lần trước mình đã giới thiệu về mã nguồn của Blogger. Nhưng đó chỉ là dạng thu gọn, nội dung của các widget bị giấu đi. Ở bài này, mình sẽ nói chi tiết về nội dung của một Widget. Xét về bản chất thì nó khá giống những ngôn ngữ lập trình hướng cấu trúc (structured programming language), nó cũng cấu tạo bởi cái code block và có những hàm cơ bản như Loop và Condition.

I.Chuẩn bị
Tại trang Edit HTML (?) bạn nhấn vào checkbox Expand Widget Templates

Lúc này thì trang Edit HTML sẽ tự tải lại. Và dễ dàng nhận ra, phần mã nguồn đã thay đổi, các dòng

<b:widget [các thuộc tính] />

trở thành

<b:widget [các thuộc tính]>
<b:includable>
...
</b:includable>
</b:widget>

Lưu ý là giữa 2 thẻ <b:widget> và </b:widget> có thể chứa nhiều nhóm <b:includable> và </b:includable>

II.Sẵn sàng
Thẻ <b:includable>
Bạn có thể bất cứ thứ gì vào giữa 2 thẻ <b:includable> và </b:includable>. Thẻ này có 2 thuộc tính như sau.

• id: (bắt buộc) Những chữ hay số có giá trị như tên của 1 includable. Hai includable trong cùng widget không được trùng tên.


• var: Một tham số có liên quan tối phần nội dung trong thẻ, có thể là chữ hoặc số.

Có thể xem mỗi 1 includable là một function trong lập trình (C, Pascal...) có id là tên hàm và var là tên biến. Trong mỗi Widget cần phải có một includable với id='main'. Nếu bạn viết thêm những includable với những id khác thì chúng sẽ không tự xuất hiện. Muốn chúng xuất hiện thì bạn cần dùng đến thẻ <b:include>.
Các thuộc tính của thẻ <b:include> gồm:

• name: (bắt buộc) là tên của include này. Nó buộc phải trùng với ID của includable bạn muốn xuất hiện (với điều kiện, cả 2 nằm trong cùng một widget).


• data: có ý nghĩa như var trong includable.

Thẻ include dùng để gọi một includable khác vào includable có id='main'. Nó giống như một lệnh để gọi hàm vào hàm main() vậy. Để có thể hiểu và phân biệt được thế nào là 1 includable và 1 include, xin mọi người xem qua ví dụ sau:

<b:includable id='main'>
<b:loop var='i' values='posts'>
<b:include name='post' data='i'/>
</b:loop>
</b:includable>

<b:includable id='post' var='p'>
Title: <data:p.title/>
</b:includable>

Chỉ cần một dòng

<b:include name='post' data='i'/>

sẽ thay thế cho cả đoạn

<b:includable id='post' var='p'>
Title: <data:p.title/>
</b:includable>

Tham số i được dùng trong thẻ include có ý nghĩa như p trong includable. Sở dĩ dùng i ở đây là vì trong thẻ b:loop có var='i'. Thẻ <b:include> rất có ý nghĩa nếu bạn phải lập đi lập lại một vùng includable nhiều lần trong một widget.
Lưu ý: <b:include name='main'/> không cần viết vào vì nó sẽ xuất hiện tự động.

Thẻ data:
Thẻ data: có ý nghĩa quan trong nhất trong toàn bộ phần mã nguồn. Vì nó là đại diện cho nội dung thực sự của blog. Một vài ví dụ của thẻ này:
<data:title/> đại diện cho tựa đề của widget
<data:photo.url/> đại diện cho đường dẫn của ảnh
...
Đây là những ví dụ đơn giản và thường gặp nhất. Vì hầu hết các widget đều có tựa đề. Thẻ data còn được dùng trong nhiều trường hợp phức tạp khác, thậm chí có tham số trong đó. Dấu "." ý chỉ là url ta cần là url của tấm hình đó, chứ không phải của bất cứ cái gì khác. Tới đây thì có vẻ nó đã giống như một ngôn ngữ lập trình rồi.
Lưu ý: Còn rất nhiều thẻ data khác nhau và danh sách các thẻ data sẽ được viết trong bài sau.

Thẻ <b:loop>
Thẻ b:loop được dùng khá phổ biến. Nó dùng để lặp đi lặp lại một nhóm thông tin. Cú pháp cơ bản của b:loop là:

<b:loop var='tham số chỉ định' values='nhóm dữ liệu'>
[Nội dung cần lặp lại]
</b:loop>

Với tham số chỉ định là tùy chọn, thường dùng nhất là 'i'. Và nhóm dữ liệu chính là các data: (chi tiết sẽ để cập ở bài sau).
vd:

<b:loop var='i' values='data:posts'>
<h2><data:i.title/></h2>
</b:loop>

Trong ví dụ này, ta sẽ lặp đi lặp lại tựa đề của bài viết. Tham số là i, lặp lại sau mỗi bài viết (data:posts là danh sách tất cả các bài viết trong một trang). Nội dung cần lặp lại là tựa đề của từng bài. Tức là khi i sẽ chạy từ post[1] tới post[n], thì xuất hiện trên màn hình sẽ là tựa đề của post[1] tới post[n].

Thẻ <b:if>
Bạn có thể dùng b:if và b:else để quy định thông tin chỉ hiển thị trên vùng này hay vùng khác. Cú pháp cơ bản là:

<b:if cond='điều kiện'>
[nếu điều kiện đúng]
<b:else/>
[nếu điều kiện sai]
</b:if>

Bạn có thể bỏ qua <b:else/> mà không ảnh hưởng tới <b:if>. Như vậy, chỉ có 2 trường hợp, một là nội dung nếu điều kiện đúng; hai là không có gì.
Điều kiện phải là những biểu thức có thể đánh giá đúng sai. vd:
<b:if cond='data:post.showBacklinks'>
đúng nếu bài viết hiện tại cho phép hiển thị backlinks.
<b:if cond='data:blog.pageType == "item"'>
Đúng nếu trang hiện tại là dạng item (trang chứa bài viết).
<b:if cond='data:displayname != "Gman"'>
Đúng nếu tên hiển thị khác Gman.
<b:if cond='data:post.numComments > 1'>
Đúng nếu bài viết hiện tại có nhiều hơn một bài trả lời.