Loading post navigation ...
 
 

Pro page

19
Nhận xét

Ngẫu hứng Blogger (2)

| by Anh N.C | views

Hãy nhấn thanks để ủng hộ tác giả

Do tên gọi kia hơi dài, mình xin được phép đổi tên chủ đề "Bạn biết gì về BlogSpot, hãy chia sẻ cung tôi". Trong số 2 này mình sẽ nói về các đối tượng bên trong của widget, bao gồm : Include (Luồng), Data (Dữ liệu), Loop (Vòng lặp), 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.

C.Luồng (Include)

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ừ CSDL vào widget. Do vậy nếu tạo widget mà không có luồng, sẽ có lỗi xảy ra.

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

D. 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. 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ó.

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.

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

VD :

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

F. BT Điều kiện (If/Else)

Biểu thức so sánh đưa ra kết quả đúng và 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 và sai. Một VD đơn giản là so sánh số bài viết, nếu lớn hơn 1 hiển thị 'A', nhỏ hơn bằng 1 hiển thị 'a'.

<b:if cond='data:post.numComments > 1'>
   <font color="red">A</font>
<b:else/>
  <font color="red">a</font>
</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 ai là cha, ai là con. Mình xin được tổng kết lại các phần đã giới thiệu đơn giản như sau:

Có gì sai hãy bổ sung, góp ý với mình nhé. Rất cảm ơn. Hẹn các bạn ở bài viết tới. Layouts Data Tags.


Enter your mail address:

19

Bimmo

code hay thật

Phan Dũng

rất hay và rõ ràng. tiếp tục ủng hộ.

P/s : không biết Suzuki đã làm quen với blogspot lâu chưa, chứ như anh hồi mới làm quen thì mấy cái này chưa rành lắm, lúc đầu anh làm quen với nó chỉ là bập bẹ chỉnh sửa code HTML và CSS mà thôi. chứ chưa nghiên cứu sâu code của blogspot như thế này. sau này mò mẫn từ từ cũng nắm được gần hết, cho tới bây giờ cũng chưa dám nói là nắm hết.

HelloXimo

Anh Dũng cho em xin cái Y!M với fix dùm em cái js phân trang comment :(
Y!M em là nguagovt

Suzuki_aka

Em tìm hiểu thì tập trung vào tìm hiểu các cái cốt lỗi, không đi mò mẫm hay khám phá những cái đã biết. Em chủ yếu vào support.google.com để đọc tài liệu, nhanh hơn là đi search mấy cái loại hack. Đọc xong thì hay, nhưng chả hiểu nó là gì.

Phan Dũng

@Ximo : Y!M của anh đây pt_dung85
@Suzuki_aka : em cũng siêng nhỉ, hồi xưa anh cũng vậy, cũng hay lang thang các blog nước ngoài để học hỏi, giờ không có thời gian nhiều, nên sở thích này đã bị mai một dần :D

oh.yeah

thnaks anh ddax cos chut hinhf dung veef blogspot

Suzuki_aka

Có vẻ dân it khi vào đã được dậy đọc help, đọc nhiều lại năng mò mẫm. Em chắc phải cố nốt mấy năm sv. Không ra đi làm lại chả còn sở thích thì buồn thật :|

Chánh Đạt Online

Blogspot bây giờ nhiều cao thủ quá đúng là "trường giang hậu lãng suy tiền lãng..."

Duy Pham

Bài viết rất tuyệt, mình có dự định viết những bài kiểu này nhưng thực sự rất khó trình bày. Định viết về các tag XML từ lâu thì simplexdesign giờ đã có; các lệnh điều kiện, lặp cũng định tới đây giờ bạn đã viết :((.

Ở data:post.numComments > 1 phải mã hóa > thành &gt; không sẽ báo lỗi. So sánh >= nữa.

Blogger có 4 kiểu trang dễ phân biệt rồi nhưng k biết ai đã phân biệt dc 4 kiểu trong trang index chưa nhỉ :p

Pika Rock

bài viết rất chuẩn,

4 kiểu trang trong trang index là gì vậy anh Duy

Suzuki_aka

@Duy Pham: Em cũng mới biết đến 3 kiểu, còn kiểu thứ 4 chắc là lưu trữ. Kiểu này em thấy ít ai dùng đến.

Suzuki_aka

@Duy Pham: Cảm ơn anh đã góp ý. Em đang tiến tới viết về biến data. Có gì mong anh chỉ giáo thêm.

VanLinhEx

Quá tuyệt !
Blogger nên có những bài viết rõ ràng thế này để hiểu rõ vấn đề hơn .
Các bạn không rành mà chỉ biết áp dụng những thủ thuật blogger cũng nên đọc để "nâng cao kiến thức" hơn , như mình chẳng hạn .

Duy Pham

@Pika Rock:
1. Trang chủ
2. Bài viết cũ hơn, mới hơn
3. Nhãn
4. Tìm kiếm

Thực ra còn 1 kiểu nữa khi xem bài viết theo năm.
Khó nhất là phân biệt giữa Nhãn và Tìm kiếm. Mình có 2 cách phân biệt Nhãn và Tìm kiếm, cách 1 thì chỉ chọn được Nhãn. Cách 2 thì phân biệt rõ ràng 2 cái này nhưng phụ thuộc vào ngôn ngữ Blog đó nên hơi thủ công chỗ này.

HelloXimo

Các bác nói gì em chẳng hiểu à ~x( anh Dũng online thì Buzz em mới nhá

Nguyễn Đức

Anh dũng ơi, anh share cho e cái phân trang blogger của anh cho em với, ko biết anh làm sao mà thấy nó chạy nhanh thế :(

Phan Dũng

@Nguyễn Đức cái phân trang của mình nằm trong thủ thuật này
http://www.fandung.com/2011/05/fdnav-phan-trang-cho-blogspot.html
cái phân trang này chỉ dùng riêng cho thủ thuật này

Nguyễn Việt Nhất

Blog hay thật!
Mà cái chuyện .COM là thế nào anh nhỉ

Phan Dũng

@Nguyễn Việt Nhất : chuyện .COM nào nhỉ ???



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home