Bài đăng trên Blog, Widget quan trọng nhất của Blogspot (tt)

Tiếp theo phần 1 về Bài đăng trên Blog - Widget quan trọng nhất của Blogspot. Hôm nay chúng ta trở lại với code phần 2 và 3. Mặc dù code phần 1 đã xong, có thể một vài bạn vẫn chưa hình thù được cụ thể như thế nào thì hi vọng sau bài này sẽ không còn ai chưa hiểu.

Cuối bài tôi sẽ tổng hợp code của widget lại và thêm mấy thứ râu ria như thẻ body, doctype... để hình thành template cho các bạn Test thử.

B. Code phần 2

Code cho phần này không có gì ghê gớm cả, chỉ là 2 nút Older Posts và Newer Posts. Đúng ra là có thêm nút quay về trang chủ nữa nhưng do nó không có gì quan trọng với làm cũng không khó lắm nên tôi bỏ qua.

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

1. <b:includable id="nextprev">
2.  
3. <!-- Code nút Newer Posts-->
4. <a class='new' expr:href='data:newerPageUrl'><data:newerPageTitle/></a>
5.  
6. <!-- Code nút Older Posts -->
7. <a class='old' expr:href='data:olderPageUrl'><data:olderPageTitle/></a>
8.  
9. </b:includable>

Phần này chỉ chú ý với bạn một điều là: thẻ expr:href='data:newerPageUrl' và  expr:href='data:olderPageUrl' sẽ cho ra 2 giá trị khác nhau khi bạn ở Trang chủ và khi bạn xem một bài viết.

Ví dụ với nút Older Posts, nếu ở trang chủ thì khi Click vào liên kết sẽ chuyển đến trang tiếp theo của Blog (Các bài đăng cũ hơn). Nhưng nếu khi bạn xem một bài viết nào đó mà bạn Click vào nút Older Post liên kết sẽ chuyển đến bài đăng cũ hơn liền kề với nó.

Và thẻ <data:olderPageTitle/> ở đây cũng sẽ cho 2 giá trị tương ứng là: "Older Posts" và "Older Post" (Bạn để ý đến số ít và số nhiều của từ Post) với mỗi trang chủ hoặc trang xem bài viết (item).

C. Code phần 3

Trước hết bạn phải hiểu cấu trúc của Widget Blog Posts này bao gồm các thẻ : <includable id='Tên ID' var='biến'>Nội dung</includable> (hay còn gọi là Cặp...),

Trong mỗi Widget thì phải có ít nhất 1 cặp <includable> với ID là main.

Tất cả các thẻ <includable> của widget này sẽ được đưa vào trong thẻ <includable> với ID main kia bằng một phương tiện gọi là <include>, bạn xem hình sau để biết rõ hơn :

Vậy Code của phần 3 này chính là thẻ <includable> với ID là main. Cụ thể thì thẻ includable với ID là "post" và "nextprev" sẽ được đưa vào thẻ includable số 3 này.
Bây giờ tôi sẽ đưa thẻ <includable> ở phần A (bài trước)vào bằng <include> như sau:

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

1. <b:includable id="main" var="top">
2. <b:include data='post' name='post'/> //name = id của thẻ includable số 1.
3. </b:includable>

Nếu chỉ có như trên thì bạn sẽ không lấy được bài viết, chúng ta có nhiều bài viết khác nhau, vì thế ta sẽ cần phải có một vòng lặp loop để có thể lôi lần lượt các bài viết trong cơ sở dữ liệu ra, vòng lặp ta chèn quanh thẻ include

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

1. <b:includable id="main" var="top">
2.  
3. <b:loop values='data:posts' var='post'>
4. <b:include data='post' name='post'/> //name = id của thẻ includable số 1.
5. </b:loop>
6.  
7. <b:include name='nextprev'/> //name = id của thẻ includable số 2.
8.  
9. </b:includable>

Sau khi đã lấy được bài viết ra, chúng ta lại tiếp tục lấy cái nút Older Posts và Newer Post ra cũng bằng include, thường thì 2 nút này nằm dưới cùng của widget, nên ta sẽ phải đặt nó ở dưới thẻ loop

Vậy là đã xong, Widget quan trọng nhất của Template Blogspot hiện giờ chỉ có như thế thế thôi, rất ngắn phải không?

D. Bonus - Dành cho những bạn quan tâm đến thiết kế template

