Nhảy tới nội dung
· 4 phút để đọc
Nguyễn Đức Anh Khôi
Nguyễn Đức Anh Khôi
Blog Owner

Thêm phần bình luận vào Docusaurus với Giscus và Github discussions

Docusaurus là một sự lựa chọn khá tốt khi các bạn muốn xây dựng blog cá nhân. Điểm mạnh của nó là nhanh chóng và chỉ cần dùng duy nhất ReactJS không cần đến backend cũng như database để lưu trữ. Tuy nhiên điều này cũng dẫn đến nhược điểm là người đọc không thể đưa ra các phản hồi cũng như thảo luận về bài viết của bạn. Để khắc phục, mình đã tìm hiểu được một công cụ có thể tận dụng Github Discussions để xây dựng một hệ thống bình luận, đó chính là Giscus

Bật chức năng Discussions​

GitHub Discussions là một tính năng mới của GitHub được thiết kế để tạo ra một diễn đàn cộng đồng tích hợp trực tiếp vào dự án của bạn trên GitHub. Nó cho phép người dùng tạo ra các thảo luận, đặt câu hỏi, chia sẻ ý kiến và tương tác với cộng đồng xung quanh một dự án cụ thể.

Để kích hoạt GitHub Discussions, ta cần thực hiện các bước sau:

  • Đăng nhập vào Github của bạn, tiến hành tạo một repository mới
  • Chọn tab Settings ở phía trên cùng của trang
  • Cuộn xuống phần Features và tìm Discussions
  • Nhấn vào nút Set up discussions
  • Điều chỉnh các thông tin trong phần Start a new discussion theo ý bạn, sau đó nhấn Start discussion

Cấu hình giscus​

  • Tiến hành Configure giscus vào tài khoản Github của bạn
  • Trong phần Repository access, chọn Only select repositories và chọn repository bạn đã tạo ở bước trước đó

Lấy thông tin repository và discussions​

  • Đăng nhập vào Github GraphQL API Explorer
  • Sử dụng câu truy vấn sau để lấy các thông tin cần thiết. Lưu ý thay thế nameOfYourGitHubAccount và nameOfCreatedRepository thành tên tài khoản và tên repository tương ứng của bạn
query { 
  repository(owner: "nameOfYourGitHubAccount", name:"nameOfCreatedRepository"){
    id
    discussionCategories(first:10) {
      edges {
        node {
          id
          name
        }
      }
    }
  }
}

Kết quả trả về có là 1 chuỗi json có định dạng như sau:

{
  "data": {
    "repository": {
      "id": "R_kgDOIVqhTg",
      "discussionCategories": {
        "edges": [
          {
            "node": {
              "id": "DIC_kwDOIVqhTs4CSSES",
              "name": "Announcements"
            }
          },
          {
            "node": {
              "id": "DIC_kwDOIVqhTs4CSSET",
              "name": "General"
            }
          },
          {
            "node": {
              "id": "DIC_kwDOIVqhTs4CSSEV",
              "name": "Ideas"
            }
          },
          {
            "node": {
              "id": "DIC_kwDOIVqhTs4CSSEX",
              "name": "Polls"
            }
          },
          {
            "node": {
              "id": "DIC_kwDOIVqhTs4CSSEU",
              "name": "Q&A"
            }
          },
          {
            "node": {
              "id": "DIC_kwDOIVqhTs4CSSEW",
              "name": "Show and tell"
            }
          }
        ]
      }
    }
  }
}

Các bạn chỉ cần quan tâm cho mình 2 mục đó là id của repository và id của node có tên là General

Thêm Giscus vào project​

  • Cài đặt package @giscus/react
npm i @giscus/react
  • Tạo file /src/components/GiscusComponent.tsx và tiến hành implements Giscus Component
import React from 'react';
import Giscus from "@giscus/react";
import {useColorMode} from '@docusaurus/theme-common';

export default function GiscusComponent() {
    const {colorMode} = useColorMode();

    return (
        <Giscus
            repo="ndanhkhoi/ndanhkhoi-blog-discussions"
            repoId=""   // Id of repository
            category="General"
            categoryId=""  // Id of "General"
            mapping="pathname"
            term="Welcome to @giscus/react component!"
            strict="0"
            reactionsEnabled="1"
            emitMetadata="1"
            inputPosition="top"
            theme={colorMode}
            lang="vi"
            loading="lazy"
        />
    );
}
  • Thực hiện custom giao diện BlogPostItem mặc định của Docusaurus
npm run swizzle @docusaurus/theme-classic BlogPostItem -- --wrap

Lệnh này sẽ tạo ra thư mục BlogPostItem trong src/theme/. Tiến hành điều chỉnh file index.js trong thư mục này thành như sau:

import React from 'react';
import {useBlogPost} from '@docusaurus/theme-common/internal'
import BlogPostItem from '@theme-original/BlogPostItem';
import Giscus from '@site/src/components/giscus';
import useIsBrowser from '@docusaurus/useIsBrowser';

export default function BlogPostItemWrapper(props) {
    const {metadata, isBlogPostPage} = useBlogPost()
    const isBrowser = useIsBrowser();

    const {frontMatter, slug, title} = metadata
    const {enableComments} = frontMatter

    return (
        <>
            <BlogPostItem {...props} />
            {(enableComments && isBlogPostPage) && (
                <Giscus/>
            )}
        </>
    );
}
  • Như vậy là xong, bây giờ bài viết nào bạn muốn bật tính năng bình luận thì chỉ cần thêm enableComments: true vào phần mô tả ở đầu file markdown, ví dụ như:
title: "Title of blog post"
authors: author
tags: [ keywordOne, keywordTwo ]
enableComments: true # for Giscus

Tổng kết​

Như vậy, chỉ với vài bước thao tác không quá phức tạp, chúng ta đã có thể thêm phần bình luận vào Blog của mình. Ngoài ra, Giscus còn hỗ trợ tính năng thả reaction cho bài viết 🎉. Các bạn có thể cuộn xuống cuối bài viết này để xem demo và để lại bình luận cũng như thả tim cho mình nhé. Cảm ơn các bạn rất nhiều ❤️

Nguồn: