👋 Chào mừng đến với Blog - Thành Nam Nguyễn

Tích hợp hệ thống bình luận cho blog của bạn với Giscus - Phần 2

Tích hợp hệ thống bình luận cho blog của bạn với Giscus - Phần 2

Deployment

Ở phần 1, 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. Tuy nhiên, để thêm Giscus thì bạn phải để repository của bạn ở chế độ công khai (public), nếu để private thì không thể thêm Giscus vào trang web của bạn được.

Phần 2 này mình sẽ chia sẻ một mẹo nhỏ giúp bạn có thể tích hợp Giscus vào blog cá nhân mà không muốn công khai mã nguồn (source code) - repository dạng private.

1. Chuẩn bị

Để Giscus có thể chạy được ở repository dạng private ta chỉ cần:

  • Một repository chứa mã nguồn trang web của bạn.

  • Một repository dùng để lưu trữ dữ liệu các cuộc thảo luận, bình luận.

  • Một file giscus.json nằm trong public repository để cấu hình.

2. Thực hiện

Đầu tiên, bạn tạo 1 repository dạng public dùng để lưu trữ bình luận, các bước cấu hình Giscus ở phần 1.

Sau khi cấu hình xong, ta có 1 đoạn code để nhúng vào trang web của bạn (ví dụ như ở bên dưới)

<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>

Tiếp theo, bạn nhúng đoạn code này vào mã nguồn private repository. Nó sẽ ánh xạ (mapping) các cuộc thảo luận, bình luận và được lưu trữ ở public repository (mục Discussion).

  • Đối với project sử dụng html, css, js thuần, bạn thêm thẻ <script> ở trên vào website của bạn nơi bạn muốn bình luận xuất hiện.

  • Đố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

Cuối cùng, thiết lập cấu hình file giscus.json để chạy trên môi trường production.

{
  "origins": [
    "https://giscus.app",
  ],
  "originsRegex": [
    "https://giscus-demo-private-([A-z0-9]|-)*giscus\\.vercel\\.app",
    "http://localhost:[0-9]+"
  ],
  "defaultCommentOrder": "newest"
}

Giải thích:

  • origins: dùng để hạn chế các miền có thể tải giscus với các cuộc thảo luận trong kho lưu trữ của bạn. origins chấp nhận một danh sách các chuỗi sẽ được kiểm tra dựa trên window.origin.

  • originsRegex: giống như origins nhưng nó chấp nhận một danh sách các mẫu biểu thức chính quy để kiểm tra.

  • defaultCommentOrder: sắp xếp thứ tự bình luận.

3. Kết quả

demo

4. Tài liệu tham khảo