diff --git a/components/Comment.js b/components/Comment.js
index a1cc1c04..9b47d752 100644
--- a/components/Comment.js
+++ b/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>
   )
diff --git a/components/CommonScript.js b/components/CommonScript.js
index c812f920..ae924fbd 100644
--- a/components/CommonScript.js
+++ b/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,
                     });
                   `
-                }}
-        />
-      </>)}
+              }}
+      />
+    </>)}
   </>)
 }
 
diff --git a/components/Cusdis.js b/components/Cusdis.js
deleted file mode 100644
index 5ff88319..00000000
--- a/components/Cusdis.js
+++ /dev/null
@@ -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
diff --git a/components/Tabs.js b/components/Tabs.js
index 66012477..8df76cae 100644
--- a/components/Tabs.js
+++ b/components/Tabs.js
@@ -41,12 +41,14 @@ const Tabs = ({ children }) => {
         </li>
       })}
     </ul>
-    {children.map((item, index) => {
-      return <section key={index}
-                      className={`${currentTab === index ? 'block animate__animated animate__fadeIn animate__faster' : 'hidden'}`}>
-        {item}
-      </section>
-    })}
+    <div>
+      {children.map((item, index) => {
+        return <section key={index}
+                        className={`${currentTab === index ? 'block animate__animated animate__fadeIn animate__faster' : 'hidden'}`}>
+          {item}
+        </section>
+      })}
+    </div>
   </div>
 }
 
diff --git a/lib/utils.js b/lib/utils.js
new file mode 100644
index 00000000..d3687ab9
--- /dev/null
+++ b/lib/utils.js
@@ -0,0 +1,27 @@
+// 封装异步加载资源的方法
+
+/**
+ * 加载外部资源
+ * @param url 地址 例如 https://xx.com/xx.js
+ * @param type js 或 css
+ * @returns {Promise<unknown>}
+ */
+export function loadExternalResource (url, type) {
+  return new Promise((resolve, reject) => {
+    let tag
+
+    if (type === 'css') {
+      tag = document.createElement('link')
+      tag.rel = 'stylesheet'
+      tag.href = url
+    } else if (type === 'js') {
+      tag = document.createElement('script')
+      tag.src = url
+    }
+    if (tag) {
+      tag.onload = () => resolve(url)
+      tag.onerror = () => reject(url)
+      document.head.appendChild(tag)
+    }
+  })
+}
diff --git a/package.json b/package.json
index 4e3a6dd3..172ff577 100644
--- a/package.json
+++ b/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",
diff --git a/themes/NEXT/components/Live2D.js b/themes/NEXT/components/Live2D.js
index 5ad27c93..c9ce2a1b 100644
--- a/themes/NEXT/components/Live2D.js
+++ b/themes/NEXT/components/Live2D.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-undef */
 import CONFIG_NEXT from '../config_next'
+import { loadExternalResource } from '@/lib/utils'
 
 let hasLoad = false
 export default function Live2D () {
@@ -29,24 +30,3 @@ function initLive2D () {
     })
   }
 }
-
-// 封装异步加载资源的方法
-function loadExternalResource (url, type) {
-  return new Promise((resolve, reject) => {
-    let tag
-
-    if (type === 'css') {
-      tag = document.createElement('link')
-      tag.rel = 'stylesheet'
-      tag.href = url
-    } else if (type === 'js') {
-      tag = document.createElement('script')
-      tag.src = url
-    }
-    if (tag) {
-      tag.onload = () => resolve(url)
-      tag.onerror = () => reject(url)
-      document.head.appendChild(tag)
-    }
-  })
-}
diff --git a/themes/NEXT/components/Live2DWaifu.js b/themes/NEXT/components/Live2DWaifu.js
index e79029ad..060eee4e 100644
--- a/themes/NEXT/components/Live2DWaifu.js
+++ b/themes/NEXT/components/Live2DWaifu.js
@@ -1,5 +1,6 @@
 import Head from 'next/head'
 import { useEffect } from 'react'
+import { loadExternalResource } from '@/lib/utils'
 
 export default function Live2DWife () {
   useEffect(() => {
@@ -17,27 +18,6 @@ function initLive2DWife () {
   const live2dPath = 'https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/'
   // const live2d_path = "/live2d-widget/";
 
-  // 封装异步加载资源的方法
-  function loadExternalResource (url, type) {
-    return new Promise((resolve, reject) => {
-      let tag
-
-      if (type === 'css') {
-        tag = document.createElement('link')
-        tag.rel = 'stylesheet'
-        tag.href = url
-      } else if (type === 'js') {
-        tag = document.createElement('script')
-        tag.src = url
-      }
-      if (tag) {
-        tag.onload = () => resolve(url)
-        tag.onerror = () => reject(url)
-        document.head.appendChild(tag)
-      }
-    })
-  }
-
   // 加载 waifu.css live2d.min.js waifu-tips.js
   if (screen.width >= 768) {
     Promise.all([