Tìm hiểu các đối tượng trong Widget trong blogspot

Bài viết nâng cao trong Tìm hiểu các đối tượng trong Widget trong blogspot


Các đối tượng căn bản trong blogspot thì các bạn đọc ở đây:

Và để hâm nóng lại cho Blog thì phần 2 này mình sẽ nói về các đối tượng bên trong của Widget, đi sâu hơn so với phần trước nên các bạn nhớ thực hành thật tốt nhé.

Tìm hiểu các đối tượng trong Widget trong blogspot có gì ?

Widget gồm những gì ?

1. Include (Luồng).
2. Data (Dữ liệu).
3. Loop (Vòng lặp).
4. If/Else (Biểu thức điều kiện).

Nhắc đến bài trước, bạn đã thử thực hành với 2 đối tượng section và widget chưa. Nếu chưa, hãy làm thử đi nhé. Đơn giản hãy chỉ tạo thử một section header, trong đó chứa một widget HTML, bạn cho nó hiển thị hình ảnh trong 3 trang khác nhau : index, item, static page.

Hoạt động của đối tượng trong Widget

Để tìm hiểu cách thức hoạt động của các đối tượng trong widget một cách thuần thục, dễ nhớ thì các bạn hãy tự tạo cho mình một blog mới để bắt đầu thực hành ngay trên đó cho dễ hiểu. Chọn ngay cho mình một Template Blogger cực đơn giản để làm.

Và chúng ta.... " Start....... "

1. Include (Luồng)

Luồng là một đối tượng con, nằm trong widget. Hiểu nôm na, nó như một ống dẫn truyền dữ liệu từ cơ sở dữ liệu vào widget. Do vậy nếu tạo widget mà không có luồng, sẽ có lỗi xảy ra. Ví dụ : bạn làm 1 trang forum mà chỉ có code không có data thì sẽ như là có widget mà không có include.

Cấu tạo 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, hiểu qua nó như là số chứng minh thư của bạn, công an biết số cmt sẽ biết cậu là ai hjxhjx
var : Biến đặt cho luồng truyền giá trị vào, và ở đây nó là một giá trị tham chiếu.

Điều kiện bắt buộc là như mình đã nói ở trên, thêm vào đó, mỗi widget phải có một id = 'main'. Và để cho chắc ăn, id của luồng ta để mặc định là main . Vấn để tạo id mới và sau đó luồng có tham chiếu đến được không. Mình xin trả lời là có, nhưng mình không dám chắc...Vì chưa thử bao giờ ^^!

Luồng không những truyền dữ liệu, nó còn dùng để lấy dữ liệu trong các vòng lặp. Một VD đơn gian đó là lấy tiêu đề của các bài post. Nghĩ hình dung và kết nối, các bạn đơn giả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 (posts), chọn ra một bài viết trong đó (post), với dữ liệu là i.

Chú ý đến cấu trúc trên và có thể sử dụng với các điều kiện sau :

name : Tương ứng gấn như một id, nhưng hiện thị mình thấy nó giống một class hơn.
data : dữ liệu truyền vào, ngầm hiểu chính là nội dung bài viết, tác giả, số comment ...

2. Data (Dữ liệu)

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. Vì vậy nói ở đây chắc không thể nào có thể nói hết. Mình sẽ dành một bài viết riêng cho nó.

Data (Dữ liệu) - Template Blogger

Các bạn còn nhớ 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. Vì vậy bạn không thể làm cái điều "râu ông nọ cắm cằm bà kia" được.

Nói qua về nó, nó có dạng sau 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 nói về phần này rất hay, chắc có lẽ xin khất ở bài sau.

3. Loop (Vòng lặp)

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)... nó tương tự như vòng lặp while, foreach hay for trong php, javascript, c++, c#,... nên ai đã học lập trình như Gà Sắt mình sẽ hiểu ngay hjhj

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 nhóm phần tử.

Ví Dụ :

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



4. If/Else (Biểu thức điều kiện)




Biểu thức so sánh đưa ra kết quả đúng và sai, cái này sử dụng rất phổ biến trong Template Blogger đấy, hầu hết các template mình chia sẻ đầu có rất rõ ở phần đầu template, các bạn có thể bỏ ra xem.

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 và sai. Một ví dụ đơn giản là so sánh số nhận xét comment trong một bài viết, nếu lớn hơn 1 hiển thị 'A', nhỏ hơn bằng 1 hiển thị 'B'.

<b:if cond='data:post.numComments > 1'>
A
<b:else/>
B
</b:if>




Nó có thể nằm ngoài widget, tuy nhiêu không được đặt biểu thức if/else giữa widget và include.


Tổng kết

Qua đây bạn chắc bạn đã thực sự hiểu sơ qua về cấu trúc của một BlogSpot. Biết được sắp xếp trật tự trước sau