Đối với nền tảng Blogspot thì các thẻ điều kiện là một thành phần không thể thiếu và nó được coi là phần cốt lõi trong thiết kế blogspot.
Khi nắm vững được các thẻ điều kiện thì các bạn có thể dễ dàng tùy chỉnh hiển thị ở trang chủ, trang tĩnh, trang bài viết, trang lưu trữ,... Trong bài viết hôm nay mình sẽ liệt kê tất cả các thẻ điều kiện của Blogspot từ cũ cho đến mới. Hy vọng rằng, bài viết này sẽ giúp ích nhiều cho các bạn thích mày mò và đang có ý định tối ưu hóa blog cũng như có ý định thiết kế giao diện Blog.
Thẻ điều kiện hoạt động thế nào?
- Thẻ điều kiện được tạo thành từ một cặp thẻ đóng mở <b:if>...</b:if> với thuộc tính cond. Trong giữa những thẻ này, các nội dung như (html ,style, script, widgets…) sẽ thực hiện theo những điều kiện xác định.
- Ví dụ như trong đoạn code sau:
<b:if cond='giá trị'><style>...css...</style>
<script>...javascript 1...</script>
nội dung thực hiện khi giá trị trên là đúng<b:else/><script>...javascript 2...</script>
nội dung thực hiện khi giá trị trên là sai</b:if>
- hoặc đơn giản hơn
<b:if cond='your condition'>
Các nội dung như (html ,style, script, widgets…)
</b:if>
Bây giờ chúng ta sẽ đi tìm hiểu chi tiết về các loại thẻ điều kiện trong Blogspot nhé.
Các thẻ điều kiện
1. Trang chủ (Homepage)
- Thẻ thẻ điều kiện phiên bản mới:
<b:if cond='data:view.isHomepage'><!-- Nội dung chỉ hiển thị trên trang chủ --></b:if>
- Thẻ thẻ điều kiện phiên bản cũ:
<b:if cond='data:blog.url == data:blog.homepageUrl'><!-- Nội dung chỉ hiển thị trên trang chủ --></b:if>
- Lưu ý: Các bạn có thể sử dụng thẻ mới hay thẻ cũ cũng được nhé
2. Trang bài viết (item)
<b:if cond='data:view.isPost'><!-- Nội dung chỉ hiển thị trên trang bài viết --></b:if>
- Thẻ thẻ điều kiện phiên bản cũ:
<b:if cond='data:blog.pageType == "item"'><!-- Nội dung chỉ hiển thị trên trang bài viết --></b:if>
Cho một trang bài viết cụ thể:
<b:if cond='data:blog.url == data:blog.homepageUrl path "2020/08/the-dieu-kien-blogspot-day-du-nhat.html"'> <!-- Nội dung chỉ hiển thị trên trang bài viết có địa chỉ https://trucblogs.blogspot.com/2020/08/the-ieu-kien-blogspot-ay-u-nhat.html--> </b:if>
3. Trang tĩnh (Static page)
<b:if cond='data:view.isPage'><!-- Nội dung chỉ hiển thị trên trang tĩnh static page --></b:if>
- Thẻ thẻ điều kiện phiên bản cũ:
<b:if cond='data:blog.pageType == "static_page"'><!-- Nội dung chỉ hiển thị trên trang tĩnh static page --></b:if>
Cho một trang tĩnh cụ thể:
<b:if cond='data:blog.url == data:blog.homepageUrl path "p/static.html"'><!-- Nội dung chỉ hiển thị trên trang bài viết có địa chỉ url Blog-cua-ban/p/static.html 'foo' --></b:if>
4. Trang index bao gồm trang chủ, trang hiển thị nhãn Label, và trang archive.
<b:if cond='data:view.isMultipleItems'><!-- Nội dung chỉ hiển thị trên các trang index: trang chủ, trang hiển thị nhãn, trang lưu trữ --></b:if>
- Thẻ thẻ điều kiện phiên bản cũ:
<b:if cond='data:blog.pageType == "index"'><!-- Nội dung chỉ hiển thị trên các trang index: trang chủ, trang hiển thị nhãn, trang lưu trữ --></b:if>
5. Trang label search
<b:if cond='data:view.isLabelSearch'><!-- Nội dung hiển thị trên tất cả các trang nhãn label --></b:if> .................<b:if cond='data:view.isLabelSearch == "blogger"'><!-- Nội dung chỉ hiển thị trên nhãn "blogger"--></b:if>
- Thẻ thẻ điều kiện phiên bản cũ:
<b:if cond='data:blog.searchLabel'><!-- Nội dung hiển thị trên tất cả các trang nhãn label --></b:if> .................<b:if cond='data:blog.searchLabel == "blogger"'><!-- Nội dung chỉ hiển thị trên nhãn "blogger"--></b:if>
6. Hiển thị nội dung cho kết quả tìm kiếm
<!-- Bao gồm trang tìm kiếm nhãn --><b:if cond='data:view.isSearch'> … </b:if><!-- Chỉ các trang tìm kiếm --><b:if cond='data:view.isSearch and !data:view.isLabelSearch'> … </b:if>
- Thẻ thẻ điều kiện phiên bản cũ:
<b:if cond='data:blog.searchQuery'><!-- Nội dung hiển thị trên tất cả các trang tìm kiếm --></b:if> ...................................<b:if cond='data:blog.searchQuery == "blogger"'><!-- Nội dung chỉ hiển thị trên trang tìm kiếm với từ "blogger"--></b:if>
7. Trang lỗi 404
<b:if cond='data:view.isError'><!-- Nội dung chỉ hiển thị trên trang lỗi --></b:if>
- Thẻ thẻ điều kiện phiên bản cũ:
<b:if cond='data:blog.pageType == "error_page"'><!-- Nội dung chỉ hiển thị trên trang lỗi --></b:if>
8. Trang lưu trữ (archive)
<b:if cond='data:view.isArchive'><!-- Nội dung chỉ hiển thị trên tất cả các trang lưu trữ archive--></b:if>
- Thẻ thẻ điều kiện phiên bản cũ:
<b:if cond='data:blog.pageType == "archive"'><!-- Nội dung chỉ hiển thị trên tất cả các trang lưu trữ archive--> </b:if>
9. Trang hiển thị trên mobile
<b:if cond="data:blog.isMobile"><!-- Nội dung chỉ hiển thị trên trang mobile--></b:if>
10. Nội dung hiển thị cho bài viết đầu tiên FirstPost
- Nội dung hiển thị cho những trang có nhiều bài viết trên cùng một trang, áp dụng này cho bài viết đầu tiên FirstPost (chỉ áp dụng cho Blog Gatget v1)
<b:if cond='data:post.isFirstPost'><!-- Nội dung cần trình bày --></b:if>
11. Nội dung hiển thị cho trang tĩnh Static Page và bài viết Item
<b:if cond='data:view.isSingleItem'><!-- Nội dung chỉ hiển thị với trang tĩnh và bài viết --></b:if>
- Thẻ thẻ điều kiện phiên bản cũ:
<b:if cond='data:blog.url == data:post.url'><!-- Nội dung chỉ hiển thị với trang tĩnh và bài viết --></b:if>
12. Hiển thị nội dung nếu bài viết có ảnh thumbnail
<b:if cond='data:post.thumbnailUrl'><!-- Nội dung chỉ hiển thị với bài viết có ảnh thumbnail --></b:if>
13. Hiển thị một nội dung khi có Backlink
<b:if cond='data:post.showBacklinks'><!-- Nội dung chỉ hiển thị khi có backlink --></b:if>
14. Hiển thị nội dung cho Tác giả bài viết
<b:if cond='data:displayname == "author-name"'><!-- Nội dung cần trình bày --></b:if>
15. Hiển thị nội dung trên trang có số comments bằng một giá trị nào đó
<b:if cond='data:post.numComments == number'><!-- Nội dung cần trình bày --> </b:if>
16. Hiển thị nội dung trong tất cả các trang khi chức năng comment được kích hoạt
<b:if cond='data:post.allowComments'><!-- Nội dung cần trình bày --></b:if>
17. Hiển thị nội dung ở trang Preview (xem trước)
<b:if cond='data:view.isPreview'> … </b:if>
18. Điều kiện đối với nhãn (Label) cuối cùng
<b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'><!-- Nếu ko phải nhãn cuối thì thêm ký tự đặc biệt vào phía sau --> , </b:if></b:loop>
Cách sử dụng các thẻ điều kiện
1. Áp dụng điều kiện xuất hiện hoặc không xuất hiện
- == Có nghĩa là chỉ xuất hiện trên 1 trang được chỉ định
- != Có nghĩa là xuất hiện trên tất cả các trang trừ trang được chỉ định
2. Dùng thêm thẻ <b:/else/>
Nếu muốn đưa vào một nội dung thay thế khi điều kiện đưa vào là sai, bạn cần thêm một thẻ <b:else> và cho nội dung vào giữa.
<b:if cond='data:view.isPost'>Nội dung chỉ hiển thị trang bài viết Item<b:else/>Nội dung hiển thị các trang còn lại </b:if>
3. Kết hợp của nhiều điều kiện (xuất hiện khi thỏa mãn các điều kiện)
<b:if cond='!data:blog.pageType == "item"'><b:if cond='data:view.isHomepage'><style type='text/css'>.post-body {color: black;}</style><b:else/><b:if cond='data:view.isLabelSearch'><style type='text/css'>.post-body {color: green;}</style><b:else/> <style type='text/css'>.post-body {color: blue;}</style></b:if></b:if></b:if>
- Ý nghĩa của đoạn code trên là màu chữ sẽ thay đổi tùy theo từng trang. Cụ thể là màu chữ ở Trang chủ .post-body là màu black (đen), nếu là trang nhãn sẽ có màu là green(xanh lá), còn nếu là các trang khác sẽ có màu blue (xanh da trời).
4. Sử dụng điều kiện IN
<b:if cond='data:blog.pageType in {"static_page","item"}'>Nội dung chỉ hiển thị Trang Tĩnh và trang Bài Viết</b:if>
5. Sử dụng điều kiện NOT IN
<b:if cond='data:blog.pageType not in {"static_page","item"}'>Nội dung không hiển thị Trang Tĩnh và trang Bài Viết</b:if>
6. Sử dụng điều kiện AND
<b:if cond='data:view.isPage and data:view.isPost'>Nội dung hiển thị Trang Tĩnh và Trang Bài Viết</b:if>
7. Sử dụng điều kiện OR
<b:if cond='data:view.isPage or data:view.isPost'>Nội dung hiển thị hoặc Trang Tĩnh hoặc Trang Bài Viết</b:if>
8. Sử dụng điều kiện Else if
<b:if cond='data:blog.pageType == "item"'><data:post.body/><b:elseif cond='data:blog.pageType == "static_page"'><data:post.body/><b:else/><data:post.snippet/></b:if>
Đoạn code trên tương đương với
<b:if cond='data:blog.pageType == "item"'><data:post.body/> <b:else/><b:if cond='data:blog.pageType == "static_page"'><data:post.body/><b:else/><data:post.snippet/></b:if></b:if>
Một số lưu ý
Khi bạn chỉnh sửa code cho template của bạn, đôi khi dấu ngoặc kép (“) sẽ bị thay thế bằng ký tự quot;. Ví dụ:
<b:if cond='data:blog.pageType == "static_page"'>
sẽ được thay là
<b:if cond='data:blog.pageType == quot;static_pagequot;'>
Sử dụng điều kiện trong thẻ b:include thì giống với thẻ b:if, bạn chỉ cần thêm vào thuộc tính cond='ĐIỀU KIỆN' của thẻ b:if vào thẻ b:include là được.
Trên đây, tôi đã liệt kê tất cả thẻ điều kiện Blogspot. Hy vọng nó sẽ giúp ích nhiều cho các bạn trong việc sử dụng cũng như thiết kế trên nền tảng Blogspot.
Đăng nhận xét