diff --git a/components/ExternalPlugins.js b/components/ExternalPlugins.js
index 2b1f1cd0..768cc384 100644
--- a/components/ExternalPlugins.js
+++ b/components/ExternalPlugins.js
@@ -171,14 +171,13 @@ const ExternalPlugin = (props) => {
         {CLARITY_ID && (<>
           <script async dangerouslySetInnerHTML={{
             __html: `
-            (function(c,l,a,r,i,t,y){
-                c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-                t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-                y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-            })(window, document, "clarity", "script", "${CLARITY_ID}");
-            `
-          }}
-          />
+                (function(c,l,a,r,i,t,y){
+                    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+                    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+                    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+                })(window, document, "clarity", "script", "${CLARITY_ID}");
+                `
+          }} />
         </>)}
 
         {COMMENT_DAO_VOICE_ID && (<>
diff --git a/themes/example/components/BlogPostCard.js b/themes/example/components/BlogPostCard.js
index 5b690743..cd330a83 100644
--- a/themes/example/components/BlogPostCard.js
+++ b/themes/example/components/BlogPostCard.js
@@ -21,7 +21,7 @@ const BlogPostCard = ({ post }) => {
                 by <a href="#" className="text-gray-700 dark:text-gray-300">{siteConfig('AUTHOR')}</a> on {post.date?.start_date || post.createdTime}
                 <TwikooCommentCount post={post} className='pl-1'/>
                 <span className="font-bold mx-1"> | </span>
-                <a href={`/category${post.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{post.category}</a>
+                <Link href={`/category/${post.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{post.category}</Link>
                 {/* <span className="font-bold mx-1"> | </span> */}
                 {/* <a href="#" className="text-gray-700">2 Comments</a> */}
             </div>
diff --git a/themes/example/index.js b/themes/example/index.js
index 118a1d75..fde016f7 100644
--- a/themes/example/index.js
+++ b/themes/example/index.js
@@ -36,8 +36,23 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, slotTop, meta } = props
+  const { children, meta } = props
   const { onLoading, fullWidth } = useGlobal()
+  const router = useRouter()
+  const { category, tag } = props
+  // 顶部如果是按照分类或标签查看文章列表，列表顶部嵌入一个横幅
+  // 如果是搜索，则列表顶部嵌入 搜索框
+  let slotTop = null
+  if (category) {
+    slotTop = <div className='pb-12'><i className="mr-1 fas fa-folder-open" />{category}</div>
+  } else if (tag) {
+    slotTop = <div className='pb-12'>#{tag}</div>
+  } else if (props.slotTop) {
+    slotTop = props.slotTop
+  } else if (router.route==='/search'){
+   // 嵌入一个搜索框在顶部 
+   slotTop = <div className='pb-12'><SearchInput {...props} /></div>
+  }
 
   // 增加一个状态以触发 Transition 组件的动画
   //   const [showTransition, setShowTransition] = useState(true)
@@ -121,21 +136,11 @@ const LayoutIndex = props => {
  * @returns
  */
 const LayoutPostList = props => {
-  const { category, tag } = props
-  // 顶部如果是按照分类或标签查看文章列表，列表顶部嵌入一个横幅
-  // 如果是搜索，则列表顶部嵌入 搜索框
-  let slotTop = null
-  if (category) {
-    slotTop = <div className='pb-12'><i className="mr-1 fas fa-folder-open" />{category}</div>
-  } else if (tag) {
-    slotTop = <div className='pb-12'>#{tag}</div>
-  } else if (props.slotTop) {
-    slotTop = props.slotTop
-  }
+
   return (
-        <div {...props} slotTop={slotTop}>
+        <>
             {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-        </div>
+        </>
   )
 }
 
@@ -147,7 +152,7 @@ const LayoutPostList = props => {
 const LayoutSlug = props => {
   const { post, lock, validPassword } = props
   return (
-        <div {...props}>
+        <>
             {lock
               ? <ArticleLock validPassword={validPassword} />
               : <div id="article-wrapper" className="px-2">
@@ -156,7 +161,7 @@ const LayoutSlug = props => {
                     <ShareBar post={post} />
                     <Comment frontMatter={post} />
                 </div>}
-        </div>
+        </>
   )
 }
 
@@ -166,7 +171,7 @@ const LayoutSlug = props => {
  * @returns
  */
 const Layout404 = (props) => {
-  return <div {...props}>404 Not found.</div>
+  return <>404 Not found.</>
 }
 
 /**
@@ -176,8 +181,6 @@ const Layout404 = (props) => {
  */
 const LayoutSearch = props => {
   const { keyword } = props
-  // 嵌入一个搜索框在顶部
-  const slotTop = <div className='pb-12'><SearchInput {...props} /></div>
   const router = useRouter()
   useEffect(() => {
     if (isBrowser) {
@@ -196,7 +199,7 @@ const LayoutSearch = props => {
     }
   }, [router])
 
-  return <LayoutPostList slotTop={slotTop} {...props} />
+  return <LayoutPostList {...props} />
 }
 
 /**
@@ -206,15 +209,13 @@ const LayoutSearch = props => {
  */
 const LayoutArchive = props => {
   const { archivePosts } = props
-  return (
-        <div {...props}>
+  return (<>
             <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
                 {Object.keys(archivePosts).map(archiveTitle => (
                     <BlogListGroupByDate key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />
                 ))}
             </div>
-        </div>
-  )
+        </>)
 }
 
 /**
@@ -225,11 +226,11 @@ const LayoutArchive = props => {
 const LayoutCategoryIndex = props => {
   const { categoryOptions } = props
   return (
-        <div {...props}>
+        <>
             <div id='category-list' className='duration-200 flex flex-wrap'>
                 {categoryOptions?.map(category => <CategoryItem key={category.name} category={category} />)}
             </div>
-        </div>
+        </>
   )
 }
 
@@ -241,11 +242,11 @@ const LayoutCategoryIndex = props => {
 const LayoutTagIndex = (props) => {
   const { tagOptions } = props
   return (
-        <div {...props}>
+        <>
             <div id='tags-list' className='duration-200 flex flex-wrap'>
                 {tagOptions.map(tag => <TagItem key={tag.name} tag={tag} />)}
             </div>
-        </div>
+        </>
   )
 }
 
diff --git a/themes/fukasawa/index.js b/themes/fukasawa/index.js
index 7ce9763f..8587daad 100644
--- a/themes/fukasawa/index.js
+++ b/themes/fukasawa/index.js
@@ -126,12 +126,10 @@ const LayoutIndex = (props) => {
  * @param {*} props
             */
 const LayoutPostList = (props) => {
-  return <div {...props}>
-
+  return <>
         <div className='w-full p-2'><WWAds className='w-full' orientation='horizontal'/></div>
-
          {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-    </div>
+    </>
 }
 
 /**
@@ -142,9 +140,9 @@ const LayoutPostList = (props) => {
 const LayoutSlug = (props) => {
   const { lock, validPassword } = props
   return (
-        <div {...props} >
+        <>
             {lock ? <ArticleLock validPassword={validPassword} /> : <ArticleDetail {...props} />}
-        </div>
+        </>
   )
 }
 
@@ -174,7 +172,7 @@ const LayoutSearch = props => {
  */
 const LayoutArchive = (props) => {
   const { archivePosts } = props
-  return <div {...props}>
+  return <>
         <div className="mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-gray-800 shadow-md min-h-full">
             {Object.keys(archivePosts).map(archiveTitle => (
                 <BlogArchiveItem
@@ -184,7 +182,7 @@ const LayoutArchive = (props) => {
                 />
             ))}
         </div>
-    </div>
+    </>
 }
 
 /**
@@ -193,7 +191,7 @@ const LayoutArchive = (props) => {
             * @returns
             */
 const Layout404 = props => {
-  return <div {...props}>404</div>
+  return <>404</>
 }
 
 /**
@@ -205,7 +203,7 @@ const LayoutCategoryIndex = (props) => {
   const { locale } = useGlobal()
   const { categoryOptions } = props
   return (
-        <div {...props}>
+        <>
             <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
                 <div className='dark:text-gray-200 mb-5'>
                     <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
@@ -227,7 +225,7 @@ const LayoutCategoryIndex = (props) => {
                     })}
                 </div>
             </div>
-        </div>
+        </>
   )
 }
 
@@ -239,7 +237,7 @@ const LayoutCategoryIndex = (props) => {
 const LayoutTagIndex = (props) => {
   const { locale } = useGlobal()
   const { tagOptions } = props
-  return <div {...props} >
+  return <>
         <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
             <div className='dark:text-gray-200 mb-5'><i className='mr-4 fas fa-tag' />{locale.COMMON.TAGS}:</div>
             <div id="tags-list" className="duration-200 flex flex-wrap ml-8">
@@ -252,7 +250,7 @@ const LayoutTagIndex = (props) => {
                 })}
             </div>
         </div>
-    </div>
+    </>
 }
 
 export {
diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js
index 57d652c9..69aeca1a 100644
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -193,7 +193,7 @@ const LayoutIndex = (props) => {
     })
   }, [])
 
-  return <div {...props} />
+  return <></>
 }
 
 /**
@@ -203,9 +203,7 @@ const LayoutIndex = (props) => {
  * @returns
  */
 const LayoutPostList = (props) => {
-  return <div {...props} >
-            <div className='mt-10'><BlogPostListPage {...props} /></div>
-    </div>
+  return <></>
 }
 
 /**
@@ -217,7 +215,7 @@ const LayoutSlug = (props) => {
   const { post, prev, next, lock, validPassword } = props
 
   return (
-        <div {...props} >
+        <>
             {/* 文章锁 */}
             {lock && <ArticleLock validPassword={validPassword} />}
 
@@ -250,7 +248,7 @@ const LayoutSlug = (props) => {
 
                 <TocDrawer {...props} />
             </div>}
-        </div>
+        </>
   )
 }
 
@@ -261,7 +259,7 @@ const LayoutSlug = (props) => {
  * @returns
  */
 const LayoutSearch = (props) => {
-  return <div {...props}></div>
+  return <></>
 }
 
 /**
@@ -273,20 +271,20 @@ const LayoutSearch = (props) => {
 const LayoutArchive = (props) => {
   const { archivePosts } = props
 
-  return <div {...props}>
+  return <>
         <div className="mb-10 pb-20 md:py-12 py-3  min-h-full">
             {Object.keys(archivePosts)?.map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
         </div>
-  </div>
+  </>
 }
 
 /**
  * 404
  */
 const Layout404 = props => {
-  return <div {...props}>
+  return <>
         <div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
-    </div>
+    </>
 }
 
 /**
@@ -295,7 +293,7 @@ const Layout404 = props => {
 const LayoutCategoryIndex = (props) => {
   const { categoryOptions } = props
   const { locale } = useGlobal()
-  return <div {...props}>
+  return <>
      <div className='bg-white dark:bg-gray-700 py-10'>
                 <div className='dark:text-gray-200 mb-5'>
                     <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
@@ -317,7 +315,7 @@ const LayoutCategoryIndex = (props) => {
                     })}
                 </div>
             </div>
-  </div>
+  </>
 }
 
 /**
diff --git a/themes/matery/index.js b/themes/matery/index.js
index cbe23823..80ed61ee 100644
--- a/themes/matery/index.js
+++ b/themes/matery/index.js
@@ -42,9 +42,9 @@ import { siteConfig } from '@/lib/config'
 const LayoutBase = props => {
   const { children, meta, siteInfo, post } = props
   const { onLoading, fullWidth } = useGlobal()
-
-  const containerSlot= <Announcement {...props} /> 
-  const headerSlot= siteConfig('MATERY_HOME_BANNER_ENABLE', null, CONFIG) ? <Hero {...props} /> : null 
+  const router = useRouter()
+  const containerSlot= router.route==='/' ? <Announcement {...props} /> : <BlogListBar {...props} />
+  const headerSlot= siteConfig('MATERY_HOME_BANNER_ENABLE', null, CONFIG) && router.route==='/' ? <Hero {...props} /> : null 
 
   return (
         <div id='theme-matery' className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full">
@@ -126,9 +126,9 @@ const LayoutIndex = (props) => {
  */
 const LayoutPostList = (props) => {
   return (
-        <div {...props} containerSlot={<BlogListBar {...props} />}>
+        <>
             {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-        </div>
+        </>
   )
 }
 
diff --git a/themes/next/index.js b/themes/next/index.js
index 9e0b1c4a..0203b749 100644
--- a/themes/next/index.js
+++ b/themes/next/index.js
@@ -32,7 +32,6 @@ import { siteConfig } from '@/lib/config'
  * @returns {JSX.Element}
  * @constructor
  */
-let counter = 0
 const LayoutBase = (props) => {
   const { children, headerSlot, floatSlot, rightAreaSlot, meta } = props
   const { onLoading } = useGlobal()
@@ -40,9 +39,6 @@ const LayoutBase = (props) => {
   const floatButtonGroup = useRef(null)
   const [showRightFloat, switchShow] = useState(false)
   const [percent, changePercent] = useState(0) // 页面阅读百分比
-  useEffect(()=>{
-    console.log('sidebar 渲染次数: ', counter++)
-  }, [])
   const scrollListener = () => {
     const targetRef = document.getElementById('wrapper')
     const clientHeight = targetRef?.clientHeight
@@ -213,7 +209,7 @@ const Layout404 = props => {
     }, 3000)
   }, [])
 
-  return <div {...props}>
+  return <>
         <div className='md:-mt-20 text-black w-full h-screen text-center justify-center content-center items-center flex flex-col'>
             <div className='dark:text-gray-200'>
                 <h2 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'><i className='mr-2 fas fa-spinner animate-spin' />404</h2>
@@ -222,7 +218,7 @@ const Layout404 = props => {
                 </div>
             </div>
         </div>
-    </div>
+    </>
 }
 
 /**