HEO 关闭移动端动画

2026-06-01 15:10:14 +00:00 · 2024-05-31 15:33:59 +08:00
parent e16142f59c
commit 4b03ec2c78
4 changed files with 153 additions and 97 deletions
--- a/themes/heo/components/InfoCard.js
+++ b/themes/heo/components/InfoCard.js
@@ -1,6 +1,6 @@
-import { siteConfig } from '@/lib/config'
 import { ArrowRightCircle, GlobeAlt } from '@/components/HeroIcons'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
@@ -19,41 +19,48 @@ export function InfoCard(props) {
  // 在文章详情页特殊处理
  const isSlugPage = router.pathname.indexOf('/[prefix]') === 0
  return (
-        <Card className='bg-[#4f65f0] dark:bg-yellow-600 text-white flex flex-col w-72 overflow-hidden relative'>
-            {/* 信息卡牌第一行 */}
-            <div className='flex justify-between'>
-                {/* 问候语 */}
-                <GreetingsWords />
-                <div className={`${isSlugPage ? 'absolute right-0 -mt-8 -mr-6 hover:opacity-0 hover:scale-150 blur' : 'cursor-pointer'} justify-center items-center flex dark:text-gray-100 transform transitaion-all duration-200`}>
-                    <LazyImage src={siteInfo?.icon} className='rounded-full' width={isSlugPage ? 100 : 28} alt={siteConfig('AUTHOR')} />
-                </div>
-            </div>
+    <Card className='bg-[#4f65f0] dark:bg-yellow-600 text-white flex flex-col w-72 overflow-hidden relative'>
+      {/* 信息卡牌第一行 */}
+      <div className='flex justify-between'>
+        {/* 问候语 */}
+        <GreetingsWords />
+        <div
+          className={`${isSlugPage ? 'absolute right-0 -mt-8 -mr-6 hover:opacity-0 hover:scale-150 blur' : 'cursor-pointer'} justify-center items-center flex dark:text-gray-100 transform transitaion-all duration-200`}>
+          <LazyImage
+            src={siteInfo?.icon}
+            className='rounded-full'
+            width={isSlugPage ? 100 : 28}
+            alt={siteConfig('AUTHOR')}
+          />
+        </div>
+      </div>

-            <h2 className='text-3xl font-extrabold mt-3'>
-                {siteConfig('AUTHOR')}
-            </h2>
+      <h2 className='text-3xl font-extrabold mt-3'>{siteConfig('AUTHOR')}</h2>

-            {/* 公告栏 */}
-            <div>
-                <Announcement post={notice} style={{ color: 'white !important' }} />
-            </div>
+      {/* 公告栏 */}
+      <div>
+        <Announcement post={notice} style={{ color: 'white !important' }} />
+      </div>

-            <div className='flex justify-between'>
-                <div className='flex space-x-3  hover:text-black dark:hover:text-white'>
-                    {/* 两个社交按钮 */}
-                    <div className='bg-indigo-400 p-2 rounded-full  transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
-                        <Link href='/about'><GlobeAlt className={'w-6 h-6'} /></Link>
-                    </div>
-                    <div className='bg-indigo-400 p-2 rounded-full w-10 items-center flex justify-center transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
-                        {siteConfig('HEO_INFO_CARD_URL', null, CONFIG) && <Link href={siteConfig('HEO_INFO_CARD_URL', null, CONFIG)}>
-                            <i className='fab fa-github text-xl' />
-                        </Link>
-                        }
-                    </div>
-                </div>
-                <MoreButton />
-            </div>
-        </Card>
+      <div className='flex justify-between'>
+        <div className='flex space-x-3  hover:text-black dark:hover:text-white'>
+          {/* 两个社交按钮 */}
+          <div className='bg-indigo-400 p-2 rounded-full  transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
+            <Link href='/about'>
+              <GlobeAlt className={'w-6 h-6'} />
+            </Link>
+          </div>
+          <div className='bg-indigo-400 p-2 rounded-full w-10 items-center flex justify-center transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
+            {siteConfig('HEO_INFO_CARD_URL', null, CONFIG) && (
+              <Link href={siteConfig('HEO_INFO_CARD_URL', null, CONFIG)}>
+                <i className='fab fa-github text-xl' />
+              </Link>
+            )}
+          </div>
+        </div>
+        <MoreButton />
+      </div>
+    </Card>
  )
 }

