Ẩn hoặc chỉ hiện các bài viết thuộc một nhãn ở trang chủ

Như các bạn biết thì Blogger đã có tính năng tạo trang tĩnh (static page) để dùng tạo các trang giới thiệu, liên hệ, quy định sử dụng, chính sách riêng tư, diễn đàn, … Một đặc điểm đặc trưng của các trang tĩnh là không hiển thị trên trang chủ, các trang nhãn và lưu trữ. Tuy nhiên Blogger cũng giới hạn số trang tĩnh được tạo cho mỗi blogspot là 10 trang.

Sự giới hạn này cũng là một hạn chế. Khi mình sử dụng hết 10 trang tĩnh này thì mình nghĩ ra cách tạo một số trang bài viết cơ bản và làm sao để không cho chúng xuất hiện trên trang chủ, khi đó chúng sẽ giống như các trang tĩnh chính hiệu vậy.

Lấy ví dụ mình viết một loạt bài viết có tiêu đề lần lượt là Bài viết số 1, Bài viết số 2, Bài viết số 3, Bài viết số 4, Bài viết số 5. Mình đặt tên nhãn cho các bài viết này theo thông lệ mỗi khi tạo một bài viết. Ở đây mình muốn Bài viết số 1 và Bài viết số 3 không được hiển thị ở trang chủ, vậy mình đặt thêm một nhãn chung cho hai bài viết này là Z Label. Phải đặt như thế này để trong trường hợp 2 bài viết này được đặt nhiều nhãn (ví dụ Z Label, Nhãn 1, Nhãn 2, …) thì Z Label sẽ hiển thị ở cuối cùng. Thủ thuật của mình là không cho nhãn Z Label xuất hiện trên trang chủ, khi đó Bài viết số 1 và Bài viết số 3 sẽ không xuất hiện ở trang chủ.

Để làm được như vậy, mình đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates (nhớ Backup Template). Bước này gọi là Bước 1.

Tìm dòng <b:includable id='main' var='top'>. Tính từ dòng này trở xuống vài dòng code mình sẽ tìm thấy đoạn code giống hoặc tương tự như đoạn code bên dưới.

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

Mình thay nó bằng đ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.isLast == &quot;true&quot;'>
<b:if cond='data:label.name != "Z Label"'>
<b:include data='post' name='printPosts'/>
</b:if>
</b:if>
</b:loop>
</b:if>
<b:else/>
<b:include data='post' name='printPosts'/>
</b:if>
</b:loop>

Lúc này mình tìm thẻ đóng </b:includable> cho thẻ <b:includable id='main' var='top'>. Thẻ đóng này nằm ngay trước dòng

<b:includable id='commentDeleteIcon' var='comment'>

Mình đặ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 Template.

Như vậy Bước 1 đã giúp mình ẩn một số bài viết thuộc một nhãn nhất định sao cho không hiện ở trang chủ. Một số điểm cần chú ý ở thủ thuật ở Bước 1 là các bài viết không có nhãn sẽ không hiển thị ở trang chủ, nhãn không hiển thị ở trang chủ phải là nhãn cuối cùng trong chuỗi các nhãn ở bài viết được lọc không cho hiển thị ở trang chủ và nếu tất cả các bài viết mới nhất đều thuộc về một nhãn muốn ẩn thì blog của bạn sẽ trống trơn không hiển thị bài viết nào (vì thế chỉ áp dụng thủ thuật này khi blog của bạn đã có nhiều bài viết được đăng).

Bước 2 là ẩn liên kết nhãn Z Label ở cuối (footer) bài viết để khi ta đọc đến Bài viết số 1 và Bài viết số 3 thì sẽ không nhìn thấy liên kết Z Label ở cuối bài viết.

Ở chế độ Edit HTML chọn Expand Widget Templates. Tìm đ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>

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;Z Label&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>

Lưu Template là OK.

Từ thủ thuật này mình luận suy ra một thủ thuật khác là chỉ hiển thị các bài viết thuộc một nhãn nào đó ở trang chủ. Ở Bước 1 thay vì sử dụng đoạn code được đánh dấu màu đỏ thì sử dụng đoạn code sau đây.

<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 == "Z 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 thay vì Z Label, bạn có thể đặt tên nhãn bất kỳ cho các bài viết mà bạn muốn ở trang chủ chỉ hiển thị các bài viết này mà thôi. Tiếp tục áp dụng Bước 2 như trên.

Cũng chính từ Bước 2, ta có thể luận suy ra một thủ thuật khác là chỉ hiển thị tiện ích ở các bài viết thuộc một nhãn nhất định nào đó. Trong đoạn code được đánh dấu màu xanh ở Bước 2, đặt đoạn code sau đây vào trước thẻ </b:loop>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:label.name == &quot;Nhãn 1&quot;'>
<style type='text/css'>
#HTML1 {display:block;}
</style>
</b:if>
</b:if>

Tiếp tục đặt đoạn code sau đây vào sau dòng ]]></b:skin>.

<style type='text/css'>
#HTML1 {display:none;}
</style>

Ở đây HTML1 là id của tiện ích mà bạn muốn chỉ hiển thị ở các bài viết thuộc Nhãn 1. Thay Nhãn 1 bằng tên nhãn và thay HTML1 bằng id của nhãn mà bạn muốn áp dụng thủ thuật này.

Mình viết bài này để trả lời câu hỏi của bạn Hieu Bo tại blog Bokute.com.

Bạn ấy hỏi như thế này:

Có cách nào để ẩn bài viết ở trang chủ một cách riêng lẻ không anh?

Ví dụ em có 3 bài viết : bài 1, bài 2, bài 3.

Em không muốn ẩn hết 3 bài mà chỉ muốn ẩn bài số 2 thôi có được không. Mà chỉ ở trang chủ thôi, còn khi xem bài số 2 ở trang xem chi tiết thì vẫn xem bình thường, có điều mình không muốn bài 2 hiện ở trang chủ.

Hy vọng cá nhân bạn Hieu Bo sau khi đọc bài viết này sẽ cảm thấy hài lòng. :14)