Merge branch 'main' of https://github.com/tangly1024/NotionNext

blog.config.js

@@ -245,6 +245,13 @@ const BLOG = {
     '251, 243, 140'
   ],
 
+  // 鼠标跟随特效
+  MOUSE_FOLLOW: process.env.NEXT_PUBLIC_MOUSE_FOLLOW || true, // 开关
+  // 这两个只有在鼠标跟随特效开启时才生效
+  // 鼠标类型 1：路劲散点 2：下降散点 3：上升散点 4：边缘向鼠标移动散点 5：跟踪转圈散点 6：路径线条 7：聚集散点 8：聚集网格 9：移动网格 10：上升粒子 11：转圈随机颜色粒子 12：圆锥放射跟随蓝色粒子
+  MOUSE_FOLLOW_EFFECT_TYPE: 11, // 1-12
+  MOUSE_FOLLOW_EFFECT_COLOR: '#ef672a', // 鼠标点击特效颜色 #xxxxxx 或者 rgba(r,g,b,a)
+
   // 樱花飘落特效
   SAKURA: process.env.NEXT_PUBLIC_SAKURA || false, // 开关
   // 漂浮线段特效
@@ -340,7 +347,7 @@ const BLOG = {
     process.env.NEXT_PUBLIC_COMMENT_TWIKOO_COUNT_ENABLE || true, // 博客列表是否显示评论数
   COMMENT_TWIKOO_CDN_URL:
     process.env.NEXT_PUBLIC_COMMENT_TWIKOO_CDN_URL ||
-    'https://cdn.staticfile.org/twikoo/1.6.17/twikoo.min.js', // twikoo客户端cdn
+    'https://cdn.staticfile.net/twikoo/1.6.17/twikoo.min.js', // twikoo客户端cdn
 
   // utterance
   COMMENT_UTTERRANCES_REPO:

components/ExternalPlugins.js

@@ -23,6 +23,9 @@ const ThemeSwitch = dynamic(() => import('@/components/ThemeSwitch'), {
 const Fireworks = dynamic(() => import('@/components/Fireworks'), {
   ssr: false
 })
+const MouseFollow = dynamic(() => import('@/components/MouseFollow'), {
+  ssr: false
+})
 const Nest = dynamic(() => import('@/components/Nest'), { ssr: false })
 const FlutteringRibbon = dynamic(
   () => import('@/components/FlutteringRibbon'),
@@ -119,6 +122,7 @@ const ExternalPlugin = props => {
   const CLARITY_ID = siteConfig('CLARITY_ID')
   const IMG_SHADOW = siteConfig('IMG_SHADOW')
   const ANIMATE_CSS_URL = siteConfig('ANIMATE_CSS_URL')
+  const MOUSE_FOLLOW = siteConfig('MOUSE_FOLLOW')
 
   // 自定义样式css和js引入
   if (isBrowser) {
@@ -172,7 +176,7 @@ const ExternalPlugin = props => {
     <>
       {/* 全局样式嵌入 */}
       <GlobalStyle />
-
+      {MOUSE_FOLLOW && <MouseFollow />}
       {THEME_SWITCH && <ThemeSwitch />}
       {DEBUG && <DebugPanel />}
       {ANALYTICS_ACKEE_TRACKER && <Ackee />}

components/MouseFollow.js

@@ -0,0 +1,27 @@
+import { useEffect } from 'react'
+// import anime from 'animejs'
+import { siteConfig } from '@/lib/config'
+import { loadExternalResource } from '@/lib/utils'
+
+/**
+ * 鼠标跟随特效
+ * @returns
+ */
+const MOUSE_FOLLOW = () => {
+  const type = siteConfig('MOUSE_FOLLOW_EFFECT_TYPE')
+  const color = siteConfig('MOUSE_FOLLOW_EFFECT_COLOR')
+
+  useEffect(() => {
+    loadExternalResource('/js/mouse-follow.js', 'js').then(url => {
+      if (window.createMouseCanvas) {
+        window.createMouseCanvas()({
+          type,
+          color
+        })
+      }
+    })
+  }, [])
+
+  return <></>
+}
+export default MOUSE_FOLLOW