feat: 添加 cusdis 评论。

components/comments/Cusdis.tsx

@@ -0,0 +1,41 @@
+import React, { useMemo, useState } from 'react'
+
+import siteMetadata from '@/data/siteMetadata'
+import { PostFrontMatter } from 'types/PostFrontMatter'
+import { ReactCusdis } from 'react-cusdis'
+import { useTheme } from 'next-themes'
+
+interface Props {
+  frontMatter: PostFrontMatter
+}
+
+const Cusdis = ({ frontMatter }: Props) => {
+  const { resolvedTheme } = useTheme()
+  const commentsTheme = useMemo(() => {
+    switch (resolvedTheme) {
+      case 'light':
+      case 'dark':
+        return resolvedTheme
+      default:
+        return 'auto'
+    }
+  }, [resolvedTheme])
+  return (
+    <div className="my-2">
+      <ReactCusdis
+        key={commentsTheme}
+        lang={siteMetadata.language?.toLocaleLowerCase()}
+        attrs={{
+          appId: siteMetadata.comment.cusdisConfig.appId,
+          host: siteMetadata.comment.cusdisConfig.host,
+          pageId: frontMatter.slug,
+          pageUrl: window.location.href,
+          pageTitle: frontMatter.title,
+          theme: commentsTheme,
+        }}
+      />
+    </div>
+  )
+}
+
+export default Cusdis

components/comments/index.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 import siteMetadata from '@/data/siteMetadata'
 import dynamic from 'next/dynamic'
 import { PostFrontMatter } from 'types/PostFrontMatter'
@@ -24,6 +26,12 @@ const DisqusComponent = dynamic(
   },
   { ssr: false }
 )
+const CusdisComponent = dynamic(
+  () => {
+    return import('@/components/comments/Cusdis')
+  },
+  { ssr: false }
+)
 
 const Comments = ({ frontMatter }: Props) => {
   let term
@@ -52,6 +60,9 @@ const Comments = ({ frontMatter }: Props) => {
       {siteMetadata.comment && siteMetadata.comment.provider === 'disqus' && (
         <DisqusComponent frontMatter={frontMatter} />
       )}
+      {siteMetadata.comment && siteMetadata.comment.provider === 'cusdis' && (
+        <CusdisComponent frontMatter={frontMatter} />
+      )}
     </div>
   )
 }