引入React-cusdis

components/Comment.js

@@ -3,6 +3,8 @@ import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import 'gitalk/dist/gitalk.css'
 import Tabs from '@/components/Tabs'
+import { ReactCusdis } from 'react-cusdis'
+import { useGlobal } from '@/lib/global'
 
 const GitalkComponent = dynamic(
   () => {
@@ -16,26 +18,29 @@ const UtterancesComponent = dynamic(
   },
   { ssr: false }
 )
-const CusdisComponent = dynamic(
-  () => {
-    return import('@/components/Cusdis')
-  },
-  { ssr: false }
-)
 
 const Comment = ({ frontMatter }) => {
   const router = useRouter()
+  const { locale } = useGlobal()
   return (
     <div className='comment mt-5 px-5 text-gray-800 dark:text-gray-300'>
       <Tabs>
         {BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
-          <CusdisComponent id={frontMatter.id} url={BLOG.LINK + router.asPath} title={frontMatter.title} />
+          <ReactCusdis
+            lang={locale.LOCALE.toLowerCase()}
+            attrs={{
+              host: BLOG.COMMENT_CUSDIS_HOST,
+              appId: BLOG.COMMENT_CUSDIS_APP_ID,
+              pageId: frontMatter.id,
+              pageTitle: frontMatter.title,
+              pageUrl: BLOG.LINK + router.asPath
+            }}
+          />
         </div>)}
 
         {BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
           <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
-        </div>
-        )}
+        </div>)}
 
         {BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
           <GitalkComponent
@@ -51,7 +56,6 @@ const Comment = ({ frontMatter }) => {
             }}
           />
         </div>)}
-
       </Tabs>
     </div>
   )

components/CommonScript.js

@@ -85,12 +85,12 @@ const CommonScript = () => {
 
     {/* 谷歌统计 */}
     {BLOG.ANALYTICS_GOOGLE_ID && (<>
-        <script async
-                src={`https://www.googletagmanager.com/gtag/js?id=${BLOG.ANALYTICS_GOOGLE_ID}`}
-        />
-        <script async
-                dangerouslySetInnerHTML={{
-                  __html: `
+      <script async
+              src={`https://www.googletagmanager.com/gtag/js?id=${BLOG.ANALYTICS_GOOGLE_ID}`}
+      />
+      <script async
+              dangerouslySetInnerHTML={{
+                __html: `
                     window.dataLayer = window.dataLayer || [];
                     function gtag(){dataLayer.push(arguments);}
                     gtag('js', new Date());
@@ -98,9 +98,9 @@ const CommonScript = () => {
                       page_path: window.location.pathname,
                     });
                   `
-                }}
-        />
-      </>)}
+              }}
+      />
+    </>)}
   </>)
 }
 

components/Cusdis.js

@@ -1,30 +0,0 @@
-import BLOG from '@/blog.config'
-import { useEffect } from 'react'
-const Cusdis = ({ id, url, title }) => {
-  useEffect(() => {
-    const script = document.createElement('script')
-    const anchor = document.getElementById('comments-cusdis')
-    script.setAttribute(
-      'src',
-      BLOG.COMMENT_CUSDIS_SCRIPT_SRC
-    )
-    script.setAttribute('async', true)
-    script.setAttribute('defer', true)
-    anchor.appendChild(script)
-  })
-  return (
-    <div id="comments-cusdis">
-      <div
-        id="cusdis_thread"
-        data-host={BLOG.COMMENT_CUSDIS_HOST}
-        data-app-id={BLOG.COMMENT_CUSDIS_APP_ID}
-        data-page-id={id}
-        data-page-url={url}
-        data-page-title={title}
-        lang={BLOG.LANG.toLowerCase()}
-      />
-    </div>
-  )
-}
-
-export default Cusdis

package.json

@@ -39,6 +39,7 @@
     "qrcode.react": "^1.0.1",
     "react": "17.0.2",
     "react-cookies": "^0.1.1",
+    "react-cusdis": "^2.1.3",
     "react-dom": "17.0.2",
     "react-notion-x": "4.14.2",
     "smoothscroll-polyfill": "^0.4.4",