延迟加载adsense,优化heo首屏

components/GoogleAdsense.js

@@ -34,7 +34,10 @@ export default function GoogleAdsense() {
 
   const router = useRouter()
   useEffect(() => {
-    initGoogleAdsense()
+    // 延迟3秒加载
+    setTimeout(() => {
+      initGoogleAdsense()
+    }, 3000)
   }, [router])
 
   return null

themes/heo/components/BlogPostCard.js

@@ -13,15 +13,20 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
   return (
         <div className={` ${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
 
-            <div className={'animate__animated animate__fadeIn animate__fast border bg-white dark:bg-[#1e1e1e] cursor-pointer flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row 2xl:h-96 2xl:flex-col group w-full dark:border-gray-600 hover:border-indigo-600  dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden rounded-xl'}>
+            <div
+                data-aos="fade-up"
+                data-aos-duration="200"
+                data-aos-once="false"
+                data-aos-anchor-placement="top-bottom"
+                className={'border bg-white dark:bg-[#1e1e1e] flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row 2xl:h-96 2xl:flex-col group w-full dark:border-gray-600 hover:border-indigo-600  dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden rounded-xl'}>
 
                 {/* 图片封面 */}
                 {showPageCover && (
-                    <div className="w-full md:w-5/12 2xl:w-full overflow-hidden">
+                    <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
-                        <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+                        <div className="w-full md:w-5/12 2xl:w-full overflow-hidden">
-                            <LazyImage priority={index === 0} src={post?.pageCoverThumbnail} alt={post?.title} className='h-60 w-full object-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-300'/>
+                            <LazyImage priority={index === 0} src={post?.pageCoverThumbnail} alt={post?.title} className='h-60 w-full object-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-300' />
-                        </Link>
+                        </div>
-                    </div>
+                    </Link>
                 )}
 
                 {/* 文字区块 */}

themes/heo/components/BlogPostListPage.js

@@ -18,15 +18,16 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
     return <BlogPostListEmpty />
   } else {
     return (
-      <div id="container" className='w-full'>
+            <div id="container" className='w-full'>
-        {/* 文章列表 */}
+                    {/* 文章列表 */}
-        <div className="2xl:grid 2xl:grid-cols-2 grid-cols-1 gap-5">
+                    <div className="2xl:grid 2xl:grid-cols-2 grid-cols-1 gap-5">
-          {posts?.map(post => (
+                        {posts?.map(post => (
-            <BlogPostCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo}/>
+                            <BlogPostCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo} />
-          ))}
+                        ))}
-        </div>
+                    </div>
-        {showPagination && <PaginationNumber page={page} totalPage={totalPage} />}
+
-      </div>
+                    {showPagination && <PaginationNumber page={page} totalPage={totalPage} />}
+            </div>
     )
   }
 }

themes/heo/index.js

@@ -40,7 +40,6 @@ import LazyImage from '@/components/LazyImage'
  */
 const LayoutBase = props => {
   const { children, headerSlot, slotTop, slotRight, meta, siteInfo, className } = props
-  const { onLoading } = useGlobal()
 
   return (
         <div id='theme-heo' className='bg-[#f7f9fe] dark:bg-[#18171d] h-full min-h-screen flex flex-col'>
@@ -55,40 +54,17 @@ const LayoutBase = props => {
             <main id="wrapper-outer" className={'flex-grow w-full max-w-[86rem] mx-auto relative md:px-5'}>
 
                 <div id="container-inner" className={'w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
-
+                    <div className={`w-full h-auto ${className || ''}`}>
-                    <Transition
-                        show={!onLoading}
-                        appear={true}
-                        enter="transition ease-in-out duration-700 transform order-first"
-                        enterFrom="opacity-0 translate-y-16"
-                        enterTo="opacity-100"
-                        leave="transition ease-in-out duration-300 transform"
-                        leaveFrom="opacity-100"
-                        leaveTo="opacity-0 -translate-y-16"
-                        className={`w-full h-auto ${className || ''}`}
-                        unmount={false}
-                    >
                         {/* 主区上部嵌入 */}
                         {slotTop}
-
                         {children}
-                    </Transition>
+                    </div>
 
-                    <Transition
+                    <div>
-                        show={!onLoading}
-                        appear={true}
-                        enter="transition ease-in-out duration-700 transform order-first"
-                        enterFrom="opacity-0 translate-y-16"
-                        enterTo="opacity-100 translate-y-0"
-                        leave="transition ease-in-out duration-300 transform"
-                        leaveFrom="opacity-100 translate-y-0"
-                        leaveTo="opacity-0 -translate-y-16"
-                        unmount={false}
-                    >
                         {/* 主区快右侧 */}
                         {slotRight}
+                    </div>
 
-                    </Transition>
                 </div>
             </main>
 
@@ -234,7 +210,12 @@ const LayoutSlug = props => {
 
   // 右侧栏
   const slotRight = <SideRight {...props} />
-  const headerSlot = <header className='post-bg'>
+  const headerSlot = <header
+        data-aos="fade-up"
+        data-aos-duration="300"
+        data-aos-once="false"
+        data-aos-anchor-placement="top-bottom"
+        className='post-bg'>
         {/* 顶部导航 */}
         <div id='nav-bar-wrapper'><NavBar {...props} /></div>
         <PostHeader {...props} />
@@ -247,7 +228,12 @@ const LayoutSlug = props => {
 
                 {!lock && <div id="article-wrapper" className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 ">
 
-                    <article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased overflow-y-hidden" >
+                    <article
+                        data-aos="fade-up"
+                        data-aos-duration="300"
+                        data-aos-once="false"
+                        data-aos-anchor-placement="top-bottom"
+                         itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased overflow-y-hidden" >
                         {/* Notion文章主体 */}
                         <section className='px-5 justify-center mx-auto'>
                             {post && <NotionPage post={post} />}
@@ -395,9 +381,9 @@ const LayoutTagIndex = props => {
   const { tagOptions } = props
   const { locale } = useGlobal()
   const headerSlot = <header>
-  {/* 顶部导航 */}
+        {/* 顶部导航 */}
-  <div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
+        <div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
-</header>
+    </header>
   return (
         <LayoutBase {...props} className='mt-8' headerSlot={headerSlot}>
             <div id='tag-outer-wrapper' className='px-5  lg:px-0'>