Merge pull request #242 from tangly1024/preview

代码封装优化，Header颜色微调

components/Comment.js

@@ -1,14 +1,13 @@
 import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
-import 'gitalk/dist/gitalk.css'
 import Tabs from '@/components/Tabs'
 import { ReactCusdis } from 'react-cusdis'
 import { useGlobal } from '@/lib/global'
 
 const GitalkComponent = dynamic(
   () => {
-    return import('gitalk/dist/gitalk-component')
+    return import('@/components/Gitalk')
   },
   { ssr: false }
 )

components/Gitalk.js

@@ -0,0 +1,9 @@
+import 'gitalk/dist/gitalk.css'
+
+import GitalkComponent from 'gitalk/dist/gitalk-component'
+
+const Gitalk = props => {
+  return <GitalkComponent {...props} />
+}
+
+export default Gitalk

components/Live2D.js

@@ -17,7 +17,10 @@ export default function Live2D() {
   }
 
   useEffect(() => {
-    initLive2D()
+    window.addEventListener('scroll', initLive2D)
+    return () => {
+      window.removeEventListener('scroll', initLive2D)
+    }
   }, [])
 
   return <canvas id="live2d" className='cursor-pointer' width="280" height="250" onClick={handleClick} alt='切换主题' title='切换主题' />
@@ -27,6 +30,7 @@ export default function Live2D() {
  * 加载宠物
  */
 function initLive2D() {
+  window.removeEventListener('scroll', initLive2D)
   setTimeout(() => {
     // 加载 waifu.css live2d.min.js waifu-tips.js
     if (screen.width >= 768) {
@@ -38,5 +42,5 @@ function initLive2D() {
         loadlive2d('live2d', BLOG.WIDGET_PET_LINK)
       })
     }
-  }, 1000)
+  }, 300)
 }

next.config.js

@@ -6,6 +6,8 @@ module.exports = withBundleAnalyzer({
     webpack5: true
   },
   images: {
+    // 图片压缩
+    formats: ['image/avif', 'image/webp'],
     // 允许next/image加载的图片 域名
     domains: [
       'gravatar.com',

pages/article/[slug].js

@@ -25,7 +25,7 @@ const Slug = props => {
         const article = document.getElementById('container')
         if (!article) {
           router.push('/404').then(() => {
-            console.warn('找不到页面', router.asPath)
+            // console.warn('找不到页面', router.asPath)
           })
         }
       }

themes/hexo/Layout404.js

@@ -11,7 +11,7 @@ export const Layout404 = props => {
         const article = typeof document !== 'undefined' && document.getElementById('container')
         if (!article) {
           router.push('/').then(() => {
-            console.log('找不到页面', router.asPath)
+            // console.log('找不到页面', router.asPath)
           })
         }
       }

themes/hexo/components/Header.js

@@ -103,7 +103,7 @@ const Header = props => {
       className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black text-white"
       style={{
         backgroundImage:
-          `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${siteInfo?.pageCover}")`
+          `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0,0,0,0.2), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${siteInfo?.pageCover}")`
       }}
     >
       <div className="absolute flex flex-col h-full items-center justify-center w-full font-sans">

themes/next/Layout404.js

@@ -11,7 +11,7 @@ export const Layout404 = props => {
         const article = typeof document !== 'undefined' && document.getElementById('container')
         if (!article) {
           router.push('/').then(() => {
-            console.log('找不到页面', router.asPath)
+            // console.log('找不到页面', router.asPath)
           })
         }
       }