@@ -69,9 +76,13 @@ function GreetingsWords() {
    setGreeting(greetings[randomIndex])
  }

-  return <div onClick={handleChangeGreeting} className=' select-none cursor-pointer py-1 px-2 bg-indigo-400 hover:bg-indigo-50  hover:text-indigo-950 dark:bg-yellow-500 dark:hover:text-white dark:hover:bg-black text-sm rounded-lg  duration-200 transition-colors'>
-        {greeting}
+  return (
+    <div
+      onClick={handleChangeGreeting}
+      className=' select-none cursor-pointer py-1 px-2 bg-indigo-400 hover:bg-indigo-50  hover:text-indigo-950 dark:bg-yellow-500 dark:hover:text-white dark:hover:bg-black text-sm rounded-lg  duration-200 transition-colors'>
+      {greeting}
    </div>
+  )
 }

 /**
@@ -79,10 +90,19 @@ function GreetingsWords() {
 * @returns
 */
 function MoreButton() {
-  return <Link href='/about'>
-        <div className={'group bg-indigo-400 dark:bg-yellow-500 hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white flex items-center transition-colors duration-200 py-2 px-3 rounded-full space-x-1'}>
-            <ArrowRightCircle className={'group-hover:stroke-black dark:group-hover:stroke-white w-6 h-6 transition-all duration-100'} />
-            <div className='font-bold'>了解更多</div>
-        </div>
+  return (
+    <Link href='/about'>
+      <div
+        className={
+          'group bg-indigo-400 dark:bg-yellow-500 hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white flex items-center transition-colors duration-200 py-2 px-3 rounded-full space-x-1'
+        }>
+        <ArrowRightCircle
+          className={
+            'group-hover:stroke-black dark:group-hover:stroke-white w-6 h-6 transition-all duration-100'
+          }
+        />
+        <div className='font-bold'>了解更多</div>
+      </div>
    </Link>
+  )
 }
