Hiển thị các bài đăng có nhãn loop. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn loop. Hiển thị tất cả bài đăng

Thứ Bảy, 13 tháng 9, 2014

Không hiển thị 1 nhãn trên trang chủ

Chúng ta đều biết Blogger đã có tính năng tạo trang tĩnh (static_page) giúp người dùng tạo các trang chuyên biệt như trang giới thiệu (About), trang liên hệ (Contact)… Đặc trưng của các trang tĩnh là không được duyệt hiển thị trên trang chính (kiểu trang index gồm trang chủ, trang nhãn và trang lưu trữ). Tuy nhiên Blogger giới hạn số trang tĩnh tối đa được tạo cho mỗi blogspot là 20 trang. Dường như con số này quá khiêm tốn so với nhu cầu sử dụng của bạn. Nào là trang nén CSS, trang mã hóa, trang mã màu, trang liên kết, trang sản phẩm, trang dịch vụ, trang diễn đàn, trang liên hệ, trang giới thiệu, trang góp ý, trang lưu bút … Tính ngót ra cũng đến trên dưới hai chục trang như vậy. Thế thì làm sao để thỏa mãn nhu cầu tạo trang riêng biệt như thế.

Bạn có thể xem DEMO (Chú ý ở tiện ích Recent Posts có hiển thị 2 bài viết đầu tiên thuộc 1 nhãn song đến trang chủ thì không nhìn thấy chúng nữa).

Lời giải đáp lại đụng đến các lệnh điều kiện trong cấu trúc XML của Template. Ở đây mình sẽ gán một nhãn chung cho các bài viết được dùng để tạo trang riêng biệt giống trang tĩnh, ví dụ tên nhãn làHiddenLabel. Nào chúng ta hãy bắt đầu thực hiện như sau:

» Cách 1: Ẩn bài viết thuộc nhãn nhất định ở kiểu trang index!

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Tìm thẻ sau:
<b:include data='post' name='post'/>
- Lệnh include ở trên sẽ giúp duyệt hiển thị các bài viết ở tất cả các kiểu trang. Vậy ta bắt đầu thay nó bằng đoạn code bên dưới:
<!-- Điều kiện nếu ở kiểu trang index -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- Điều kiện nếu ở các bài viết có gắn nhãn -->
<b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.name != &quot;HiddenLabel&quot;'>
<!-- Ở đây đặt điều kiện cho các nhãn, hiển thị bài viết của tất cả các nhãn ở trang index, trừ nhãn có tên HiddenLabel -->
<b:include data='post' name='post'/> <!-- Kết thúc điều kiện cho các nhãn --> </b:if> </b:loop> <b:else/>
<!-- Nếu các bài viết không gắn nhãn thì cũng cho hiển thị ở trang index -->
<b:include data='post' name='post'/> </b:if> <b:else/>
<!-- ở kiểu trang còn lại là các trang item thì -->
<b:include data='post' name='post'/> </b:if>
5. Tiếp theo là ẩn liên kết nhãn HiddenLabel ở cuối bài viết hoặc dưới tiêu đề bài viết để khi ta đọc đến các bài viết thuộc nhãn HiddenLabel thì sẽ không nhìn thấy liên kết của nó.
5.1. Tìm tất cả các đoạn code như bên dưới.
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' 
rel='tag'><data:label.name/></a><b:if 
cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
5.2.. Rồi thay nó bằng đoạn code bên dưới.
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != &quot;HiddenLabel&quot;'>
<a expr:href='data:label.url' 
rel='tag'><data:label.name/></a><b:if 
cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:if>
</b:loop>
6. Lưu Template là hoàn thành.
- Bằng cách này chúng ta có thể tạo được rất nhiều trang riêng biệt có tính năng không hiển thị ở kiểu trang chính như trang tĩnh vậy, miễn là ta gán cho các bài viết đó chung cho một nhãn nhất định.

» Cách 2: Ẩn một nhãn ở kiểu trang Index:

