async

components/DebugPanel.js

@@ -8,7 +8,7 @@ import { useGlobal } from '@/lib/global'
  *
  * @returns 调试面板
  */
-export function DebugPanel() {
+const DebugPanel = () => {
   const [show, setShow] = useState(false)
   const { theme, changeTheme, switchTheme, locale } = useGlobal()
   const [siteConfig, updateSiteConfig] = useState({})
@@ -128,3 +128,4 @@ export function DebugPanel() {
         </>
   )
 }
+export default DebugPanel

components/ExternalPlugins.js

@@ -0,0 +1,58 @@
+import BLOG from 'blog.config'
+import dynamic from 'next/dynamic'
+
+// import TwikooCommentCounter from '@/components/TwikooCommentCounter'
+// import { DebugPanel } from '@/components/DebugPanel'
+// import { ThemeSwitch } from '@/components/ThemeSwitch'
+// import { Fireworks } from '@/components/Fireworks'
+// import { Nest } from '@/components/Nest'
+// import { FlutteringRibbon } from '@/components/FlutteringRibbon'
+// import { Ribbon } from '@/components/Ribbon'
+// import { Sakura } from '@/components/Sakura'
+// import { StarrySky } from '@/components/StarrySky'
+// import { Analytics } from '@vercel/analytics/react'
+
+const TwikooCommentCounter = dynamic(() => import('@/components/TwikooCommentCounter'), { ssr: false })
+const DebugPanel = dynamic(() => import('@/components/DebugPanel'), { ssr: false })
+const ThemeSwitch = dynamic(() => import('@/components/ThemeSwitch'), { ssr: false })
+const Fireworks = dynamic(() => import('@/components/Fireworks'), { ssr: false })
+const Nest = dynamic(() => import('@/components/Nest'), { ssr: false })
+const FlutteringRibbon = dynamic(() => import('@/components/FlutteringRibbon'), { ssr: false })
+const Ribbon = dynamic(() => import('@/components/Ribbon'), { ssr: false })
+const Sakura = dynamic(() => import('@/components/Sakura'), { ssr: false })
+const StarrySky = dynamic(() => import('@/components/StarrySky'), { ssr: false })
+const Analytics = dynamic(() => import('@vercel/analytics/react').then(async (m) => { return m.Analytics }), { ssr: false })
+const MusicPlayer = dynamic(() => import('@/components/Player'), { ssr: false })
+const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
+const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
+const Busuanzi = dynamic(() => import('@/components/Busuanzi'), { ssr: false })
+const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { ssr: false })
+const Messenger = dynamic(() => import('@/components/FacebookMessenger'), { ssr: false })
+
+/**
+ * 各种第三方组件
+ * @param {*} props
+ * @returns
+ */
+const ExternalPlugin = (props) => {
+  return <>
+          {JSON.parse(BLOG.THEME_SWITCH) && <ThemeSwitch />}
+          {JSON.parse(BLOG.DEBUG) && <DebugPanel />}
+          {BLOG.ANALYTICS_ACKEE_TRACKER && <Ackee />}
+          {BLOG.ANALYTICS_GOOGLE_ID && <Gtag />}
+          {BLOG.ANALYTICS_VERCEL && <Analytics />}
+          {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <Busuanzi />}
+          {BLOG.ADSENSE_GOOGLE_ID && <GoogleAdsense />}
+          {BLOG.FACEBOOK_APP_ID && BLOG.FACEBOOK_PAGE_ID && <Messenger />}
+          {JSON.parse(BLOG.FIREWORKS) && <Fireworks />}
+          {JSON.parse(BLOG.SAKURA) && <Sakura />}
+          {JSON.parse(BLOG.STARRY_SKY) && <StarrySky />}
+          {JSON.parse(BLOG.MUSIC_PLAYER) && <MusicPlayer />}
+          {JSON.parse(BLOG.NEST) && <Nest />}
+          {JSON.parse(BLOG.FLUTTERINGRIBBON) && <FlutteringRibbon />}
+          {JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE) && <TwikooCommentCounter {...props}/>}
+          {JSON.parse(BLOG.RIBBON) && <Ribbon />}
+      </>
+}
+
+export default ExternalPlugin

