- Các hệ thống bình luận truyền thống (Disqus, tự quản lý, GitHub Issues, v.v.) không được sử dụng vì các vấn đề về tốc độ, theo dõi, gánh nặng bảo trì và giới hạn người dùng
- Bluesky phù hợp cho bình luận blog vì không cần duy trì hạ tầng, hỗ trợ nội dung giàu, tài khoản dựa trên danh tính thật, hội thoại đa nền tảng
- Cách triển khai là đăng bài viết blog → chia sẻ lên Bluesky → thêm AT URI vào metadata bài viết → tải và hiển thị thread bình luận của bài viết đó
- Thành phần được chia thành 3 phần: hiển thị toàn bộ bình luận, hiển thị bình luận + trả lời, xử lý nhúng hình ảnh/đường liên kết
- Dùng đệ quy để hiển thị tối đa 5 cấp bình luận, lưới ảnh + modal, card liên kết, và các embed không hỗ trợ được hiển thị bằng câu thay thế
- Tích hợp Astro + React, load trên client bằng
client:load, kích hoạt bằng cách thêm DID và postCid vào frontmatter
- Dùng kiểu TypeScript của
@atcute/client để đảm bảo an toàn kiểu, với cấu trúc Progressive Enhancement giúp nội dung chính vẫn hiển thị bình thường khi JavaScript bị tắt
- Đảm bảo hiệu năng bằng cách dùng API và CDN của Bluesky mà không cần máy chủ hay cơ sở dữ liệu
- Cách tiếp cận này giữ được khả năng mở rộng và tính độc lập bằng việc kết nối với nền tảng người dùng đã dùng, thay vì tái tạo lại tính năng xã hội cho từng site
Lý do chọn Bluesky làm hệ thống bình luận
- Không cần duy trì hạ tầng
- Hỗ trợ nội dung phong phú như hình ảnh, liên kết, bài viết trích dẫn
- Tính tin cậy và trách nhiệm nhờ tài khoản Bluesky
- Có thể chuyển lưu lượng qua lại giữa blog và mạng xã hội
- Tách quyền sở hữu nội dung (bài viết thuộc chủ sở hữu, bình luận thuộc người viết)
Hiểu về giao thức AT
- DID: Định danh người dùng phi tập trung
- CID: Định danh nội dung
- AT URI: địa chỉ dạng
at://did:.../app.bsky.feed.post/...
- Có thể lấy thread bình luận bằng lời gọi API
getPostThread, không cần xác thực
Cấu trúc component
- Component bình luận chính
- Component render bình luận + trả lời
- Component xử lý nhúng hình ảnh, liên kết, v.v.
Xử lý bình luận lồng nhau
- Render đệ quy, giới hạn tối đa độ sâu 5 cấp
- Biểu diễn theo tầng bằng thụt lề trực quan
Xử lý nội dung rich media
- Hình ảnh: cung cấp qua CDN, grid nhiều ảnh + chế độ xem modal
- Liên kết ngoài: render card kèm ảnh thu nhỏ và mô tả
- Embed khác: hiển thị câu thay thế
Tích hợp Astro
- Dùng React component +
client:load
- Kích hoạt bình luận bằng cách thêm DID và postCid của Bluesky vào frontmatter
Trải nghiệm triển khai
- Đảm bảo tính ổn định nhờ hỗ trợ TypeScript type
- Với Progressive Enhancement, API lỗi vẫn không ảnh hưởng nội dung bài viết
- Tận dụng hạ tầng Bluesky mà không cần máy chủ hay DB
Kết luận
- Tránh các vấn đề của hệ thống bình luận cũ, kết nối với nền tảng người dùng đã quen thuộc
- Khi Bluesky phát triển, số lượng người tham gia có thể tăng theo
- Nhờ nền tảng ATProto, việc chuyển sang AppView khác hay triển khai riêng cũng dễ dàng
Chưa có bình luận nào.