- Các bạn thực hiện từ bước 1 đến bước 5.1 ở cách 1 bên trên. sau đó thay code bước 5.2 thành đoạn code bên dưới:
<!-- Điều kiện nếu ở kiểu trang index -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- Điều kiện nếu ở các bài viết có gắn nhãn -->
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != &quot;Tên nhãn 1&quot;'>
<b:if cond='data:label.name != &quot;Tên nhãn 2&quot;'>
<b:include data='post' name='post'/>
<!-- Kết thúc điều kiện cho các nhãn -->
</b:if></b:if>
</b:loop>
<b:else/>
<!-- Nếu các bài viết không gắn nhãn thì cũng cho hiển thị ở trang index -->
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<!-- ở kiểu trang còn lại là các trang item thì -->
<b:include data='post' name='post'/>
</b:if>
- Lưu Template là hoàn thành.

Hiển thị 1 nhãn trên trang chủ

1. Đăng nhập vào blog của bạn.
2. Chọn mẫu (tempalate) => Chọn Chỉnh sửa HTML (Edit HTML)
3. Tìm đoạn code <b:includable id='main' var='top'> và kéo chuột xuống vài dòng bạn sẽ tìm được đoạn code tương tự như bên dưới (đoạn này có thể khác nhau tuỳ theo từng blog nha các bạn):
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>
- Thay thế nó thành đoạn code bên dưới:
<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "Show Label"'>
<b:include data='post' name='printPosts'/>
</b:if>
</b:loop>
</b:if>
<b:else/>
<b:include data='post' name='printPosts'/>
</b:if>
</b:loop>
Ở đây Show Label, Chính là tên nhãn mà bạn muốn hiển thị bài viết của nhãn đó ở trang chủ.

- Lúc này mình tìm thẻ đóng </b:includable> của thẻ <b:includable id='main' var='top'>. Và đặt đoạn code bên dưới vào sau thẻ </b:includable> nói trên.
<b:includable id='printPosts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:includable>
Lưu mẫu lại và kiểm tra kết quả của các bạn nha.

Thứ Năm, 4 tháng 9, 2014

Điều kiện của vòng lặp -loop in blogger

Hôm nay mình sẽ hướng dẫn cho các bạn tiếp tục một thủ thuật đặc biệt chưa từng một ai chia sẻ, ở nếu như các bạn có theo dõi các bài viết trước về hướng dẫn sử dụng các thẻ lập trình Blogger của mình, bạn sẽ thấy sự tương tác giữa thẻ điều kiện và vòng lặp khá là hạn hẹp. Do đó hôm nay mình sẽ giúp các bạn thủ thuật có thể giới hạn hoặc xác định số lần lặp của thẻ loop qua thẻ if.


Điều kiện cho giá trị của vòng lặp loop của Blogger

Một lưu ý nhỏ là nếu bạn không theo dõi các bài viết trước của mình, hoặc không hiểu về các  thẻ lập trình Blogger trước, thì bạn sẽ không biết được bài này dùng làm gì. Do đó nếu chưa biết bạn có thể tìm hiểu bên ngoài hoặc tham khảo các bài viết tại đây trên website của mình.

Ở bài viết về vòng lặp của mình thì mình đã ví dụ về các thức lấy tiêu đề bài viết ra như sau
<b:loop var='i' values='data:posts'>
   <h2><data:i.title/></h2>
</b:loop>
cũng ở bài viết đó mình đã nói biến "i" sẽ tăng dần theo số lượng bài viết mà bạn đã đăng trên blog của mình. Nhưng nếu bạn để ý, bạn không thể sử dụng điều kiện xác định số lần lặp của nó được. v.d.
<b:if cond='data:i == 2'>
Đây là bài viết thứ 3 (Dãy số bắt đầu từ số 0)
</b:if>
hoàn toàn không thể sử dụng được.

