Chúng tôi xin tiếp phần 2 , phần trước chúng tôi đã nói đến section và widget là gì , nếu các bạn chưa xem phần 1 thì nên click here . Còn phần này chúng tôi sẽ nói về : luồng (include), dữ liệu (data), vòng lặp (loop), biểu thức điều kiện (if/else) , tóm lại .
1. Luồng (include) ?
Luồng có thể hiểu nôm na là một đối tượng con, nằm trong widget và cũng có thể hiểu luồng như là một ống dẫn truyền dữ liệu từ CSDL vào widget. Do vậy nếu tạo widget mà không có luồng thì như thế nào? thì sẽ có lỗi xảy ra chứ sau giờ.
Cấu tạo về một luồng như sau :
<b:includable id='{tên id}' var='{Biến}'> {Nội dung hiển thị} </b:includable>
Giải thích :
id: Định danh duy nhất trong widget để luồng tham chiếu.
var: Biến đặt cho luồng chèn giá trị vào và ở đây nó có một giá trị tham chiếu.
Điều kiện bắt buộc là mỗi một widget phải có một id="main" . Chắc ăn nhất là các bạn để id của luồng mặc định main.
Vấn đề đặt ra ở đây là để tạo một id mới và sau đó luồng có tham chiếu đến được không?
Tất nhiên là có , Nhưng mình chưa thử nó .... các bạn có thể thử và cho ý kiến he .
Luồng không những truyền dữ liệu, nó còn lấy dữ liệu trong vòng lặp.
Một ví dụ nho nhỏ: Đó là tiêu đề của các bài post. Nghĩ hình dung về kết nối , các bạn có thể hiểu ta đang dùng javascript để lọc feed.
<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'> Tiêu đề: <data:p.title/> </b:includable>
Ở đây bạn chú ý vào dòng màu đỏ , vòng lặp (loop) bên ngoài duyệt tất cả các bài viết (post), chọn ra bài viết trong số đó (post), với dữ liệu là i.
Lưu ý: đến cấu trúc trên và có thể sử dụng với điều kiện sau:
name: Tương ứng như một id , nhưng hiển thị mình thấy giống 1 class hơn.
data: Dữ liệu truyền vào , Bạn có thể hiểu là nội dung bài viết, tác giả, số comment ...
2. Dữ liệu (Data) ?
Nhắc đến data , chắc nhiều người sẽ hiểu. Có thể nói nó là đối tượng quan trong nhất, nó mang lại cái hồn cho blog . Mình sẽ viết một bài về Data vì nó khá dài dòng và nhiều nữa .
Các bạn nhớ cái type của widget của bài viết trước chứ . Mỗi loại widget sẽ có một loại data riêng.
Nói sơ về nó một chúc , nó có dạng data:name1.name2. Trong đó, name1 sẽ là đối tượng chính, name2 thường là các thuộc tính đi kèm theo sau đó. Mình thấy Data này rất hay nên phần 3 mình sẽ viết về nó.
3. Vòng lặp (Loop)?
Dùng để lọc ra một phần tử trong một nhóm phần tử: nhóm bài viết(posts), nhóm nhãn(labels), nhóm bình luận(coments)...
Cấu trúc :
<b:loop var='{biến chạy, phần tử con}' values='{nhóm phần tử}'> {Lặp nội dung ở đây} </b:loop>
Hình dung đơn giản thì đây là vòng lặp foreach, phần tử con được lấy ra trong phần tử.
VD:
<b:loop var='i' values='data:posts'> <h2><data:i.title/></h2> </b:loop>
4. Biểu thức điều kiện (if/else)?
Biểu thức so sánh đưa ra kết quả đúng hay sai.
Cấu trúc:
<b:if cond='{điều kiện}'> {hiển thị nội dung nếu là đúng} <b:else/>
{hiển thị nội dung nếu là sai}</b:if>
Điều kiện ở đây thường là so sánh các đối tượng data với giá trị đã biết để tạo ra các kết quả đúng hay sai. Một VD đơn giản là so sánh số bài viết, nếu lớn hơn 1 thì hiển thị 'Bài 1', nhỏ hơn bằng 1 hiển thị 'Bài 2'.
<b:if cond='data:post.numComments > 1'> <font color="red">Bài 1</font> <b:else/> <font color="red">Bài 2</font> </b:if>
Nó có thể nằm ngoài widget , tuy nhiên không được đặt biểu thức if/else giữa widget và include.
5. Tóm lại: Qua đây là sơ đồ về một BlogSpot . Biết được ai là cha, ai là con. Tóm tắt đơn giản như hình sau:
Có gì sai hãy bổ sung, gớp ý với mình nhé. Rất cảm ơn các bạn đã đọc bài viết này và hẹn các bạn vào bài viết sau.
0 nhận xét:
Đăng nhận xét