Ở 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.jsonnằ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.originschấp nhận một danh sách các chuỗi sẽ được kiểm tra dựa trênwindow.origin.originsRegex: giống nhưoriginsnhư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ả
Private repository (dùng để chứa mã nguồn trang web): cái này private nên không thể chia sẻ.
Public repository (dùng để lưu trữ bình luận): https://github.com/namnguyenthanhwork/blog-comment-storage
Các bình luận có thể xem tại https://github.com/namnguyenthanhwork/blog-comment-storage/discussions