Merge pull request #1383 from tangly1024/build/fix

v4.0.9

.env.local

@@ -1,2 +1,2 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.0.8
+NEXT_PUBLIC_VERSION=4.0.9

blog.config.js

@@ -119,6 +119,8 @@ const BLOG = {
 
   // Mermaid 图表CDN
   MERMAID_CDN: process.env.NEXT_PUBLIC_MERMAID_CDN || 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.2.4/mermaid.min.js', // CDN
+  // QRCodeCDN
+  QR_CODE_CDN: process.env.NEXT_PUBLIC_QR_CODE_CDN || 'https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js',
 
   BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
   BACKGROUND_DARK: '#000000', // use hex value, don't forget '#'
@@ -307,12 +309,10 @@ const BLOG = {
   ANALYTICS_CNZZ_ID: process.env.NEXT_PUBLIC_ANALYTICS_CNZZ_ID || '', // 只需要填写站长统计的id, [cnzz_id] -> https://s9.cnzz.com/z_stat.php?id=[cnzz_id]&web_id=[cnzz_id]
   ANALYTICS_GOOGLE_ID: process.env.NEXT_PUBLIC_ANALYTICS_GOOGLE_ID || '', // 谷歌Analytics的id e.g: G-XXXXXXXXXX
 
-  ANALYTICS_ACKEE_TRACKER:
-        process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER || '', // e.g 'https://ackee.tangly1024.net/tracker.js'
-  ANALYTICS_ACKEE_DATA_SERVER:
-        process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER || '', // e.g https://ackee.tangly1024.net , don't end with a slash
-  ANALYTICS_ACKEE_DOMAIN_ID:
-        process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID || '', // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b'
+  // ACKEE网站访客统计工具
+  ANALYTICS_ACKEE_TRACKER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER || '', // e.g 'https://ackee.tangly1024.com/tracker.js'
+  ANALYTICS_ACKEE_DATA_SERVER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER || '', // e.g https://ackee.tangly1024.com , don't end with a slash
+  ANALYTICS_ACKEE_DOMAIN_ID: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID || '', // e.g '82e51db6-dec2-423a-b7c9-b4ff7ebb3302'
 
   SEO_GOOGLE_SITE_VERIFICATION:
         process.env.NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code

components/Ackee.js

@@ -1,21 +1,83 @@
-import { useRouter } from 'next/router'
-import useAckee from 'use-ackee'
-import BLOG from '@/blog.config'
+'use strict'
 
+import { useEffect } from 'react'
+import BLOG from '@/blog.config'
+import { loadExternalResource } from '@/lib/utils'
+import { useRouter } from 'next/router'
 const Ackee = () => {
   const router = useRouter()
-  useAckee(
-    router.asPath,
-    {
-      server: BLOG.ANALYTICS_ACKEE_DATA_SERVER,
-      domainId: BLOG.ANALYTICS_ACKEE_DOMAIN_ID
-    },
-    {
-      detailed: false,
-      ignoreLocalhost: true
-    }
-  )
+
+  // handleAckee 函数
+  const handleAckeeCallback = () => {
+    handleAckee(
+      router.asPath,
+      {
+        server: BLOG.ANALYTICS_ACKEE_DATA_SERVER,
+        domainId: BLOG.ANALYTICS_ACKEE_DOMAIN_ID
+      },
+      {
+        /*
+         * Enable or disable tracking of personal data.
+         * We recommend to ask the user for permission before turning this option on.
+         */
+        detailed: true,
+        /*
+        * Enable or disable tracking when on localhost.
+        */
+        ignoreLocalhost: false,
+        /*
+        * Enable or disable the tracking of your own visits.
+        * This is enabled by default, but should be turned off when using a wildcard Access-Control-Allow-Origin header.
+        * Some browsers strictly block third-party cookies. The option won't have an impact when this is the case.
+        */
+        ignoreOwnVisits: false
+      }
+    )
+  }
+
+  // 或者使用其他依赖数组，根据需要执行 handleAckee
+  useEffect(() => {
+    handleAckeeCallback()
+  }, [router])
+
   return null
 }
 
 export default Ackee
+
+/**
+ * Function to use Ackee.
+ * Creates an instance once and a new record every time the pathname changes.
+ * Safely no-ops during server-side rendering.
+ * @param {?String} pathname - Current path.
+ * @param {Object} environment - Object containing the URL of the Ackee server and the domain id.
+ * @param {?Object} options - Ackee options.
+ */
+const handleAckee = async function(pathname, environment, options = {}) {
+  await loadExternalResource(BLOG.ANALYTICS_ACKEE_TRACKER, 'js')
+  const ackeeTracker = window.ackeeTracker
+
+  const instance = ackeeTracker.create(environment.server, options)
+
+  if (instance == null) {
+    console.warn('Skipped record creation because useAckee has been called in a non-browser environment')
+    return
+  }
+
+  const hasPathname = (
+    pathname != null && pathname !== ''
+  )
+
+  if (hasPathname === false) {
+    console.warn('Skipped record creation because useAckee has been called without pathname')
+    return
+  }
+
+  const attributes = ackeeTracker.attributes(options.detailed)
+  const url = new URL(pathname, location)
+
+  return instance.record(environment.domainId, {
+    ...attributes,
+    siteLocation: url.href
+  }).stop
+}

components/Comment.js

@@ -62,7 +62,7 @@ const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
 const Comment = ({ frontMatter, className }) => {
   const router = useRouter()
 
-  if (isBrowser() && ('giscus' in router.query || router.query.target === 'comment')) {
+  if (isBrowser && ('giscus' in router.query || router.query.target === 'comment')) {
     setTimeout(() => {
       const url = router.asPath.replace('?target=comment', '')
       history.replaceState({}, '', url)

components/CommonScript.js

@@ -56,12 +56,12 @@ const CommonScript = () => {
 
     {/* 代码统计 */}
     {/* ackee统计脚本 */}
-    {BLOG.ANALYTICS_ACKEE_TRACKER && (
+    {/* {BLOG.ANALYTICS_ACKEE_TRACKER && (
       <script async src={BLOG.ANALYTICS_ACKEE_TRACKER}
               data-ackee-server={BLOG.ANALYTICS_ACKEE_DATA_SERVER}
               data-ackee-domain-id={BLOG.ANALYTICS_ACKEE_DOMAIN_ID}
       />
-    )}
+    )} */}
 
     {/* 百度统计 */}
     {BLOG.ANALYTICS_BAIDU_ID && (

components/CusdisComponent.js

@@ -1,8 +1,8 @@
 import { useGlobal } from '@/lib/global'
-import { ReactCusdis } from 'react-cusdis'
 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()
@@ -11,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 <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
-    }}
-  />
+  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

components/ExternalScript.js

@@ -8,7 +8,7 @@ import { isBrowser, loadExternalResource } from '@/lib/utils'
  * @returns
  */
 const ExternalScript = () => {
-  if (isBrowser()) {
+  if (isBrowser) {
     // 静态导入本地自定义样式
     loadExternalResource('/css/custom.css', 'css')
     loadExternalResource('/js/custom.js', 'js')