Bạn muốn thêm tính năng bình luận cho blog của bạn nhưng chưa biết sử dụng hệ thống bình luận nào?
Bạn muốn tích hợp hệ thống bình luận cho blog của bạn nhưng không muốn phải quản lý một hệ thống riêng?
Bạn muốn tích hợp hệ thống bình luận cho blog của bạn nhưng không muốn phải trả phí?
Nếu câu trả lời của bạn là có thì hãy cùng tìm hiểu về Giscus.
1. Giscus là gì?
Giscus là một ứng dụng được phát triển để đơn giản hóa và tối ưu hóa trải nghiệm thảo luận và bình luận cho các dự án trên GitHub. Với Giscus, bạn có thể tích hợp một hệ thống bình luận trực tiếp vào trang web hoặc ứng dụng của bạn, cho phép người dùng thảo luận, theo dõi vấn đề (issues), và tương tác với cộng đồng của dự án một cách thuận tiện.
1.1. Ưu điểm của Giscus
Là 1 dự án mã nguồn mở 🌏
Không theo dõi, không quảng cáo, luôn miễn phí. 📡 🚫
Không cần cơ sở dữ liệu. Tất cả dữ liệu được lưu trữ trong Thảo luận của GitHub (Github discussion).
Hỗ trợ các giao diện tùy chỉnh! (🌗 sáng - tối - hệ thống).
Hỗ trợ đa ngôn ngữ 🌐
Có thể cấu hình rộng rãi 🔧
Tự động tìm nạp các nhận xét, bình luận và chỉnh sửa mới từ GitHub. 🔃
Có thể tự lưu trữ! 🤳
1.2. Nhược điểm của Giscus
Mặc dù Giscus là một ứng dụng tốt để tối ưu hóa trải nghiệm thảo luận và bình luận trên GitHub, nó cũng có một số nhược điểm. Dưới đây là một số điểm yếu của Giscus:
Phụ thuộc vào GitHub: Một trong nhược điểm lớn của Giscus là nó phụ thuộc vào tài khoản GitHub để xác thực người dùng. Điều này có nghĩa là bạn cần có tài khoản GitHub để sử dụng Giscus, và nếu bạn không có một tài khoản GitHub, bạn sẽ không thể tham gia vào cuộc thảo luận.
Dễ bị lạm dụng: Một số dự án có thể sử dụng Giscus để spam hoặc tạo ra các cuộc thảo luận không liên quan.
Không phải lựa chọn cho mọi dự án: Giscus có thể không phù hợp cho tất cả loại dự án. Đối với các dự án lớn hoặc phức tạp, có thể cần một giải pháp quản lý dự án và thảo luận mạnh mẽ hơn.
2. Giscus hoạt động như thế nào?
Khi Giscus được tải, ứng dụng sử dụng API tìm kiếm Thảo luận trên GitHub để tìm thảo luận liên quan đến trang dựa trên một ánh xạ đã chọn (URL, đường dẫn, <title>, v.v.). Nếu không tìm thấy thảo luận tương ứng, bot Giscus sẽ tự động tạo một thảo luận lần đầu tiên khi có người bình luận.
Để bình luận, người truy cập phải ủy quyền cho ứng dụng Giscus để đăng bài thay mình bằng cách sử dụng quy trình xác minh OAuth của GitHub. Tùy vào ý muốn, người truy cập cũng có thể bình luận trực tiếp trong thảo luận trên GitHub. Bạn có thể kiểm duyệt các bình luận trên GitHub.
3. Cách tích hợp Giscus vào blog của bạn
Các điều kiện (bắt buộc) để tích hợp Giscus vào blog của bạn bao gồm:
Kho lưu trữ (repository) của bạn phải ở chế độ công khai (public), nếu không khách truy cập sẽ không thể xem bình luận.
Ứng dụng giscus đã được cài đặt.
Tính năng Thảo luận được bật bằng cách bật tính năng này cho kho lưu trữ của bạn.
3.1. Tạo 1 kho lưu trữ công khai (public repository)
Bước 1: Vào trang chủ của GitHub, chọn New để tạo 1 kho lưu trữ mới.
Bước 2: Đặt tên cho kho lưu trữ của bạn, ví dụ: giscus-demo-nextjs. Sau đó chọn công khai (public) và khởi tạo kho lưu trữ (create repository).
3.2. Kích hoạt hệ thống thảo luận (Discussions)
Mặc định, phần thảo luận trên GitHub bị tắt (vô hiệu hoá). Để bật chúng, hãy vào cài đặt (settings) -> tìm chọn thảo luận (discussions) -> tick chọn.
Sau đó cấu hình Giscus (tại đây) cho kho lưu trữ (repository) của bạn.
Tiếp đến, bạn chọn kho lưu trữ (repository) mà bạn vừa tạo ở bước trước.
3.3. Cấu hình Giscus
Đầu tiên bạn vào Giscus lăn xuống Configuration để thiết lập cấu hình.
3.3.1. Chọn ngôn ngữ hiển thị
Bạn có thể chọn ngôn ngữ hiển thị cho Giscus bằng cách chọn Language và chọn ngôn ngữ bạn muốn.
3.3.2. Chọn kho lưu trữ đã tạo
Bạn chọn Repository và chọn kho lưu trữ (repository) mà bạn vừa tạo ở bước trước. Bước này để lấy data-repo-id repository của bạn.
Với cấu trúc username/repository-name
Ví dụ: https://github.com/namnguyenthanhwork/giscus-demo-nextjs là namnguyenthanhwork/giscus-demo-nextjs
3.3.3. Ánh xạ (mapping)
Bạn có thể chọn Mapping để ánh xạ (mapping) các trang của blog của bạn với các thảo luận trên GitHub.
Chọn mapping giữa trang nhúng và discussion được nhúng.
Tiêu đề discussion chứa tên đường dẫn của trang: giscus sẽ tìm kiếm một discussion có tiêu đề chứa thành phần URL tên đường dẫn của trang.
Tiêu đề discussion chứa URL của trang: giscus sẽ tìm kiếm discussion dựa trên tiêu đề chứa URL của trang
Tiêu đề Discussion chứa
<title>của trang: giscus sẽ tìm kiếm discussion dựa trên tiêu đề chứa<title>HTML tag của trang.Tiêu đề Discussion chứa
og:titlecủa trang: giscus sẽ tìm kiếm discussion dựa trên tiêu đề chứa<meta property="og:title">HTML tag của trang.Tiêu đề discussion chứa một cụm từ cụ thể: giscus sẽ tìm kiếm một discussion có tiêu đề chứa một cụm từ cụ thể.
Số discussion cụ thể: giscus sẽ tải một discussion cụ thể theo số. Tùy chọn này không hỗ trợ tạo discussion tự động.
Sử dụng đối sánh tiêu đề nghiêm ngặt: Tránh không khớp do phương pháp tìm kiếm mờ nhạt của GitHub khi có nhiều thảo luận với các tiêu đề tương tự.
3.3.4. Chọn thể loại (category)
Bạn có thể chọn Category để chọn thể loại cho các thảo luận trên GitHub.
3.3.5. Các tính năng khác
Bạn có thể chọn Features để bật các tính năng khác. Chọn xem có nên bật các tính năng cụ thể hay không.
Bật reactions cho bài đăng chính: Reactions cho bài đăng chính của discussion sẽ được hiển thị trước phần bình luận.
Emit discussion metadataL Discussion metadata sẽ được gửi định kỳ đến cửa sổ chính (trang nhúng). Để kiểm tra, hãy bật tùy chọn này và mở bảng điều khiển trình duyệt của bạn trên trang này. Xem tài liệu để biết thêm chi tiết.
Đặt ô bình luận phía trên các bình luận: Trường nhập bình luận sẽ được đặt phía trên bình luận để người dùng có thể để lại bình luận mà không cần phải cuộn đến cuối cuộc thảo luận.
Tải các bình luận một cách lười biếng (lazy): Việc tải nhận xét sẽ bị hoãn lại cho đến khi người dùng cuộn đến gần vùng chứa nhận xét. Điều này được thực hiện bằng cách thêm
loading="lazy"vào phần tử<iframe>.
3.3.6. Chọn giao diện (theme)
Bạn có thể chọn Theme để chọn giao diện cho Giscus.
3.3.7. Nhúng bình luận vào blog của bạn
Sau khi bạn đã cấu hình xong, bạn thêm thẻ <script> sau vào website của bạn nơi bạn muốn bình luận xuất hiện (đối với project sử dụng html, css, js thuần).
<script
src="https://giscus.app/client.js"
data-repo="namnguyenthanhwork/giscus-demo-nextjs"
data-repo-id="R_kgDOKfu_sQ"
data-category="Announcements"
data-category-id="DIC_kwDOKfu_sc4CaF9f"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="preferred_color_scheme"
data-lang="vi"
crossorigin="anonymous"
async
></script>
Đối với các project sử dụng React, Vue, Angular, Nextjs, ... bạn có thể tải thư viện Giscus về và import vào project của bạn.
npm i @giscus/react
Bạn có thể tham khảo tài liệu tại đây
4. Kết quả
Sau khi bạn đã cấu hình xong, bạn sẽ thấy kết quả như sau:
Demo: https://namnguyenthanhwork.github.io/giscus-demo-nextjs/
Repository: https://github.com/namnguyenthanhwork/giscus-demo-nextjs
Các bình luận được lưu trữ ở https://github.com/namnguyenthanhwork/giscus-demo-nextjs/discussions
5. Tổng kết
Trong bài viết này, chúng ta đã tìm hiểu về Giscus là gì, cách hoạt động của Giscus, cách tích hợp Giscus vào blog của bạn và các ưu nhược điểm của Giscus. Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ bài viết này để nhiều người biết đến Giscus hơn nhé.