components/Fireworks.js

@@ -2,16 +2,17 @@
  * https://codepen.io/juliangarnier/pen/gmOwJX
  * custom by hexo-theme-yun @YunYouJun
  */
-import React from 'react'
+import { useEffect } from 'react'
 import anime from 'animejs'
 import BLOG from 'blog.config'
 
-export const Fireworks = () => {
-  React.useEffect(() => {
+const Fireworks = () => {
+  useEffect(() => {
     createFireworks({})
   }, [])
   return <canvas id='fireworks' className='fireworks'></canvas>
 }
+export default Fireworks
 
 /**
    * 创建烟花

components/FlutteringRibbon.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import React from 'react'
+import { useEffect } from 'react'
 const  id = 'canvasFlutteringRibbon'
 export const FlutteringRibbon = () => {
      const destroyRibbon = ()=>{
@@ -9,15 +9,17 @@ export const FlutteringRibbon = () => {
       }
   }
   
-  React.useEffect(() => {
+  useEffect(() => {
     createFlutteringRibbon()
         return () => destroyRibbon()
 
   }, [])
     return <></>
-
 }
 
+export default FlutteringRibbon
+
+
 /**
  * 创建连接点
  * @param config

components/MusicPlayer.js

@@ -1,7 +0,0 @@
-import dynamic from 'next/dynamic'
-
-const MusicPlayer = dynamic(
-  () => import('@/components/Player'),
-  { ssr: false }
-)
-export default MusicPlayer

components/Nest.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import { useEffect } from 'react'
 const id = 'canvasNestCreated'
-export const Nest = () => {
+const Nest = () => {
   const destroyNest = ()=>{
       const nest = document.getElementById(id)
       if(nest && nest.parentNode){
@@ -16,6 +16,8 @@ export const Nest = () => {
   return <></>
 }
 
+export default Nest
+
 /**
  * 创建连接点
  * @param config

components/Ribbon.js

@@ -2,7 +2,7 @@
 import { useEffect } from 'react'
 const id = 'canvasRibbon'
 
-export const Ribbon = () => {
+const Ribbon = () => {
  const destroyRibbon = ()=>{
     const ribbon = document.getElementById(id)
       if(ribbon && ribbon.parentNode){
@@ -17,6 +17,8 @@ export const Ribbon = () => {
   return <></>
 }
 
+export default Ribbon
+
 /**
  * 创建连接点
  * @param config

components/Sakura.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import { useEffect } from 'react'
 const id = 'canvas_sakura'
-export const Sakura = () => {
+const Sakura = () => {
   const destroySakura = ()=>{
     const sakura = document.getElementById(id)
     if(sakura && sakura.parentNode){
@@ -16,6 +16,8 @@ export const Sakura = () => {
   return <></>
 }
 
+export default Sakura
+
 /**
  * 创建樱花雨
  * @param config

components/StarrySky.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import React from 'react'
 
-export const StarrySky = () => {
+const StarrySky = () => {
   React.useEffect(() => {
     dark()
   }, [])
@@ -12,6 +12,7 @@ export const StarrySky = () => {
   )
 }
 
+export default StarrySky
 /**
  * 创建星空雨
  * @param config

components/ThemeSwitch.js

@@ -6,7 +6,7 @@ import { Draggable } from './Draggable'
  *
  * @returns 主题切换
  */
-export function ThemeSwitch() {
+const ThemeSwitch = () => {
   const { theme, changeTheme } = useGlobal()
 
   const onSelectChange = (e) => {
@@ -30,3 +30,5 @@ export function ThemeSwitch() {
     </>
   )
 }
+
+export default ThemeSwitch