diff --git a/components/Collapse.js b/components/Collapse.js
index 4e26f7fd..69ef59eb 100644
--- a/components/Collapse.js
+++ b/components/Collapse.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useImperativeHandle } from 'react'
+import { useEffect, useImperativeHandle, useRef } from 'react'
 
 /**
  * 折叠面板组件，支持水平折叠、垂直折叠
@@ -7,7 +7,7 @@ import React, { useEffect, useImperativeHandle } from 'react'
  */
 const Collapse = props => {
   const { collapseRef } = props
-  const ref = React.useRef(null)
+  const ref = useRef(null)
   const type = props.type || 'vertical'
 
   useImperativeHandle(collapseRef, () => {
@@ -17,8 +17,10 @@ const Collapse = props => {
        * @param {*} param0
        */
       updateCollapseHeight: ({ height, increase }) => {
-        ref.current.style.height = ref.current.scrollHeight
-        ref.current.style.height = 'auto'
+        if (props.isOpen) {
+          ref.current.style.height = ref.current.scrollHeight
+          ref.current.style.height = 'auto'
+        }
       }
     }
   })
diff --git a/components/Live2D.js b/components/Live2D.js
index 4dbbe31a..84afcdff 100644
--- a/components/Live2D.js
+++ b/components/Live2D.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
-import { loadExternalResource } from '@/lib/utils'
+import { isMobile, loadExternalResource } from '@/lib/utils'
 import { useEffect } from 'react'
 
 /**
@@ -14,7 +14,7 @@ export default function Live2D() {
   const petLink = siteConfig('WIDGET_PET_LINK')
 
   useEffect(() => {
-    if (showPet) {
+    if (showPet && !isMobile()) {
       Promise.all([
         loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js')
       ]).then((e) => {
diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index 5ec52819..6284e2b6 100644
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -47,7 +47,8 @@ const ThemeSwitch = () => {
                 <div className="text-sm flex items-center group-hover:w-32 transition-all duration-200">
                     <i className="fa-solid fa-language w-5" />
                     <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'>
-                        <select value={lang} onChange={onLangSelectChange} name="themes" className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'>
+                        <label htmlFor="langSelect" className="sr-only">选择语言：</label>
+                        <select id="langSelect" value={lang} onChange={onLangSelectChange} name="themes" className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'>
                             {Object.keys(LANGS)?.map(t => {
                               return <option key={t} value={t}>{LANGS[t].LOCALE}</option>
                             })}
@@ -59,7 +60,8 @@ const ThemeSwitch = () => {
                 <div className="text-sm flex items-center group-hover:w-32 transition-all duration-200">
                     <i className="fa-solid fa-palette w-5" />
                     <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'>
-                        <select value={currentTheme} onChange={onThemeSelectChange} name="themes" className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'>
+                        <label htmlFor="themeSelect" className="sr-only">选择主题：</label>
+                        <select id="themeSelect" value={currentTheme} onChange={onThemeSelectChange} name="themes" className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'>
                             {THEMES?.map(t => {
                               return <option key={t} value={t}>{t}</option>
                             })}
diff --git a/components/WWAds.js b/components/WWAds.js
index d1f786a4..0df9b2c0 100644
--- a/components/WWAds.js
+++ b/components/WWAds.js
@@ -7,13 +7,13 @@ import { siteConfig } from '@/lib/config'
  * @returns {JSX.Element | null} - 返回渲染的 JSX 元素或 null
  */
 export default function WWAds({ orientation = 'vertical', sticky = false, className }) {
-  const adWWADSId = siteConfig('AD_WWADS_ID')
+  const AD_WWADS_ID = siteConfig('AD_WWADS_ID')
 
-  if (!adWWADSId) {
+  if (!AD_WWADS_ID) {
     return null
   }
 
-  return <div data-id={adWWADSId} className={`wwads-cn 
+  return <div data-id={AD_WWADS_ID} className={`wwads-cn 
             ${orientation === 'vertical' ? 'wwads-vertical' : 'wwads-horizontal'}
             ${sticky ? 'wwads-sticky' : ''} z-10 ${className || ''}`} />
 }
diff --git a/lib/notion/mapImage.js b/lib/notion/mapImage.js
index c26b1ed4..b0888386 100644
--- a/lib/notion/mapImage.js
+++ b/lib/notion/mapImage.js
@@ -56,7 +56,6 @@ const mapImgUrl = (img, block, type = 'block', from = 'post') => {
     }
   }
 
-  console.log('block', block)
   // 统一压缩图片
   if (from === 'pageCoverThumbnail' || block.type === 'image' || block.type === 'page') {
     const width = block?.format?.block_width || 200
diff --git a/next.config.js b/next.config.js
index 6266fb48..0ee81606 100644
--- a/next.config.js
+++ b/next.config.js
@@ -41,7 +41,8 @@ module.exports = withBundleAnalyzer({
       'images.unsplash.com',
       'source.unsplash.com',
       'p1.qhimg.com',
-      'webmention.io'
+      'webmention.io',
+      'ko-fi.com'
     ]
   },
   // 默认将feed重定向至 /public/rss/feed.xml
diff --git a/themes/next/components/Announcement.js b/themes/next/components/Announcement.js
index 4d9afc4a..6e7cfc45 100644
--- a/themes/next/components/Announcement.js
+++ b/themes/next/components/Announcement.js
@@ -14,11 +14,7 @@ const Announcement = ({ post, className }) => {
                 <i className="mr-2 fas fa-bullhorn" />{locale.COMMON.ANNOUNCEMENT}
             </div>
         </div>
-        {post && (<div id="announcement-content" data-aos="fade-down"
-                    data-aos-duration="500"
-                    data-aos-delay="200"
-                    data-aos-once="true"
-                    data-aos-anchor-placement="top-bottom">
+        {post && (<div id="announcement-content">
             <NotionPage post={post} className='text-center ' />
         </div>)}
     </>
diff --git a/themes/next/components/ArticleDetail.js b/themes/next/components/ArticleDetail.js
index efb20983..fab876bc 100644
--- a/themes/next/components/ArticleDetail.js
+++ b/themes/next/components/ArticleDetail.js
@@ -26,19 +26,22 @@ export default function ArticleDetail(props) {
   const url = siteConfig('LINK') + useRouter().asPath
   const { locale } = useGlobal()
   const showArticleInfo = siteConfig('NEXT_ARTICLE_INFO', null, CONFIG)
+  // 动画样式  首屏卡片不用，后面翻出来的加动画
+  const aosProps = {
+    'data-aos': 'fade-down',
+    'data-aos-duration': '400',
+    'data-aos-once': 'true',
+    'data-aos-anchor-placement': 'top-bottom'
+  }
 
   return (
         <div id="article-wrapper"
             className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
             <div itemScope itemType="https://schema.org/Movie"
-                data-aos="fade-down"
-                data-aos-duration="300"
-                data-aos-once="true"
-                data-aos-anchor-placement="top-bottom"
                 className="subpixel-antialiased overflow-y-hidden py-10 px-5 lg:pt-24 md:px-24  dark:border-gray-700 bg-white dark:bg-hexo-black-gray article-padding"
             >
 
-                {showArticleInfo && <header>
+                {showArticleInfo && <header {...aosProps}>
                     {/* 头图 */}
                     {siteConfig('NEXT_POST_HEADER_IMAGE_VISIBLE', null, CONFIG) && post?.type && !post?.type !== 'Page' && post?.pageCover && (
                         <div className="w-full relative md:flex-shrink-0 overflow-hidden">
@@ -52,7 +55,7 @@ export default function ArticleDetail(props) {
                     </div>
 
                     {/* meta */}
-                    <section className="mt-2 text-gray-400 dark:text-gray-400 font-light leading-7 text-sm">
+                    <section className="mt-2 text-gray-500 dark:text-gray-400 font-light leading-7 text-sm">
                         <div className='flex flex-wrap justify-center'>
                             {post?.type !== 'Page' && (<>
                                 <Link
diff --git a/themes/next/components/BlogAround.js b/themes/next/components/BlogAround.js
index 69948b24..8dd93942 100644
--- a/themes/next/components/BlogAround.js
+++ b/themes/next/components/BlogAround.js
@@ -14,7 +14,7 @@ export default function BlogAround ({ prev, next }) {
       {prev && <Link
         href={`/${prev.slug}`}
         passHref
-        className='text-sm py-3 text-gray-400 hover:underline cursor-pointer'>
+        className='text-sm py-3 text-gray-500 hover:underline cursor-pointer'>
 
         <i className='mr-1 fas fa-angle-double-left' />{prev.title}
 
@@ -22,7 +22,7 @@ export default function BlogAround ({ prev, next }) {
       {next && <Link
         href={`/${next.slug}`}
         passHref
-        className='text-sm flex py-3 text-gray-400 hover:underline cursor-pointer'>
+        className='text-sm flex py-3 text-gray-500 hover:underline cursor-pointer'>
         {next.title}
         <i className='ml-1 my-1 fas fa-angle-double-right' />
 
diff --git a/themes/next/components/BlogPostArchive.js b/themes/next/components/BlogPostArchive.js
index c961d7f9..91e98a70 100644
--- a/themes/next/components/BlogPostArchive.js
+++ b/themes/next/components/BlogPostArchive.js
@@ -27,7 +27,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
               className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
             >
               <div id={post?.publishDay}>
-                <span className="text-gray-400">{post.date?.start_date}</span>{' '}
+                <span className="text-gray-500">{post.date?.start_date}</span>{' '}
                 &nbsp;
                 <Link
                   href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
diff --git a/themes/next/components/BlogPostCard.js b/themes/next/components/BlogPostCard.js
index 1d87b0fd..51e31578 100644
--- a/themes/next/components/BlogPostCard.js
+++ b/themes/next/components/BlogPostCard.js
@@ -10,9 +10,19 @@ import TwikooCommentCount from '@/components/TwikooCommentCount'
 import { formatDateFmt } from '@/lib/formatDate'
 import { siteConfig } from '@/lib/config'
 
-const BlogPostCard = ({ post, showSummary }) => {
+const BlogPostCard = ({ post, index, showSummary }) => {
   const { locale } = useGlobal()
   const showPreview = siteConfig('NEXT_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
+  // 动画样式  首屏卡片不用，后面翻出来的加动画
+  const aosProps = index > 2
+    ? {
+        'data-aos': 'fade-down',
+        'data-aos-duration': '400',
+        'data-aos-once': 'true',
+        'data-aos-anchor-placement': 'top-bottom'
+      }
+    : {}
+
   return (
     <Card className="w-full">
       <div
@@ -20,26 +30,19 @@ const BlogPostCard = ({ post, showSummary }) => {
         className="flex flex-col-reverse justify-between duration-300"
       >
         <div className="lg:p-8 p-4 flex flex-col w-full">
+
+          {/* 文章标题 */}
           <Link
+            {...aosProps}
             href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
             passHref
-            data-aos="fade-down"
-            data-aos-duration="500"
-            data-aos-once="true"
-            data-aos-anchor-placement="top-bottom"
-            className={`cursor-pointer text-3xl ${showPreview ? 'text-center' : ''
-              } leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
+            className={`cursor-pointer text-3xl ${showPreview ? 'text-center' : ''} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
 
             <NotionIcon icon={post.pageIcon} /> <span className='menu-link'>{post.title}</span>
 
           </Link>
 
-          <div data-aos="fade-down"
-                data-aos-duration="500"
-                data-aos-delay="100"
-                data-aos-once="true"
-                data-aos-anchor-placement="top-bottom"
-                className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-400 `}>
+          <div {...aosProps} className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-500 `}>
 
             <div>
               {post.category && (
@@ -63,6 +66,7 @@ const BlogPostCard = ({ post, showSummary }) => {
                     <span className='menu-link'>{post.date?.start_date}</span>
                 </Link>
             </div>
+
             <TwikooCommentCount post={post} className='hover:text-blue-500 dark:hover:text-blue-400 hover:underline text-sm'/>
 
             <div className="hover:text-blue-500 dark:hover:text-blue-400  md:flex-nowrap flex-wrap md:justify-start inline-block">
@@ -73,12 +77,7 @@ const BlogPostCard = ({ post, showSummary }) => {
           </div>
 
           {(!showPreview || showSummary) && !post.results && (
-            <p data-aos="fade-down"
-                data-aos-duration="500"
-                data-aos-delay="100"
-                data-aos-once="true"
-                data-aos-anchor-placement="top-bottom"
-                className="mt-4 mb-12 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+            <p {...aosProps} className="mt-4 mb-12 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
               {post.summary}
             </p>
           )}
@@ -93,11 +92,7 @@ const BlogPostCard = ({ post, showSummary }) => {
           )}
 
           {showPreview && post?.blockMap && (
-            <div data-aos="fade-down"
-            data-aos-duration="500"
-            data-aos-delay="100"
-            data-aos-once="true"
-            data-aos-anchor-placement="top-bottom"className="overflow-ellipsis truncate">
+            <div className="overflow-ellipsis truncate">
               <NotionPage post={post} />
             </div>
           )}
diff --git a/themes/next/components/BlogPostListPage.js b/themes/next/components/BlogPostListPage.js
index fe87ad04..5da3f160 100644
--- a/themes/next/components/BlogPostListPage.js
+++ b/themes/next/components/BlogPostListPage.js
@@ -21,8 +21,8 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
       <div>
         {/* 文章列表 */}
         <div id="posts-wrapper" className="flex flex-wrap lg:space-y-4 space-y-1">
-          {posts?.map(post => (
-            <BlogPostCard key={post.id} post={post} />
+          {posts?.map((post, index) => (
+            <BlogPostCard key={post.id} index={index} post={post} />
           ))}
         </div>
         <PaginationNumber page={page} totalPage={totalPage} />
diff --git a/themes/next/components/Card.js b/themes/next/components/Card.js
index de70f580..63163dd0 100644
--- a/themes/next/components/Card.js
+++ b/themes/next/components/Card.js
@@ -1,11 +1,11 @@
 /**
  * 卡片组件
- * @param {*} param0 
- * @returns 
+ * @param {*} param0
+ * @returns
  */
 const Card = (props) => {
-    const { children, headerSlot, className } = props
-    return <div className={className}>
+  const { children, headerSlot, className } = props
+  return <div className={className}>
         <>{headerSlot}</>
         <section className="shadow px-2 py-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200">
             {children}
diff --git a/themes/next/components/CategoryGroup.js b/themes/next/components/CategoryGroup.js
index c00b5d1c..10a55cfd 100644
--- a/themes/next/components/CategoryGroup.js
+++ b/themes/next/components/CategoryGroup.js
@@ -19,7 +19,7 @@ const CategoryGroup = ({ currentCategory, categories }) => {
               : 'dark:text-gray-400 text-gray-500 hover:text-white hover:bg-gray-500 dark:hover:text-white') +
               '  text-sm w-full items-center duration-300 px-2  cursor-pointer py-1 font-light'}>
 
-            <i className={`${selected ? 'text-white fa-folder-open ' : 'text-gray-400 fa-folder '} mr-2 fas`} />{category.name}({category.count})
+            <i className={`${selected ? 'text-white fa-folder-open ' : 'text-gray-500 fa-folder '} mr-2 fas`} />{category.name}({category.count})
           </Link>
         );
       })}
diff --git a/themes/next/components/MenuList.js b/themes/next/components/MenuList.js
index 96d0726e..67250c54 100644
--- a/themes/next/components/MenuList.js
+++ b/themes/next/components/MenuList.js
@@ -33,19 +33,19 @@ export const MenuList = (props) => {
   return (
         <>
             {/* 大屏模式菜单 */}
-            <nav id='nav' data-aos="fade-down"
+            <menu id='nav' data-aos="fade-down"
                 data-aos-duration="500"
                 data-aos-delay="400"
                 data-aos-once="true"
                 data-aos-anchor-placement="top-bottom"
                 className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 font-sans'>
                 {links.map((link, index) => link && link.show && <MenuItemDrop key={index} link={link} />)}
-            </nav>
+            </menu>
 
             {/* 移动端菜单 */}
-            <div id='nav-menu-mobile' className='block md:hidden my-auto justify-start bg-white'>
+            <menu id='nav-menu-mobile' className='block md:hidden my-auto justify-start bg-white'>
                 {links?.map((link, index) => link && link.show && <MenuItemCollapse onHeightChange={props.onHeightChange} key={index} link={link} />)}
-            </div>
+            </menu>
         </>
   )
 }
diff --git a/themes/next/components/NextRecentComments.js b/themes/next/components/NextRecentComments.js
index 0237b07f..70661948 100644
--- a/themes/next/components/NextRecentComments.js
+++ b/themes/next/components/NextRecentComments.js
@@ -26,7 +26,7 @@ const NextRecentComments = (props) => {
         {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
         {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
             <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } } }>--{comment.nick}</Link></div>
+            <div className='dark:text-gray-400 text-gray-500 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } } }>--{comment.nick}</Link></div>
         </div>)}
 
   </>
diff --git a/themes/next/components/SearchInput.js b/themes/next/components/SearchInput.js
index 1ccf35fc..47902822 100644
--- a/themes/next/components/SearchInput.js
+++ b/themes/next/components/SearchInput.js
@@ -106,7 +106,7 @@ const SearchInput = ({ currentTag, keyword, cRef }) => {
 
         {(showClean &&
             <div className='-ml-12 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
-                <i className='hover:text-black transform duration-200 text-gray-400 cursor-pointer fas fa-times' onClick={cleanSearch} />
+                <i className='hover:text-black transform duration-200 text-gray-500 cursor-pointer fas fa-times' onClick={cleanSearch} />
             </div>
         )}
     </div>
diff --git a/themes/next/components/SideAreaRight.js b/themes/next/components/SideAreaRight.js
index 4a4b30b8..9b72e72d 100644
--- a/themes/next/components/SideAreaRight.js
+++ b/themes/next/components/SideAreaRight.js
@@ -59,7 +59,7 @@ const SideAreaRight = (props) => {
                         <Link
                             href={'/category'}
                             passHref
-                            className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
+                            className='text-gray-500 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
 
                             {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
 
@@ -79,7 +79,7 @@ const SideAreaRight = (props) => {
                         <Link
                             href={'/tag'}
                             passHref
-                            className="text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer">
+                            className="text-gray-500 hover:text-black  dark:hover:text-white hover:underline cursor-pointer">
 
                             {locale.COMMON.MORE}{' '}
                             <i className='fas fa-angle-double-right' />
diff --git a/themes/next/components/SideBar.js b/themes/next/components/SideBar.js
index 27fe65b0..d863c74a 100644
--- a/themes/next/components/SideBar.js
+++ b/themes/next/components/SideBar.js
@@ -35,7 +35,7 @@ const SideBar = (props) => {
               <Link
                 href={'/category'}
                 passHref
-                className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
+                className='mb-3 text-gray-500 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
 
                 {locale.COMMON.MORE} <i className='fas fa-angle-double-right'/>
 
@@ -53,7 +53,7 @@ const SideBar = (props) => {
               <Link
                 href={'/tag'}
                 passHref
-                className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
+                className='text-gray-500 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
 
                 {locale.COMMON.MORE} <i className='fas fa-angle-double-right'/>
 
diff --git a/themes/next/components/TopNav.js b/themes/next/components/TopNav.js
index 23839a84..9cf2a1aa 100644
--- a/themes/next/components/TopNav.js
+++ b/themes/next/components/TopNav.js
@@ -56,7 +56,7 @@ const TopNav = (props) => {
   }
 
   const { searchModal } = useNextGlobal()
-  const showSeachModal = () => {
+  const showSearchModal = () => {
     if (siteConfig('ALGOLIA_APP_ID')) {
       searchModal?.current?.openSearch()
     } else {
@@ -73,7 +73,7 @@ const TopNav = (props) => {
                     <Link
                         href={'/category'}
                         passHref
-                        className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
+                        className='mb-3 text-gray-500 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
 
                         {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
 
@@ -90,7 +90,7 @@ const TopNav = (props) => {
                     <Link
                         href={'/tag'}
                         passHref
-                        className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
+                        className='text-gray-500 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
 
                         {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
 
@@ -123,8 +123,8 @@ const TopNav = (props) => {
 
                     {/* 右侧功能 */}
                     <div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-                        <div className="cursor-pointer block lg:hidden" onClick={showSeachModal}>
-                            <i className="mr-2 fas fa-search" />{locale.NAV.SEARCH}
+                        <div className="cursor-pointer block lg:hidden" onClick={showSearchModal}>
+                            <i className="mr-2 fas fa-search" />
                         </div>
                     </div>
                 </div>
diff --git a/themes/next/index.js b/themes/next/index.js
index e311c516..6b6c69b9 100644
--- a/themes/next/index.js
+++ b/themes/next/index.js
@@ -21,12 +21,13 @@ import { useRouter } from 'next/router'
 import ArticleDetail from './components/ArticleDetail'
 import Link from 'next/link'
 import BlogListBar from './components/BlogListBar'
-import { Transition } from '@headlessui/react'
 import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
 import CommonHead from '@/components/CommonHead'
 import { siteConfig } from '@/lib/config'
 import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
+import Announcement from './components/Announcement'
+import Card from './components/Card'
 
 // 主题全局状态
 const ThemeGlobalNext = createContext()
@@ -39,7 +40,6 @@ export const useNextGlobal = () => useContext(ThemeGlobalNext)
  */
 const LayoutBase = (props) => {
   const { children, headerSlot, rightAreaSlot, meta, post } = props
-  const { onLoading } = useGlobal()
   const targetRef = useRef(null)
   const floatButtonGroup = useRef(null)
   const [showRightFloat, switchShow] = useState(false)
@@ -108,19 +108,7 @@ const LayoutBase = (props) => {
 
                 {/* 中央内容 */}
                 <section id='container-inner' className={`${siteConfig('NEXT_NAV_TYPE', null, CONFIG) !== 'normal' ? 'mt-24' : ''} lg:max-w-3xl xl:max-w-4xl flex-grow md:mt-0 min-h-screen w-full relative z-10`} ref={targetRef}>
-                    <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"
-                        unmount={false}
-                    >
-                        {children}
-                    </Transition>
+                    {children}
                 </section>
 
                 {/* 右侧栏样式 */}
@@ -157,7 +145,20 @@ const LayoutBase = (props) => {
  * @returns
  */
 const LayoutIndex = (props) => {
-  return <LayoutPostList {...props} />
+  const { notice } = props
+  return <>
+        {/* 首页移动端顶部显示公告 */}
+        <Card className='my-2 lg:hidden'>
+            <Announcement post={notice} />
+        </Card>
+
+        <BlogListBar {...props} />
+
+        {siteConfig('POST_LIST_STYLE') !== 'page'
+          ? <BlogPostListScroll {...props} showSummary={true} />
+          : <BlogPostListPage {...props} />
+        }
+    </>
 }
 
 /**