From 16fd9692fb6f27f593beef23ca5cc5718a4edd60 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 12 Mar 2023 16:39:50 +0800
Subject: [PATCH] fix/animation  lagging

---
 components/ExternalScript.js           | 7 ++++---
 pages/_app.js                          | 2 +-
 themes/hexo/components/BlogPostCard.js | 2 +-
 themes/matery/LayoutBase.js            | 7 -------
 4 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/components/ExternalScript.js b/components/ExternalScript.js
index a168caab..f1672b16 100644
--- a/components/ExternalScript.js
+++ b/components/ExternalScript.js
@@ -1,12 +1,13 @@
 import BLOG from '@/blog.config'
-import { isBrowser, loadExternalResource } from '@/lib/utils'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
 
 /**
  * 自定义引入外部JS 和 CSS
  * @returns
  */
 const ExternalScript = () => {
-  if (isBrowser()) {
+  useEffect(() => {
     // 静态导入本地自定义样式
     loadExternalResource(BLOG.FONT_AWESOME, 'css')
     loadExternalResource('/css/custom.css', 'css')
@@ -25,7 +26,7 @@ const ExternalScript = () => {
     BLOG.FONT_URL?.forEach(e => {
       loadExternalResource(e, 'css')
     })
-  }
+  }, [])
 
   return null
 }
diff --git a/pages/_app.js b/pages/_app.js
index ce4cfd54..33fe5ffa 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -58,7 +58,7 @@ const MyApp = ({ Component, pageProps }) => {
   useEffect(() => {
     AOS.init()
     smoothscroll.polyfill()
-  })
+  }, [])
 
   return (
         <GlobalContextProvider>
diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js
index 895a77ec..74912ee8 100644
--- a/themes/hexo/components/BlogPostCard.js
+++ b/themes/hexo/components/BlogPostCard.js
@@ -100,7 +100,7 @@ const BlogPostCard = ({ post, showSummary, siteInfo }) => {
                         alt={post.title}
                         className="h-full w-full hover:scale-125 transform object-cover duration-500"
                     />
-                    {/* <Image className='hover:scale-125 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
+                    {/* <Image className='hover:scale-125 transform duration-500' src={post?.page_cover} style={{ objectFit: 'cover' }} alt={post.title} fill loading='lazy' /> */}
                 </Link>
             </div>
         )}
diff --git a/themes/matery/LayoutBase.js b/themes/matery/LayoutBase.js
index 4a1bbc51..9fcd9849 100644
--- a/themes/matery/LayoutBase.js
+++ b/themes/matery/LayoutBase.js
@@ -23,18 +23,11 @@ const LayoutBase = props => {
 
   const scrollListener = () => {
     requestAnimationFrame(() => {
-    //   const targetRef = document.getElementById('wrapper')
-    //   const clientHeight = targetRef?.clientHeight
       const scrollY = window.pageYOffset
-      //   const fullHeight = clientHeight - window.outerHeight
-      //   let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
-      //   if (per > 100) per = 100
       const shouldShow = scrollY > 300
-      console.log(scrollY)
       if (shouldShow !== show) {
         switchShow(shouldShow)
       }
-    // changePercent(per)
     })
   }
   useEffect(() => {