Tìm hiểu mô hình, cơ cấu tổ chức của mẫu Blogger (Template) - Phần 2

Phầ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.

Tìm hiểu margin và padding 
Để có một blog đẹp chúng ta phải chỉnh sửa mã nguồn cho các thành phần trở nên cân đối và hài hòa. Bài viết này sẽ hướng dẫn các bạn làm quen với margin và padding, canh lề và canh đệm. Những ai đã từng học qua CSS thì không lạ gì với hai tag này.

MARGIN
Margin được dùng để kiểm soát khoảng trống giữa các thành phần của trang, hay còn được gọi là lề. Hãy để ý các khoảng trống mà trình duyệt của bạn hiển thị khi bạn xem bất kỳ trang web hay blog. Nào, đăng nhập blogger.com bằng tài khoản Google của bạn, vào Template (Mẫu) ->Edit HTML (Chỉnh sửa HTML), kéo thanh trược xuống và bạn có thể nhìn thấy rất nhiều thành phần có margin với các giá trị khác nhau. Phụ thuộc vào số giá trị đứng phía sau mà khoảng trống khác nhau. Bạn có thể bắt gặp 4, 3, 2, thậm chí 1 giá trị đứng phía sau.

Bốn giá trị: margin 10px 5px 0 5px; 
Lề trên, phải, dưới, trái được canh lần lượt theo các khoảng cách 10px, 5px, 0px, 5px

Ba giá trị: margin: 30px 20px 70px;
Lề trên, phải, dưới, trái được canh lần lượt theo các khoảng cách 30px, 20px, 70px, 20px

Hai giá trị: margin: 30px 20px;
Lề trên và dưới: 30px
Lề trái và phải: 20px

Một giá trị: margin: 100px;
Tất cả các lề đều được canh một khoảng cách 100px

Nếu bạn không nhớ các vị trí này, hãy sử dụng theo cú pháp sau cho từng vị trí một.

margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px; 

(Các con số ở đây là ví dụ)

PADDING

Padding dùng để kiểm soát khoảng trống giữa nội dung và đường viền của nó. Trong tiếng Anh, từ này có nghĩa là vật hay sự đệm, lót.
Tương tự như margin, padding cũng có thể có 4 giá trị đi phía sau, tương ứng trên, phải, dưới, trái (như chiều kim đồng hồ).

Ví dụ:

padding: 15px 30px 25px 0;

Nghĩa là cách mép trên 15px, phải 30px, dưới 25px, trái 0px

Ngoài ra người ta có thể dùng:

padding-top: 15px;
padding-right: 30px;
padding-bottom: 0;
padding-left: 30px;

(Các con số ở đây là ví dụ)

Tìm hiểu mô hình, cơ cấu tổ chức của mẫu Blogger (Template) - Phần 1