Đã đăng vào thg 12 19, 2023 3:46 CH 4 phút đọc

114

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

Chúng mình có tạo Group cho các bạn cùng chia sẻ và học hỏi về thiết kế hệ thống nha 😄😄😄

Các bạn tham gia để gây dựng cộng đồng System Design Việt Nam thật lớn mạnh nhé 😍😍😍

Cộng Đồng System Design Việt Nam: https://www.facebook.com/groups/sydexa

Kênh TikTok: https://www.tiktok.com/@sydexa.com

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ể truy cập blog của mình 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:

Lời nhắn