部分公共组件配置化

components/TwikooCommentCounter.js

@@ -1,4 +1,4 @@
-import BLOG from '@/blog.config'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { loadExternalResource } from '@/lib/utils'
 import { useRouter } from 'next/router'
@@ -13,16 +13,37 @@ import { useEffect } from 'react'
 const TwikooCommentCounter = (props) => {
   let commentsData = []
   const { theme } = useGlobal()
+  const router = useRouter()
 
+  useEffect(() => {
+    // console.log('路由触发评论计数')
+    if (props?.posts && props?.posts?.length > 0) {
+      fetchTwikooData(props.posts)
+    }
+  }, [router.events])
+
+  // 监控主题变化时的的评论数
+  useEffect(() => {
+    // console.log('主题触发评论计数', commentsData)
+    updateCommentCount()
+  }, [theme])
+
+  const twikooCDNURL = siteConfig('COMMENT_TWIKOO_CDN_URL')
+  const twikooENVID = siteConfig('COMMENT_TWIKOO_ENV_ID')
+
+  /**
+   * 加载外部twikoojs
+   * @param {*} posts
+   */
   const fetchTwikooData = async (posts) => {
     posts.forEach(post => {
       post.slug = post.slug.startsWith('/') ? post.slug : `/${post.slug}`
     })
     try {
-      await loadExternalResource(BLOG.COMMENT_TWIKOO_CDN_URL, 'js')
+      await loadExternalResource(twikooCDNURL, 'js')
       const twikoo = window.twikoo
       twikoo.getCommentsCount({
-        envId: BLOG.COMMENT_TWIKOO_ENV_ID, // 环境 ID
+        envId: twikooENVID, // 环境 ID
         // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
         urls: posts?.map(post => post.slug), // 不包含协议、域名、参数的文章路径列表，必传参数
         includeReply: true // 评论数是否包括回复，默认：false
@@ -58,20 +79,7 @@ const TwikooCommentCounter = (props) => {
       }
     })
   }
-  const router = useRouter()
 
-  useEffect(() => {
-    // console.log('路由触发评论计数')
-    if (props?.posts && props?.posts?.length > 0) {
-      fetchTwikooData(props.posts)
-    }
-  }, [router.events])
-
-  // 监控主题变化时的的评论数
-  useEffect(() => {
-    // console.log('主题触发评论计数', commentsData)
-    updateCommentCount()
-  }, [theme])
   return null
 }