Merge pull request #276 from tangly1024/feat_comment_valine

调整封装评论插件

components/Comment.js

@@ -1,10 +1,21 @@
 import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
-import { useRouter } from 'next/router'
 import Tabs from '@/components/Tabs'
-import { ReactCusdis } from 'react-cusdis'
 import { useGlobal } from '@/lib/global'
-import { WalineComponent } from './WalineComponent'
+
+const WalineComponent = dynamic(
+  () => {
+    return import('@/components/WalineComponent')
+  },
+  { ssr: false }
+)
+
+const CusdisComponent = dynamic(
+  () => {
+    return import('@/components/CusdisComponent')
+  },
+  { ssr: false }
+)
 
 const GitalkComponent = dynamic(
   () => {
@@ -33,9 +44,7 @@ const Comment = ({ frontMatter }) => {
   if (!frontMatter) {
     return <>Loading...</>
   }
-  const router = useRouter()
+  const { isDarkMode } = useGlobal()
-  const { locale, isDarkMode } = useGlobal()
-  // const theme = isDarkMode ? 'dark' : 'light'
 
   return (
     <div id='comment' className='comment mt-5 text-gray-800 dark:text-gray-300'>
@@ -56,16 +65,7 @@ const Comment = ({ frontMatter }) => {
         )}
 
         {BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
-          <ReactCusdis
+          <CusdisComponent frontMatter={frontMatter}/>
-            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'>
@@ -73,18 +73,7 @@ const Comment = ({ frontMatter }) => {
         </div>)}
 
         {BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
-          <GitalkComponent
+          <GitalkComponent frontMatter={frontMatter}/>
-            options={{
-              id: frontMatter.id,
-              title: frontMatter.title,
-              clientID: BLOG.COMMENT_GITALK_CLIENT_ID,
-              clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET,
-              repo: BLOG.COMMENT_GITALK_REPO,
-              owner: BLOG.COMMENT_GITALK_OWNER,
-              admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
-              distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE)
-            }}
-          />
         </div>)}
       </Tabs>
     </div>

components/CusdisComponent.js

@@ -0,0 +1,22 @@
+import { useGlobal } from '@/lib/global'
+import { ReactCusdis } from 'react-cusdis'
+import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+
+const CusdisComponent = ({ frontMatter }) => {
+  const { locale } = useGlobal()
+  const router = useRouter()
+
+  return <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
+    }}
+  />
+}
+
+export default CusdisComponent

components/Gitalk.js

@@ -1,9 +1,18 @@
 import 'gitalk/dist/gitalk.css'
-
+import BLOG from '@/blog.config'
 import GitalkComponent from 'gitalk/dist/gitalk-component'
 
-const Gitalk = props => {
+const Gitalk = ({ frontMatter }) => {
-  return <GitalkComponent {...props} />
+  return <GitalkComponent options={{
+    id: frontMatter.id,
+    title: frontMatter.title,
+    clientID: BLOG.COMMENT_GITALK_CLIENT_ID,
+    clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET,
+    repo: BLOG.COMMENT_GITALK_REPO,
+    owner: BLOG.COMMENT_GITALK_OWNER,
+    admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
+    distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE)
+  }} />
 }
 
 export default Gitalk

components/WalineComponent.js

@@ -8,7 +8,7 @@ import { useRouter } from 'next/router'
  * @param {*} props
  * @returns
  */
-export const WalineComponent = (props) => {
+const WalineComponent = (props) => {
   const walineInstanceRef = React.useRef(null)
   const containerRef = React.createRef()
   const router = useRouter()
@@ -32,3 +32,5 @@ export const WalineComponent = (props) => {
 
   return <div ref={containerRef} />
 }
+
+export default WalineComponent