Đây là code tổng hợp toàn bộ code của cả 3 phần. Về cơ bản thì Widget quan trọng nhất của Blogger - Widget Blog Post có các thành phần cơ bản dưới đây. Đây chính là phần xây thô, nếu muốn tùy chỉnh sắp xếp các thành phần cơ bản hoặc thêm thắt các hiệu ứng bạn cần phải dùng các thủ thuật CSS

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

1. <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
2.  
3. <b:includable id="post" var="post">
4.     <div class="post-item">
5.         <h1><a expr:href='data:post.url'><data:post.title/></a></h1>
6.         <img expr:src='data:post.thumbnailUrl' />
7.         <data:post.snippet>
8.         <a expr:href='data:post.url'><data:post.jumpText/></a>
9.     </div>
10. </b:includable>
11.  
12. <b:includable id="nextprev">
13.     <a class='new' expr:href='data:newerPageUrl'><data:newerPageTitle/></a>
14.     <a class='old' expr:href='data:olderPageUrl'><data:olderPageTitle/></a>
15. </b:includable>
16.  
17. <b:includable id="main" var="top">
18.     <b:loop values='data:posts' var='post'>
19.         <b:include data='post' name='post'/>
20.     </b:loop>
21.     <b:include name='nextprev'/>
22. </b:includable>
23.  
24. </b:widget>

Giờ tôi sẽ thêm 1 <doctype>, thẻ <head>, thẻ <body> <section> vào để chạy thử Template cho các bạn xem:

<section> là một cặp thẻ bao ngay bên ngoài của Widget, bên trong Section có thể có nhiều widget, có thể hiểu widget là con của section, còn includable lại là con của widget... Một template blogspot bắt buộc phải có ít nhất 1 cặp thẻ section., 1 section thì có thể có nhiều widget, 1 widget có thể có nhiều includable...

Đây là Code Template của chúng ta:

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

1. <?xml version="1.0" encoding="UTF-8" ?>
2.  
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4.  
5. <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
6.  
7. <head>
8.  
9. <b:include data='blog' name='all-head-content'/>
10.  
11. <title><data:blog.pageTitle/></title>
12.  
13. <b:skin><![CDATA[/*
14.  
15. /*CSS Chưa có nên tạm thời để trống --- Hieu bo blah blah blah ---*/
16.  
17. ]]></b:skin>
18.  
19. </head>
20.  
21. <body>
22.  
23. <b:section id='add-widget' showaddelement='yes'>
24.  
25. <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
26.  
27. <b:includable id="post" var="post">
28.     <div class="post-item">
29.         <h1><a expr:href='data:post.url'><data:post.title/></a></h1>
30.         <img expr:src='data:post.thumbnailUrl' />
31.         <data:post.snippet />
32.         <a expr:href='data:post.url'><data:post.jumpText/></a>
33.     </div>
34. </b:includable>
35.  
36. <b:includable id="nextprev">
37.     <a class='new' expr:href='data:newerPageUrl'><data:newerPageTitle/></a>
38.     <a class='old' expr:href='data:olderPageUrl'><data:olderPageTitle/></a>
39. </b:includable>
40.  
41. <b:includable id="main" var="top">
42.     <b:loop values='data:posts' var='post'>
43.         <b:include data='post' name='post'/>
44.     </b:loop>
45.     <b:include name='nextprev'/>
46. </b:includable>
47.  
48. </b:widget>
49.  
50. </b:section>
51.  
52. </body>
53.  
54. </html>

Bạn có thể Copy và test thử, bạn sẽ thấy tiêu đề, thumbnail, trích dẫn...v.v... được lôi ra rồi đúng không, nút older posts, newer posts cũng đã hoạt động.

Bây giờ chắc bạn đã hiểu nôm na Widget Blog Posts hoạt động như thế nào?

Đầu tiên tôi định sẽ viết bài về widget một cách chi tiết (có cả lệnh điều kiện, rồi các kiểu trang)... nhưng sợ bài viết sẽ trở lên rối, vì thế nên bài này chỉ mang tính cơ bản và giới thiệu.

Các bài sau tôi sẽ viết cách để dựng lên một Template, từ PSD, HTML, CSS... Lúc đó đi đến đâu tôi sẽ nói cụ thể đến đó ~~!

Tác giả bài viết là Hiếu Bò, sinh viên năm hai trường SV năm 2 UTEHY, có sở thích đặc biệt với truyện tranh, internet, code, hoa quả,.. thành viên của Comic Tomb Group, sáng lập trang web Comic Tomb