Hướng dẫn thêm bình luận Giscus vào Ghost

Cách thêm bình luận Giscus vào Ghost, thêm lựa chọn hệ thống bình luận cho người dùng Ghost.

Cường Trần
Cường Trần
4 phút đọc

Giscus là một app bình luận miễn phí với database được lưu ở tài khoản Github của bạn thay vì cơ sở dữ liệu của dịch vụ như các app bình luận khác.

Giscus liên kết với Github Discussion API để tạo bình luận cho site bạn.

Ưu điểm của Giscus là miễn phí, chống spam và khá đẹp. Khuyết điểm là không có tiếng Việt, bắt buộc phải có tài khoản Github để có thể bình luận.

Cách dùng Giscus như sau:

1. Tạo và cấu hình Github Repo

Đăng nhập vào tài khoản Github (hoặc tạo mới tài khoản Github) và tạo mới một public Repo (không dùng Private). Bạn đặt một cái tên dễ nhớ cho Github Repo này.

Sau đó, bạn cần cài đặt Giscus App cho Repo vừa mới tạo.

Chọn Configure để cài đặt
Chọn Configure để cài đặt
Dùng lựa chọn Only select repositories cho Repo bạn mới tạo (không dùng lựa chọn All repositories)
Dùng lựa chọn Only select repositories cho Repo bạn mới tạo (không dùng lựa chọn All repositories)

Trong phần setting, bật tính năng Discussion (mặc định nó sẽ tắt).

Mở tuỳ chọn Discussions cho Github Repo mới tạo của bạn
Mở tuỳ chọn Discussions cho Github Repo mới tạo của bạn

Hoàn tất ở Github.

2. Tạo code Giscus App tự động

Bạn vào Giscus.app để tạo, tại đây có công cũ sẵn để bạn tạo code.

Bạn cần điền "username/reponame". Username là username Github của bạn, reponame là tên Repo mà bạn đặt ở trên.

Tùy chỉnh giao diện và một số tính năng của Giscus như sau.

Chú ý Username và Repo của bạn
Chú ý Username và Repo của bạn

Chú ý, bạn nên chọn màu preference color vì nó sẽ dựa theo Darkmode (nếu có) của theme Ghost mà bạn dùng.

Bạn cũng có thể lựa chọn bật tắt widget reaction.

Cuối cùng, bạn tạo code và dán vào theme Ghost.

3. Bảo mật hệ thống bình luận Giscus của bạn

Rất quan trọng bước này, bạn cần đảm bảo Giscus chỉ hiển thị trên site bạn mà thôi. Vì script Giscus là client script nên dễ dàng bị đánh cắp.

Để tránh điều đó, bạn cần whitelist domain bạn dùng Giscus.

Bạn tạo mới file đặt tên là giscus.json, dán code bên dưới vào

{
  "origins": [
    "https://domaincuaban.com"
  ]
}

Thay domaincuaban.com thành domain bạn đang dùng chèn Giscus.

Tạo mới file giscus.json
Tạo mới file giscus.json

Xong, giờ đây Giscus chỉ tải bình luận trên domain chỉ định mà bạn khai báo ở trên.

4. Cài đặt thông báo khi có bình luận

Cái này hay hơn bình luận bằng Telegram cho Ghost vì có thể tạo được thông báo.

Hướng dẫn sử dụng Telegram làm hệ thống bình luận cho Ghost
Hướng dẫn sử dụng Telegram Comments để làm hệ thống bình luận cho Ghost.

Bạn cài đặt ở Github Repo Setting, tại tab Notification, bạn điền email bạn dùng để nhận thông báo.

Chọn email thông báo cho Repo
Chọn email thông báo cho Repo

Mỗi khi có bình luận mới (bao gồm trả lời bình luận) bạn sẽ nhận được email thông báo đến bạn.

Trải nghiệm cá nhân khi dùng Giscus

Do bắt buộc phải có tài khoản Github để bình luận nên nó khá không phù hợp với đối tượng đọc giả phổ thông. Bù lại thì chống spam tốt.

Không có tiếng Việt sẽ làm site bạn không thân thiện với người Việt.

Không có giới hạn về hiển thị bình luận, điều này sẽ là vấn đề lớn về hiển thị và tốc độ tải nếu có nhiều bình luận trên trang.

Phụ thuộc vào Github Discussion API, Microsoft có thể thay đổi API bất cứ lúc nào họ cảm thấy bị "abuse" hoặc không cần thiết. Hi vọng là không xảy ra!

Giscus vẫn đang được cập nhật để hoàn thiện hơn, hi vọng sẽ cấu hình đa dạng hơn ở các bản cập nhật kế tiếp.

Giscus chỉ phù hợp cho blog cá nhân.

Lời kết...

Giscus có thể dùng cho mọi nền tảng, không riêng gì Ghost. Mỗi bình luận sẽ dựa vào slug của bài viết, vì vậy bạn không được đổi slug bài viết sẽ làm mất bình luận cũ.

Cuối cùng, bạn hãy xem demo ngay bên dưới nhé ↓.

Hướng Dẫn

Bạn có thể quan tâm

Viết bài trên Google Docs, xuất bản trên Ghost

Hướng dẫn cách viết blog trên Google Docs và xuất bản trên Ghost CMS.

Viết bài trên Google Docs, xuất bản trên Ghost

Hiệu ứng lightbox video Youtube cho Ghost bằng Fancyapps

Cáchtạo hiệu ứng lightbox cho video Youtube đơn giản bằng Fanyapps cho Ghost.

Hiệu ứng lightbox video Youtube cho Ghost bằng Fancyapps

Thêm hiệu ứng lightbox cho Ghost siêu đơn giản với Fluidbox

Cách đơn giản để thêm hiệu ứng lightbox cho ảnh, vừa nhanh vừa đẹp.

Thêm hiệu ứng Lightbox cho ảnh siêu đơn giản cho Ghost
Cường Trần

Cường Trần

Cường chuyên viết về giải pháp liên quan đến WordPress và Ghost, là một How-to blogger thực chiến.

bởi @CườngTrần