Một thời gian tìm hiểu được trên diễn đàn của lập trình viên blogger tại google forum, mình được biết vòng lặp loop có thuộc tính index giúp xác định con số mình đang ở, từ đó mình có thể dùng điều kiện để tùy ý ứng dụng nó. v.d.1.
<b:loop var='i' values='data:posts' index='j'>
   <h2><data:i.title/></h2>
<b:if cond='data:j == 2'>
Đây là bài viết thứ 3 (Dãy số bắt đầu từ số 0)
</b:if>
</b:loop>
Ở đoạn mã này, khi gặp bài viết thứ 2 mình sẽ có dòng chữ "Đây là bài viết thứ 3 (Dãy số bắt đầu từ số 0)". Tiếp tục v.d.2.
<b:loop var='i' values='data:posts' index='j'>
<b:if cond='data:j &lt; 2'> <!-- &lt; là dấu nhỏ hơn ở ký tự đặc biệt html -->
   <h2><data:i.title/></h2>
</b:if>
</b:loop>
ở đây cho dù bài viết bạn có nhiều đến đâu thì chỉ lấy ra 2 tiêu đề bài viết đầu tiên trên blog của bạn vì mình đã giới hạn giá trị j < 2, j lúc này chỉ có thể chạy từ 0 -> 1.

Như bạn đã thấy chỉ cần thêm một thuộc tính nho nhỏ, chúng ta có thể kiểm soát được số lần lặp, xác định con số hiện tại, và nhiều việc khác nữa bạn có thể nghĩ đến. Mong ràng thủ thuật này giúp ích được cho tất cả những người đang tìm hiểu về Blogger như mình.

loop - Vòng lặp trong blogger

Tiếp tục với ngôn ngữ lập trình của blogger, hôm nay mình lại xin được mạn phép giới thiệu với các bạn về thẻ b:loop, và cách sử dụng nó. Thẻ b:loop trong Blogger chủ yếu được sử dụng để lấy ra toàn bộ bài viết, nhận xét cũng như nhãn tại blog hiện tại. Đối với sử dụng vòng lặp trong Blogger cũng đơn giản như những ngôn ngữ lập trình khác, chỉ khác ở vài yếu tố nho nhỏ. Với các bạn không biết về lập trình cũng không sao, vì nó hoàn toàn đơn giản.
Sử dụng thẻ loop, vòng lặp trong Blogger

Cú pháp và cách sử dụng thẻ loop

Dưới đây là cú pháp sử dụng của thẻ b:loop
<b:loop var='biến' values='dữ-liệu-cần-lặp'>
   [Nội dung cần lặp]
</b:loop>
biến: là giá trị bạn tự đặt ra, giá trị sẽ tăng dần sau mỗi lần lặp. Ở các ngôn ngữ lập trình khác như c hoặc tương tự người ta thường đặt là "i" hoặc "j".
dữ-liệu-cần-lặp: có thể là bất cứ dữ liệu nào ở dạng danh sách các bạn có thể xem ở đây (Thẻ là data là gì và cách sử dụng nó trong Blogger). v.d. tại widget bài đăng, posts là dạng danh sách. Giới hạn là số dữ liệu đó.

Ví dụ về việc sử dụng
<b:loop var='i' values='data:posts'>
   <h2><data:i.title/></h2>
</b:loop>
Toàn bộ thẻ ở trên sẽ lấy lấy ra toàn bộ tiêu đề của bài viết trong thẻ h2. Ở đây mình biến mình đặt là "i",  ví dụ mình có 10 bài viết, biến "i" này sẽ chạy từ 0 -> 9, lấy ra lần lượt tiêu đề bài viết khi i = 0 thì nó sẽ lấy ra bài viết thứ 1, rồi lặp giá trị i tăng lên 1, lấy ra tiêu đề bài viết thứ 2, v.v..
Như vậy là đã xong phần hướng dẫn của mình về vòng lặp, ở các bài viết sau mình sẽ ứng dụng những bài mình đã viết để các bạn có thể hiểu rõ hơn về ngôn ngữ lập trình của Blogger. Nếu bạn không hiểu bất cứ điều gì, bạn có thể để lại nhận xét dưới đây.