Tích hợp comment với GitHub Discussions cho blog

1. Lan man một xíu

• Lợi ích của các công cụ này là: giúp các bạn có thể nhanh chóng tạo ra cho mình 1 trang cá nhân, không cần biết quá nhiều về lập trình cũng như lưu trữ cơ sở dữ liệu, các công cụ sẳn có của nền tảng cung cấp gần như đầy đủ các nhu cầu cơ bản của bạn

• vậy nhược điểm là gì, vì do cấu trúc cơ sở dữ liệu do nên tảng cung cấp nên một số tính năng tùy chỉnh sẽ hạn chế, hoặc thậm chí là bất khả thi, điển hình như chức năng quản lý bình luận

2. Một số giải pháp

3. Cách tích hợp GitHub Discussions vào blog của bạn

• Hoàn toàn miễn phí

• Không có quảng cáo hoặc theo dõi

• Có rất nhiều chủ đề (như dark hoặc light mode)

• Nó khá tùy biến

3.1 Điều kiện tiên quết

• Tất nhiên rồi trước tiên bạn phải có 1 trang blog đã, và có thể chỉnh sửa mã nguồncho nó

• Tài khoản Github, bạn cần có 1 tài khoản Github để tạo mới 1 repository

• Repository phải đặt ở chế độ công khai

3.2 Kích hoạt Discussions

3.3 Cài đặt giscus

3.4 Cấu hình cho Giscus

<script src="https://giscus.app/client.js"
        data-repo="longnguyendev/giscus"
        data-repo-id="R_kgKOAz8a8A"
        data-category="General"
        data-category-id="DIC_kwKOAz8a8M4Cmod9"
        data-mapping="url"
        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>

3.5 Sử dụng giscus với React, Vue hoặc Svelte

npm i @giscus/react   # for React/Preact
npm i @giscus/vue     # for Vue
npm i @giscus/svelte  # for Svelte
npm i @giscus/solid   # for Solid
# Change npm with the package manager you use

import Giscus from '@giscus/react';

export default function MyApp() {
  return (
    <Giscus
      id="comments"
      repo="giscus/giscus-component"
      repoId="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA="
      category="General"
      categoryId="DIC_kwDOF1L2fM4B-hVS"
      mapping="specific"
      term="Welcome to @giscus/react component!"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="top"
      theme="light"
      lang="en"
      loading="lazy"
    />
  );
}

'use client';

import Giscus from '@giscus/react';

export default function MyApp() {
import { useTheme } from '@mui/material';
  return (
    <Giscus
      id="comments"
      repo="giscus/giscus-component"
      repoId="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA="
      category="General"
      categoryId="DIC_kwDOF1L2fM4B-hVS"
      mapping="specific"
      term="Welcome to @giscus/react component!"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="top"
      theme={theme.palette.mode === 'light' ? 'light' : 'dark'}
      lang="en"
      loading="lazy"
    />
  );
}

4. Kết quả

 

5. Tổng kết