Skip to main content

Bình luận Giscus

Giscus Comment cung cấp cách tích hợp bình luận dựa trên GitHub trực tiếp vào website của bạn. Tính năng này giúp tăng tương tác và xây dựng cộng đồng quanh nội dung của bạn.

Dưới đây là hướng dẫn cài đặt Giscus cho giao diện TanaFlows.


Bước 1: Tạo cấu hình Giscus của bạn

Làm theo hướng dẫn chi tiết của Giscus để tạo cấu hình cá nhân. Tóm lại, bạn cần:

  1. Tài khoản GitHub với một repository công khai mới.
  2. Cấp quyền cho ứng dụng Giscus truy cập repository.
  3. Bật tính năng discussion trên repository.
  4. Tạo cấu hình Giscus thành công.

Bạn sẽ nhận được cấu hình Giscus như sau:

<script
src="https://giscus.app/client.js"
data-repo="[ENTER REPO HERE]"
data-repo-id="[ENTER REPO ID HERE]"
data-category="[ENTER CATEGORY NAME HERE]"
data-category-id="[ENTER CATEGORY ID HERE]"
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>

Ghi lại 4 dòng quan trọng để dùng cho bước tiếp theo.

... data-repo="[ENTER REPO HERE]" data-repo-id="[ENTER REPO ID HERE]"
data-category="[ENTER CATEGORY NAME HERE]" data-category-id="[ENTER CATEGORY ID HERE]" ...

Lưu ý

Cấu hình của bạn sẽ có chuỗi thực tế thay cho [ENTER REPO HERE], [ENTER REPO ID HERE],…


Bước 2: Chọn Giscus làm nhà cung cấp bình luận trong tuỳ chỉnh giao diện

Tại dashboard ghost, vào Cài đặt > Thiết kế & thương hiệu > Tuỳ chỉnh > Bài viết > Nhà cung cấp bình luận

Chọn Giscus làm nhà cung cấp bình luận
Chọn Giscus làm nhà cung cấp bình luận

Tại trường 3rd comment id, dán 4 dòng quan trọng ở trên thành 1 dòng duy nhất, cách nhau bằng dấu cách. Ví dụ:

data-repo="[ENTER REPO HERE]" data-repo-id="[ENTER REPO ID HERE]" data-category="[ENTER CATEGORY NAME HERE]" data-category-id="[ENTER CATEGORY ID HERE]"

Ví dụ thực tế:

data-repo="CuongGhost/giscus" data-repo-id="MDExxxx2MDc1MDA=" data-category="Announcements" data-category-id="DIC_kwDxxx"
Một dòng duy nhất
Một dòng duy nhất

Xem bình luận Giscus tại trang này như demo

<script
src="https://giscus.app/client.js"
data-repo="CuongGhost/giscus"
data-repo-id="MDEwOlJlcG9zaXRvcnk0MDU2MDc1MDA="
data-category="Announcements"
data-category-id="DIC_kwDOGC0UTM4B_BkD"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="0"
data-emit-metadata="0"
data-input-position="top"
data-theme="transparent_dark"
data-loading="lazy"
crossorigin="anonymous"
async
></script>

Xem trước