Merge pull request #2280 from tangly1024/release/4.4.3

Release/4.4.3

.env.local

@@ -1,5 +1,5 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.4.2
+NEXT_PUBLIC_VERSION=4.4.3
 
 
 # 可在此添加环境变量，去掉最左边的（# ）注释即可

components/AOSAnimation.js

@@ -1,12 +1,30 @@
-import AOS from 'aos'
-import { isBrowser } from 'react-notion-x'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
+// import AOS from 'aos'
 
 /**
  * 加载滚动动画
+ * 改从外部CDN读取
  * https://michalsnik.github.io/aos/
  */
 export default function AOSAnimation() {
-  if (isBrowser) {
-    AOS.init()
+  const initAOS = async () => {
+    Promise.all([
+      loadExternalResource(
+        'https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js',
+        'js'
+      ),
+      loadExternalResource(
+        'https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css',
+        'css'
+      )
+    ]).then(() => {
+      if (window.AOS) {
+        window.AOS.init()
+      }
+    })
   }
+  useEffect(() => {
+    initAOS()
+  }, [])
 }

components/Fireworks.js

@@ -3,8 +3,9 @@
  * custom by hexo-theme-yun @YunYouJun
  */
 import { useEffect } from 'react'
-import anime from 'animejs'
+// import anime from 'animejs'
 import { siteConfig } from '@/lib/config'
+import { loadExternalResource } from '@/lib/utils'
 
 /**
  * 鼠标点击烟花特效
@@ -14,17 +15,37 @@ const Fireworks = () => {
   const fireworksColor = siteConfig('FIREWORKS_COLOR')
 
   useEffect(() => {
-    createFireworks({ colors: fireworksColor })
+    // 异步加载
+    async function loadFireworks() {
+      loadExternalResource(
+        'https://cdn.bootcdn.net/ajax/libs/animejs/3.2.1/anime.min.js',
+        'js'
+      ).then(() => {
+        if (window.anime) {
+          createFireworks({
+            config: { colors: fireworksColor },
+            anime: window.anime
+          })
+        }
+      })
+    }
+
+    loadFireworks()
+
+    return () => {
+      // 在组件卸载时清理资源（如果需要）
+    }
   }, [])
+
   return <canvas id='fireworks' className='fireworks'></canvas>
 }
 export default Fireworks
 
 /**
-   * 创建烟花
-   * @param config
-   */
-function createFireworks(config) {
+ * 创建烟花
+ * @param config
+ */
+function createFireworks({ config, anime }) {
   const defaultConfig = {
     colors: config?.colors,
     numberOfParticules: 20,
@@ -57,8 +78,8 @@ function createFireworks(config) {
   const ctx = canvasEl.getContext('2d')
 
   /**
-     * 设置画布尺寸
-     */
+   * 设置画布尺寸
+   */
   function setCanvasSize(canvasEl) {
     canvasEl.width = window.innerWidth
     canvasEl.height = window.innerHeight
@@ -67,16 +88,16 @@ function createFireworks(config) {
   }
 
   /**
-     * update pointer
-     * @param {TouchEvent} e
-     */
+   * update pointer
+   * @param {TouchEvent} e
+   */
   function updateCoords(e) {
     pointerX =
-        e.clientX ||
-        (e.touches[0] ? e.touches[0].clientX : e.changedTouches[0].clientX)
+      e.clientX ||
+      (e.touches[0] ? e.touches[0].clientX : e.changedTouches[0].clientX)
     pointerY =
-        e.clientY ||
-        (e.touches[0] ? e.touches[0].clientY : e.changedTouches[0].clientY)
+      e.clientY ||
+      (e.touches[0] ? e.touches[0].clientY : e.changedTouches[0].clientY)
   }
 
   function setParticuleDirection(p) {
@@ -93,26 +114,25 @@ function createFireworks(config) {
   }
 
   /**
-     * 在指定位置创建粒子
-     * @param {number} x
-     * @param {number} y
-     * @returns
-     */
+   * 在指定位置创建粒子
+   * @param {number} x
+   * @param {number} y
+   * @returns
+   */
   function createParticule(x, y) {
     const p = {
       x,
       y,
-      color: `rgba(${
-          colors[anime.random(0, colors.length - 1)]
-        },${
-          anime.random(0.2, 0.8)
-        })`,
+      color: `rgba(${colors[anime.random(0, colors.length - 1)]},${anime.random(
+        0.2,
+        0.8
+      )})`,
       radius: anime.random(config.circleRadius.min, config.circleRadius.max),
       endPos: null,
       draw() {}
     }
     p.endPos = setParticuleDirection(p)
-    p.draw = function() {
+    p.draw = function () {
       ctx.beginPath()
       ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
       ctx.fillStyle = p.color
@@ -131,7 +151,7 @@ function createFireworks(config) {
       lineWidth: 6,
       draw() {}
     }
-    p.draw = function() {
+    p.draw = function () {
       ctx.globalAlpha = p.alpha
       ctx.beginPath()
       ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
@@ -144,13 +164,17 @@ function createFireworks(config) {
   }
 
   function renderParticule(anim) {
-    for (let i = 0; i < anim.animatables.length; i++) { anim.animatables[i].target.draw() }
+    for (let i = 0; i < anim.animatables.length; i++) {
+      anim.animatables[i].target.draw()
+    }
   }
 
   function animateParticules(x, y) {
     const circle = createCircle(x, y)
     const particules = []
-    for (let i = 0; i < config.numberOfParticules; i++) { particules.push(createParticule(x, y)) }
+    for (let i = 0; i < config.numberOfParticules; i++) {
+      particules.push(createParticule(x, y))
+    }
 
     anime
       .timeline()
@@ -197,7 +221,7 @@ function createFireworks(config) {
 
   document.addEventListener(
     'mousedown',
-    (e) => {
+    e => {
       render.play()
       updateCoords(e)
       animateParticules(pointerX, pointerY)

components/Giscus.js

@@ -1,6 +1,8 @@
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
-import Giscus from '@giscus/react'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
+// import Giscus from '@giscus/react'
 
 /**
  * Giscus评论 @see https://giscus.app/zh-CN
@@ -12,21 +14,34 @@ import Giscus from '@giscus/react'
 const GiscusComponent = () => {
   const { isDarkMode } = useGlobal()
   const theme = isDarkMode ? 'dark' : 'light'
+  useEffect(() => {
+    loadExternalResource('/js/giscus.js', 'js').then(() => {
+      if (window.Giscus) {
+        window.Giscus.init('#giscus')
+      }
+    })
+    return () => {
+      window.Giscus.destroy()
+    }
+  }, [isDarkMode])
 
   return (
-    <Giscus
-      repo={siteConfig('COMMENT_GISCUS_REPO')}
-      repoId={siteConfig('COMMENT_GISCUS_REPO_ID')}
-      categoryId={siteConfig('COMMENT_GISCUS_CATEGORY_ID')}
-      mapping={siteConfig('COMMENT_GISCUS_MAPPING')}
-      reactionsEnabled={siteConfig('COMMENT_GISCUS_REACTIONS_ENABLED')}
-      emitMetadata={siteConfig('COMMENT_GISCUS_EMIT_METADATA')}
-      theme={theme}
-      inputPosition={siteConfig('COMMENT_GISCUS_INPUT_POSITION')}
-      lang={siteConfig('COMMENT_GISCUS_LANG')}
-      loading={siteConfig('COMMENT_GISCUS_LOADING')}
-      crossorigin={siteConfig('COMMENT_GISCUS_CROSSORIGIN')}
-    />
+    <div
+      id='giscus'
+      data-repo={siteConfig('COMMENT_GISCUS_REPO')}
+      data-repo-id={siteConfig('COMMENT_GISCUS_REPO_ID')}
+      //   data-category='{{ $.Site.Params.giscus.dataCategory }}'
+      data-category-id={siteConfig('COMMENT_GISCUS_CATEGORY_ID')}
+      data-mapping={siteConfig('COMMENT_GISCUS_MAPPING')}
+      //   data-strict='0'
+      data-reactions-enabled={siteConfig('COMMENT_GISCUS_REACTIONS_ENABLED')}
+      data-emit-metadata={siteConfig('COMMENT_GISCUS_EMIT_METADATA')}
+      data-input-position={siteConfig('COMMENT_GISCUS_INPUT_POSITION')}
+      data-theme={theme}
+      data-lang={siteConfig('COMMENT_GISCUS_LANG')}
+      data-loading={siteConfig('COMMENT_GISCUS_LOADING')}
+      //   crossorigin={siteConfig('COMMENT_GISCUS_CROSSORIGIN')}
+    ></div>
   )
 }
 

components/LoadingProgress.js

@@ -1,20 +1,36 @@
+import { loadExternalResource } from '@/lib/utils'
 import { useRouter } from 'next/router'
-import NProgress from 'nprogress'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 /**
  * 出现页面加载进度条
  */
 export default function LoadingProgress() {
   const router = useRouter()
+  const [NProgress, setNProgress] = useState(null)
   // 加载进度条
   useEffect(() => {
-    const handleStart = (url) => {
-      NProgress.start()
+    loadExternalResource(
+      'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js',
+      'js'
+    ).then(() => {
+      if (window.NProgress) {
+        setNProgress(window.NProgress)
+        // 调速
+        window.NProgress.settings.minimun = 0.1
+        loadExternalResource(
+          'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css',
+          'css'
+        )
+      }
+    })
+
+    const handleStart = url => {
+      NProgress?.start()
     }
 
     const handleStop = () => {
-      NProgress.done()
+      NProgress?.done()
     }
 
     router.events.on('routeChangeStart', handleStart)