Chúng ta cần tạo một widget cho Blogger có thể hiển thị nhiều loại bài viết (recent, random, label, top-comments). Tuy nhiên, trang web cụ thể là "https://nhatkytieuhoa.blogspot.com/".
Vấn đề: Bản code trước đó không hiển thị bài viết. Có thể do cách lấy dữ liệu từ feed không đúng, hoặc do cấu trúc feed của blog này khác.
cxcxvc
Chúng ta sẽ điều chỉnh code để phù hợp với blogspot. Chú ý rằng blogspot có feed ở dạng JSON với cấu trúc cụ thể.
Đối với widget trong Blogger, chúng ta có thể sử dụng thẻ <b:widget> để nhúng. Nhưng ở đây chúng ta đang xây dựng một widget dạng HTML/JavaScript có thể chèn vào bất kỳ đâu.
Tuy nhiên, có một số hạn chế:
Feed của blogspot có thể bị giới hạn số lượng bài viết trả về.
Đối với bài viết ngẫu nhiên, chúng ta cần lấy nhiều bài viết rồi xáo trộn.
Đối với bài viết theo nhãn, chúng ta cần truy vấn đúng nhãn.
Chúng ta sẽ sử dụng API feed của blogspot:
Recent: /feeds/posts/default?alt=json&max-results=...
Label: /feeds/posts/default/-/[LABEL]?alt=json&max-results=...
Tuy nhiên, để tránh vấn đề Same-Origin Policy, chúng ta có thể sử dụng JSONP. Blogspot hỗ trợ JSONP bằng cách thêm &callback=xxx.
Nhưng trong môi trường Blogger, chúng ta có thể chèn trực tiếp script để lấy dữ liệu. Tuy nhiên, code trên đang sử dụng fetch, có thể không hoạt động trên một số trình duyệt cũ.
Chúng ta có thể sử dụng phương pháp JSONP hoặc sử dụng hàm callback từ feed.
Tuy nhiên, để đơn giản, chúng ta sẽ sử dụng cách lấy dữ liệu thông qua script với callback. Nhưng trong code trên, chúng ta đang dùng fetch, và nếu blog nằm trên cùng domain (ví dụ widget được nhúng trong blog đó) thì có thể dùng fetch.
Tuy nhiên, nếu widget được nhúng từ domain khác (ví dụ từ trang khác) thì sẽ gặp vấn đề CORS. May mắn là blogspot cho phép CORS từ bất kỳ đâu.
Tuy nhiên, để an toàn, chúng ta có thể sử dụng phương pháp JSONP. Nhưng trong phạm vi code này, chúng ta giả sử rằng widget được đặt trên cùng domain (tức là trên blogspot đó) và dùng fetch.
Nhưng nếu chúng ta muốn widget hoạt động trên chính blog đó, chúng ta có thể sử dụng đường dẫn tương đối.
Điều chỉnh:
Sử dụng đường dẫn feed tương đối: '/feeds/posts/default?alt=json&max-results=...'
Hoặc sử dụng đường dẫn đầy đủ: 'https://nhatkytieuhoa.blogspot.com/feeds/posts/default?alt=json&max-results=...'
Tuy nhiên, nếu widget được đặt trên chính blog đó, dùng đường dẫn tương đối là an toàn.
Chúng ta sẽ sửa lại phương thức fetchJson để dùng đường dẫn tương đối.
Ngoài ra, cần kiểm tra cấu trúc của feed trả về. Chúng ta có thể log ra để xem.
Tuy nhiên, để đảm bảo code hoạt động, chúng ta cần kiểm tra xem blog có tồn tại feed hay không.
Một vấn đề nữa: blog có thể không công khai feed. Nhưng mặc định blogspot công khai feed.
Chúng ta sẽ thử truy cập: https://nhatkytieuhoa.blogspot.com/feeds/posts/default?alt=json&max-results=1
Nếu thấy dữ liệu JSON thì mọi thứ ổn.
Bây giờ, chúng ta sẽ điều chỉnh code để đảm bảo lấy dữ liệu đúng.
Cụ thể, trong phương thức fetchJson, chúng ta dùng fetch với đường dẫn tương đối.
Tuy nhiên, nếu blog có cài đặt chuyển hướng HTTPS, có thể dùng // thay vì http:// hoặc https://.
Chúng ta sẽ sử dụng đường dẫn tương đối bắt đầu bằng '/'.
Ngoài ra, chúng ta cần xử lý lỗi nếu fetch thất bại.
Để debug, chúng ta có thể thêm log vào console.
Tuy nhiên, vì không biết cụ thể lỗi gì, chúng ta sẽ thêm các thông báo lỗi.
Code dưới đây đã được điều chỉnh để sử dụng đường dẫn tương đối và thêm log.
Ngoài ra, chúng ta cũng cần lưu ý rằng hình ảnh trong feed có thể không có, cần xử lý fallback.
Chúng ta sẽ sửa lại phương thức getPostImage để lấy ảnh từ nội dung nếu không có thumbnail.
Nhưng trong feed của blogspot, ảnh thumbnail có thể nằm trong media$thumbnail hoặc trong nội dung.
Chúng ta sẽ ưu tiên lấy ảnh từ media$thumbnail trước, nếu không có thì tìm ảnh đầu tiên trong nội dung.
Tuy nhiên, nếu không có ảnh, chúng ta có thể dùng ảnh mặc định.
Để đơn giản, chúng ta sẽ dùng ảnh mặc định nếu không tìm thấy.
Chúng ta cũng cần lưu ý rằng feed có thể trả về ảnh thumbnail với kích thước nhỏ, chúng ta có thể thay đổi kích thước bằng cách thay thế tham số trong URL.
Ví dụ: thay /s72-c/ bằng /s400-c/ để lấy ảnh lớn hơn.
Code đã có sẵn điều này.
Bây giờ, chúng ta sẽ cung cấp code hoàn chỉnh cho widget, bao gồm cả CSS, HTML và JavaScript.
Tuy nhiên, vì bạn nói bản trước không hiển thị bài viết, chúng ta sẽ thêm một số log và xử lý lỗi.
Chúng ta sẽ tạo một phiên bản đơn giản hơn, chỉ lấy recent posts trước để kiểm tra.
Sau đó, chúng ta sẽ mở rộng cho các loại khác.
Dưới đây là code đã được điều chỉnh và rút gọn để tập trung vào recent posts trước.
⚡ Đặt hàng nhanh
Đăng nhận xét