CusDis组件 CDN处理

components/CusdisComponent.js

@@ -2,6 +2,7 @@ import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
+import { loadExternalResource } from '@/lib/utils'
 
 const CusdisComponent = ({ frontMatter }) => {
   const { locale } = useGlobal()
@@ -10,33 +11,21 @@ const CusdisComponent = ({ frontMatter }) => {
 
   //   处理cusdis主题
   useEffect(() => {
-    const cusdisThread = document?.getElementById('cusdis_thread')
-    const cusdisIframe = cusdisThread?.getElementsByTagName('iframe')
-    if (cusdisIframe) {
-      const cusdisWrapper = cusdisIframe[0]?.contentDocument?.getElementById('root')
-      if (isDarkMode) {
-        cusdisWrapper?.classList?.remove('light')
-        cusdisWrapper?.classList?.add('dark')
-      } else {
-        cusdisWrapper?.classList?.remove('dark')
-        cusdisWrapper?.classList?.add('light')
-      }
-      if (!cusdisWrapper?.firstElementChild?.classList?.contains('dark:text-gray-100')) {
-        cusdisWrapper?.firstElementChild?.classList?.add('dark:text-gray-100')
-      }
-    }
-  })
+    loadExternalResource(BLOG.COMMENT_CUSDIS_SCRIPT_SRC, 'js').then(url => {
+      const CUSDIS = window.CUSDIS
+      CUSDIS.initial()
+    })
+  }, [isDarkMode])
 
-  return <div
-    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
-    }}
-  />
+  return <div id="cusdis_thread"
+        lang={locale.LOCALE.toLowerCase()}
+        data-host={BLOG.COMMENT_CUSDIS_HOST}
+        data-app-id={BLOG.COMMENT_CUSDIS_APP_ID}
+        data-page-id={frontMatter.id}
+        data-page-url={BLOG.LINK + router.asPath}
+        data-page-title={frontMatter.title}
+        data-theme={isDarkMode ? 'dark' : 'light'}
+    ></div>
 }
 
 export default CusdisComponent