评论插件 Giscus

components/Comment.js

@@ -18,14 +18,26 @@ const UtterancesComponent = dynamic(
   },
   { ssr: false }
 )
+const GiscusComponent = dynamic(
+  () => {
+    return import('@/components/Giscus')
+  },
+  { ssr: false }
+)
 
 const Comment = ({ frontMatter }) => {
   const router = useRouter()
-  const { locale } = useGlobal()
+  const { locale, isDarkMode } = useGlobal()
   return (
     <div id='comment' className='comment mt-5 text-gray-800 dark:text-gray-300'>
       <Tabs>
 
+        {BLOG.COMMENT_GISCUS_REPO && (
+          <div key="Giscus">
+            <GiscusComponent isDarkMode={isDarkMode} className="px-2" />
+          </div>
+        )}
+
         {BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
           <GitalkComponent
             options={{

components/Giscus.js

@@ -0,0 +1,30 @@
+import BLOG from '@/blog.config'
+import { Giscus } from '@giscus/react'
+
+/**
+ * Giscus评论 @see https://giscus.app/zh-CN
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
+const GiscusComponent = ({ isDarkMode }) => {
+  const theme = isDarkMode ? 'dark' : 'light'
+  return (
+    <Giscus
+      repo={BLOG.COMMENT_GISCUS_REPO}
+      repoId={BLOG.COMMENT_GISCUS_REPO_ID}
+      category={BLOG.COMMENT_GISCUS_CATEGORY}
+      categoryId={BLOG.COMMENT_GISCUS_CATEGORY_ID}
+      mapping={BLOG.COMMENT_GISCUS_MAPPING}
+      reactionsEnabled={BLOG.COMMENT_GISCUS_REACTIONS_ENABLED}
+      emitMetadata={BLOG.COMMENT_GISCUS_EMIT_METADATA}
+      theme={theme}
+      inputPosition={BLOG.COMMENT_GISCUS_INPUT_POSITION}
+      lang={BLOG.COMMENT_GISCUS_LANG}
+      loading={BLOG.COMMENT_GISCUS_LOADING}
+      crossorigin={BLOG.COMMENT_GISCUS_CROSSORIGIN}
+    />
+  )
+}
+
+export default GiscusComponent