--- a/themes/heo/components/PostHeader.js
+++ b/themes/heo/components/PostHeader.js
@@ -22,7 +22,7 @@ export default function PostHeader({ post, siteInfo, isDarkMode }) {
  return (
    <div
      id='post-bg'
-      className='w-full h-[30rem] relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat z-10 mb-5'>
+      className='md:mb-0 -mb-5 w-full h-[30rem] relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat z-10'>
      <style jsx>{`
        .coverdiv:after {
          position: absolute;
@@ -38,7 +38,6 @@ export default function PostHeader({ post, siteInfo, isDarkMode }) {
      `}</style>

      <div
-        style={{ backdropFilter: 'blur(15px)' }}
        className={`${isDarkMode ? 'bg-[#CA8A04]' : 'bg-[#0060e0]'} absolute top-0 w-full h-full py-10 flex justify-center items-center`}>
        {/* 文章背景图 */}
        <div
@@ -46,10 +45,10 @@ export default function PostHeader({ post, siteInfo, isDarkMode }) {
          style={{
            filter: 'blur(15px)'
          }}
-          className='coverdiv lg:translate-x-96 opacity-50 lg:rotate-12'>
+          className='coverdiv lg:opacity-50 lg:translate-x-96 lg:rotate-12'>
          <LazyImage
            id='post-cover'
-            className='w-full h-full object-cover opacity-80 max-h-[50rem] min-w-[50vw] min-h-[20rem]'
+            className='w-full h-full object-cover max-h-[50rem] min-w-[50vw] min-h-[20rem]'
            src={headerImage}
          />
        </div>
--- a/themes/heo/components/WavesArea.js
+++ b/themes/heo/components/WavesArea.js
@@ -1,4 +1,5 @@
 import { useGlobal } from '@/lib/global'
+import { useEffect, useState } from 'react'

 /**
 * 文章波浪动画
@@ -6,60 +7,96 @@ import { useGlobal } from '@/lib/global'
 export default function WavesArea() {
  const { isDarkMode } = useGlobal()
  const color = isDarkMode ? '#18171d' : '#f7f9fe'
+  const [showWave, setShowWave] = useState(true)
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 800) {
+        setShowWave(false)
+      } else {
+        setShowWave(true)
+      }
+    }
+
+    // Initial check
+    handleResize()
+
+    // Add event listener for window resize
+    window.addEventListener('resize', handleResize)
+
+    // Cleanup event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  if (!showWave) {
+    return null
+  }

  return (
-        <section className="main-hero-waves-area waves-area w-full absolute left-0 z-10 bottom-0">
-            <svg className="waves-svg w-full h-[60px]" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
-                <defs>
-                    <path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path>
-                </defs>
-                <g className="parallax">
-                    <use href="#gentle-wave" x="48" y="0"></use>
-                    <use href="#gentle-wave" x="48" y="3"></use>
-                    <use href="#gentle-wave" x="48" y="5"></use>
-                    <use href="#gentle-wave" x="48" y="7"></use>
-                </g>
-            </svg>
-            <style jsx global>{`
-                /* Animation */
+    <section className='main-hero-waves-area waves-area w-full absolute left-0 z-10 bottom-0'>
+      <svg
+        className='waves-svg w-full h-[60px]'
+        xmlns='http://www.w3.org/2000/svg'
+        xlink='http://www.w3.org/1999/xlink'
+        viewBox='0 24 150 28'
+        preserveAspectRatio='none'
+        shapeRendering='auto'>
+        <defs>
+          <path
+            id='gentle-wave'
+            d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z'></path>
+        </defs>
+        <g className='parallax'>
+          <use href='#gentle-wave' x='48' y='0'></use>
+          <use href='#gentle-wave' x='48' y='3'></use>
+          <use href='#gentle-wave' x='48' y='5'></use>
+          <use href='#gentle-wave' x='48' y='7'></use>
+        </g>
+      </svg>
+      <style jsx global>
+        {`
+          /* Animation */

-                .parallax > use {
-                  animation: move-forever 30s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
-                }
-                .parallax > use:nth-child(1) {
-                  animation-delay: -2s;
-                  animation-duration: 7s;
-                  fill: ${color};
-                  opacity: 0.5;
-                }
-                .parallax > use:nth-child(2) {
-                  animation-delay: -3s;
-                  animation-duration: 10s;
-                  fill: ${color};
-                  opacity: 0.6;
-                }
-                .parallax > use:nth-child(3) {
-                  animation-delay: -4s;
-                  animation-duration: 13s;
-                  fill: ${color};
-                  opacity: 0.7;
-                }
-                .parallax > use:nth-child(4) {
-                  animation-delay: -5s;
-                  animation-duration: 20s;
-                  fill: ${color};
-                }
-                
-                @keyframes move-forever {
-                  0% {
-                    transform: translate3d(-90px, 0, 0);
-                  }
-                  100% {
-                    transform: translate3d(85px, 0, 0);
-                  }
-                }
-            `}
-            </style>
-        </section>
+          .parallax > use {
+            animation: move-forever 30s cubic-bezier(0.55, 0.5, 0.45, 0.5)
+              infinite;
+          }
+          .parallax > use:nth-child(1) {
+            animation-delay: -2s;
+            animation-duration: 7s;
+            fill: ${color};
+            opacity: 0.5;
+          }
+          .parallax > use:nth-child(2) {
+            animation-delay: -3s;
+            animation-duration: 10s;
+            fill: ${color};
+            opacity: 0.6;
+          }
+          .parallax > use:nth-child(3) {
+            animation-delay: -4s;
+            animation-duration: 13s;
+            fill: ${color};
+            opacity: 0.7;
+          }
+          .parallax > use:nth-child(4) {
+            animation-delay: -5s;
+            animation-duration: 20s;
+            fill: ${color};
+          }
+
+          @keyframes move-forever {
+            0% {
+              transform: translate3d(-90px, 0, 0);
+            }
+            100% {
+              transform: translate3d(85px, 0, 0);
+            }
+          }
+        `}
+      </style>
+    </section>
  )
 }
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -297,7 +297,7 @@ const LayoutSlug = props => {
              data-wow-delay='.2s'
              className='wow fadeInUp'>
              {/* Notion文章主体 */}
-              <section className='px-5 justify-center mx-auto'>
+              <section className='px-5 py-5 justify-center mx-auto'>
                <WWAds orientation='horizontal' className='w-full' />
                {post && <NotionPage post={post} />}
                <WWAds orientation='horizontal' className='w-full' />