Hiển thị bài viết mới nhất trong Blogger là cách giúp người đọc nhanh chóng tìm thấy những nội dung vừa được xuất bản trên blog.
Bạn có thể đặt danh sách này ở thanh bên, cuối trang hoặc một khu vực khác mà theme Blogger cho phép thêm tiện ích.
Trong bài viết này, Blog Vn Chia sẻ hướng dẫn cách tạo một tiện ích HTML/JavaScript hiển thị các bài viết mới nhất mà không cần chỉnh sửa trực tiếp theme XML.
Một danh sách gồm 5 bài viết mới nhất, hiển thị tiêu đề và ngày xuất bản. Bạn có thể thay đổi số lượng bài viết theo nhu cầu.
1. Phân biệt bài viết mới nhất và bài viết cập nhật gần đây
Trước khi tạo tiện ích, bạn cần xác định muốn hiển thị bài viết theo ngày xuất bản hay theo ngày cập nhật.
| Loại danh sách | Ý nghĩa |
|---|---|
| Bài viết mới nhất | Ưu tiên bài có ngày xuất bản mới hơn. |
| Bài viết cập nhật gần đây | Ưu tiên bài vừa được chỉnh sửa hoặc cập nhật. |
Ví dụ, một bài viết xuất bản năm 2021 nhưng được cập nhật năm 2026 có thể xuất hiện ở đầu danh sách cập nhật gần đây, dù không phải bài vừa được xuất bản.
Vì vậy, hai danh sách này phục vụ những nhu cầu khác nhau.
2. Feed bài viết Blogger hoạt động như thế nào?
Blogger cung cấp feed để các ứng dụng và tiện ích có thể đọc thông tin về bài viết công khai.
Đường dẫn feed bài viết thường có dạng:
/feeds/posts/default
Nếu muốn lấy bài viết theo một nhãn cụ thể, cấu trúc thường có thêm phần nhãn:
/feeds/posts/default/-/TEN-NHAN
Trong bài hướng dẫn trước, Blog Vn Chia sẻ đã giới thiệu cách hiển thị bài viết theo Label.
Bạn có thể đọc tại:
Cách hiển thị bài viết theo nhãn Label trong Blogger
Ở bài này, chúng ta sử dụng feed của toàn blog để tạo danh sách bài viết mới nhất.
3. Cách tạo tiện ích bài viết mới nhất trong Blogger
Bước 1: Mở Blogger
Đăng nhập tài khoản Blogger và chọn blog cần chỉnh sửa.
Bước 2: Mở phần Bố cục
Trong trang quản trị, chọn:
Bước 3: Thêm tiện ích
Tại vị trí muốn hiển thị danh sách bài viết, chọn Thêm tiện ích.
Bước 4: Chọn HTML/JavaScript
Trong danh sách tiện ích, chọn HTML/JavaScript.
Đặt tiêu đề, ví dụ:
Bước 5: Dán mã
Sao chép toàn bộ mã ở phần tiếp theo và dán vào ô nội dung của tiện ích.
Bước 6: Lưu và kiểm tra
Chọn Lưu, sau đó mở blog để kiểm tra danh sách bài viết.
4. Mã HTML/JavaScript tạo danh sách bài viết mới nhất
Đoạn mã dưới đây sử dụng feed công khai của Blogger để lấy bài viết.
Mặc định tiện ích hiển thị 5 bài và sắp xếp theo ngày xuất bản.
Đây là mã dành cho tiện ích HTML/JavaScript trong phần Bố cục, không phải mã để dán trực tiếp vào bài viết đang đọc.
<div id="bvc-recent-posts">
Đang tải bài viết...
</div>
<script>
(function () {
"use strict";
var limit = 5;
var container = document.getElementById(
"bvc-recent-posts"
);
if (!container) return;
var feedUrl =
"/feeds/posts/default" +
"?alt=json" +
"&max-results=" + limit +
"&orderby=published";
fetch(feedUrl)
.then(function (response) {
if (!response.ok) {
throw new Error("Không tải được feed");
}
return response.json();
})
.then(function (data) {
var entries =
data.feed && data.feed.entry
? data.feed.entry
: [];
container.textContent = "";
if (!entries.length) {
container.textContent =
"Chưa có bài viết để hiển thị.";
return;
}
var list = document.createElement("ul");
list.style.paddingLeft = "20px";
entries.forEach(function (entry) {
var title = entry.title.$t;
var url = "";
entry.link.forEach(function (link) {
if (link.rel === "alternate") {
url = link.href;
}
});
if (!url) return;
var item = document.createElement("li");
var anchor = document.createElement("a");
anchor.href = url;
anchor.textContent = title;
item.appendChild(anchor);
list.appendChild(item);
});
container.appendChild(list);
})
.catch(function () {
container.textContent =
"Không thể tải danh sách bài viết.";
});
})();
</script>
Bạn cần sao chép mã được hiển thị trong khung và dán vào tiện ích HTML/JavaScript của Blogger.
Mã này không phụ thuộc vào hàm labelthumbs trong theme và không cần khai báo các biến numposts, showpostthumbnails hoặc numchars.
5. Cách tùy chỉnh số lượng bài viết
Trong mã JavaScript, tìm dòng:
var limit = 5;
Nếu muốn hiển thị 10 bài viết, đổi thành:
var limit = 10;
Không nên hiển thị quá nhiều bài viết trong một khối nhỏ ở thanh bên vì có thể làm trang dài và khó theo dõi.
Muốn hiển thị bài cập nhật gần đây?
Bạn có thể thay:
orderby=published
bằng:
orderby=updated
Tuy nhiên, cần kiểm tra thứ tự trả về thực tế của feed trên blog đang sử dụng, vì khả năng hỗ trợ tham số và cách sắp xếp có thể phụ thuộc vào feed.
6. Ảnh minh họa từ bài viết gốc
Đây là ảnh kết quả hiển thị tiện ích bài đăng gần đây mà Blog Vn Chia sẻ đã đăng trong bài hướng dẫn trước đây.
Ảnh tư liệu: Tiện ích bài đăng gần đây trong giao diện blog trước đây.
7. Khắc phục lỗi thường gặp
Tiện ích chỉ hiển thị “Đang tải bài viết...”
Hãy kiểm tra xem bạn đã dán đủ mã JavaScript và lưu tiện ích hay chưa.
Đồng thời kiểm tra feed của blog có thể truy cập công khai hay không.
Danh sách không hiển thị bài viết
Kiểm tra blog đã có bài viết công khai và không chặn quyền truy cập feed cần sử dụng.
Tiêu đề quá dài
Bạn có thể giảm số lượng bài hiển thị hoặc điều chỉnh CSS của tiện ích.
Tiện ích hiển thị hai lần
Kiểm tra theme đã có khối bài viết mới nhất hay chưa. Nếu có, hãy cân nhắc chỉ giữ một khối phù hợp.
8. Câu hỏi thường gặp
Có cần chỉnh sửa theme XML không?
Không cần đối với cách sử dụng tiện ích HTML/JavaScript được trình bày trong bài này.
Có thể hiển thị 20 bài viết không?
Có thể thay đổi biến limit, nhưng nên cân nhắc không gian hiển thị và trải nghiệm đọc.
Bài viết mới có tự xuất hiện không?
Khi tiện ích tải được feed mới và danh sách được sắp xếp phù hợp, bài viết mới có thể xuất hiện mà không cần sửa danh sách liên kết thủ công.
Có cần Google API key không?
Không. Ví dụ sử dụng feed công khai của Blogger, không dùng Blogger API có xác thực.
Kết luận
Việc hiển thị bài viết mới nhất giúp người đọc nhanh chóng tìm được những nội dung vừa xuất bản trên Blogger.
Với tiện ích HTML/JavaScript, bạn có thể tạo danh sách tự động mà không cần chỉnh sửa theme XML.
Nếu chỉ cần hiển thị danh sách chủ đề, hãy sử dụng tiện ích Nhãn có sẵn. Nếu muốn hiển thị các bài thuộc một chủ đề cụ thể, hãy tham khảo bài hướng dẫn hiển thị bài viết theo Label.
No comments:
Post a Comment