feature: 调整Hexo 页面

components/Comment.js

@@ -1,7 +1,6 @@
 import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
-import { useGlobal } from '@/lib/global'
 import 'gitalk/dist/gitalk.css'
 import Tabs from '@/components/Tabs'
 
@@ -19,30 +18,25 @@ const UtterancesComponent = dynamic(
 )
 const CusdisComponent = dynamic(
   () => {
-    return import('react-cusdis').then(m => m.ReactCusdis)
+    return import('@/components/Cusdis')
   },
   { ssr: false }
 )
 
 const Comment = ({ frontMatter }) => {
   const router = useRouter()
-  const { theme } = useGlobal()
   return (
-    <div className='comment mt-5 px-10 text-gray-800 dark:text-gray-300'>
+    <div className='comment mt-5 px-5 text-gray-800 dark:text-gray-300'>
       <Tabs>
         {BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
-          <CusdisComponent
-            attrs={{
-              host: BLOG.COMMENT_CUSDIS_HOST,
-              appId: BLOG.COMMENT_CUSDIS_APP_ID,
-              pageId: frontMatter.id,
-              pageTitle: frontMatter.title,
-              pageUrl: BLOG.LINK + router.asPath,
-              theme: theme
-            }}
-            lang={BLOG.LANG.toLowerCase()}
-          />
+          <CusdisComponent id={frontMatter.id} url={BLOG.LINK + router.asPath} title={frontMatter.title} />
         </div>)}
+
+        {BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
+          <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
+        </div>
+        )}
+
         {BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
           <GitalkComponent
             options={{
@@ -57,10 +51,7 @@ const Comment = ({ frontMatter }) => {
             }}
           />
         </div>)}
-        {BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
-            <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
-          </div>
-        )}
+
       </Tabs>
     </div>
   )

components/Cusdis.js

@@ -3,7 +3,7 @@ import { useEffect } from 'react'
 const Cusdis = ({ id, url, title }) => {
   useEffect(() => {
     const script = document.createElement('script')
-    const anchor = document.getElementById('comments')
+    const anchor = document.getElementById('comments-cusdis')
     script.setAttribute(
       'src',
       BLOG.COMMENT_CUSDIS_SCRIPT_SRC
@@ -11,12 +11,9 @@ const Cusdis = ({ id, url, title }) => {
     script.setAttribute('async', true)
     script.setAttribute('defer', true)
     anchor.appendChild(script)
-    return () => {
-      anchor.innerHTML = ''
-    }
   })
   return (
-    <div id="comments">
+    <div id="comments-cusdis">
       <div
         id="cusdis_thread"
         data-host={BLOG.COMMENT_CUSDIS_HOST}
@@ -24,6 +21,7 @@ const Cusdis = ({ id, url, title }) => {
         data-page-id={id}
         data-page-url={url}
         data-page-title={title}
+        lang={BLOG.LANG.toLowerCase()}
       />
     </div>
   )

components/Utterances.js

@@ -29,8 +29,7 @@ const Utterances = ({ issueTerm, layout }) => {
       anchor.innerHTML = ''
     }
   })
-  return <div id="comments" >
-    <div className="utterances-frame h-auto w-auto"/>
+  return <div id="comments" className='utterances' >
   </div>
 }