From b5bfdcba4be2d9de00a2541ac623624e9afe457f Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Tue, 30 Jan 2024 18:05:37 +0800
Subject: [PATCH] =?UTF-8?q?theme=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/_document.js                        |  1 +
 themes/gitbook/index.js                   |  4 +-
 themes/hexo/index.js                      | 51 ++++++++++++-----------
 themes/landing/index.js                   | 21 +++++-----
 themes/matery/index.js                    | 38 +++++++++--------
 themes/medium/index.js                    | 29 ++++++-------
 themes/nav/components/MenuItem.js         |  4 +-
 themes/nav/index.js                       | 30 ++++++-------
 themes/next/components/Card.js            | 19 +++++----
 themes/next/index.js                      | 50 +++++++++++-----------
 themes/nobelium/components/BlogListBar.js |  3 +-
 themes/nobelium/index.js                  | 45 ++++++++++----------
 themes/plog/components/BlogListBar.js     | 39 -----------------
 themes/plog/components/Modal.js           |  3 +-
 themes/plog/index.js                      | 24 +++++------
 themes/simple/index.js                    | 24 +++++------
 16 files changed, 180 insertions(+), 205 deletions(-)
 delete mode 100644 themes/plog/components/BlogListBar.js

diff --git a/pages/_document.js b/pages/_document.js
index 976a45fb..96c999c3 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -20,6 +20,7 @@ class MyDocument extends Document {
                   </>}
 
                   {BLOG.FONT_URL?.map((fontUrl, index) => {
+                    console.log(fontUrl)
                     if (fontUrl.endsWith('.css')) {
                       return <link key={index} rel="stylesheet" href={fontUrl} />
                     } else {
diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js
index 69aeca1a..ccef346b 100644
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -325,7 +325,7 @@ const LayoutTagIndex = (props) => {
   const { tagOptions } = 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-tag" />
@@ -341,7 +341,7 @@ const LayoutTagIndex = (props) => {
                     })}
                 </div>
             </div>
-  </div>
+  </>
 }
 
 export {
diff --git a/themes/hexo/index.js b/themes/hexo/index.js
index 3664a2a7..18a7daf2 100644
--- a/themes/hexo/index.js
+++ b/themes/hexo/index.js
@@ -46,12 +46,25 @@ export const useHexoGlobal = () => useContext(ThemeGlobalHexo)
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, floatSlot, slotTop, meta, className } = props
+  const { post , children, slotTop, meta, className } = props
   const { onLoading, fullWidth } = useGlobal()
 
   const router = useRouter()
-  const headerSlot = router.route==='/'  &&  siteConfig('HEXO_HOME_BANNER_ENABLE', null, CONFIG) ? <Hero {...props} /> : null
+  const headerSlot = post
+    ?  <PostHeader {...props} /> : (router.route==='/'  &&  siteConfig('HEXO_HOME_BANNER_ENABLE', null, CONFIG)
+    ? <Hero {...props} /> : null)
   
+  const floatSlot = <>
+        {post?.toc?.length > 1 && <div className="block lg:hidden">
+            <TocDrawerButton
+                onClick={() => {
+                  drawerRight?.current?.handleSwitchVisible()
+                }}
+            />
+        </div>}
+        <JumpToCommentButton />
+    </>
+
   // Algolia搜索框
   const searchModal = useRef(null)
 
@@ -137,7 +150,7 @@ const LayoutIndex = (props) => {
  * @returns
  */
 const LayoutPostList = (props) => {
-  return <div {...props} className='pt-8'>
+  return <div className='pt-8'>
         <SlotBar {...props} />
         {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
     </div>
@@ -167,7 +180,7 @@ const LayoutSearch = props => {
   })
 
   return (
-        <div {...props} currentSearch={currentSearch} className='pt-8'>
+        <div className='pt-8'>
             {!currentSearch
               ? <SearchNav {...props} />
               : <div id="posts-wrapper"> {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}  </div>}
@@ -182,7 +195,7 @@ const LayoutSearch = props => {
  */
 const LayoutArchive = (props) => {
   const { archivePosts } = props
-  return <div {...props} className='pt-8'>
+  return <div className='pt-8'>
         <Card className='w-full'>
             <div className="mb-10 pb-20 bg-white md:p-12 p-3 min-h-full dark:bg-hexo-black-gray">
                 {Object.keys(archivePosts).map(archiveTitle => (
@@ -205,22 +218,10 @@ const LayoutArchive = (props) => {
 const LayoutSlug = props => {
   const { post, lock, validPassword } = props
   const drawerRight = useRef(null)
-
-  const targetRef = isBrowser ? document.getElementById('article-wrapper') : null
-
-  const floatSlot = <>
-        {post?.toc?.length > 1 && <div className="block lg:hidden">
-            <TocDrawerButton
-                onClick={() => {
-                  drawerRight?.current?.handleSwitchVisible()
-                }}
-            />
-        </div>}
-        <JumpToCommentButton />
-    </>
+  const tocRef = isBrowser ? document.getElementById('article-wrapper') : null
 
   return (
-        <div {...props} headerSlot={<PostHeader {...props} />} showCategory={false} showTag={false} floatSlot={floatSlot} >
+        <>
             <div className="w-full lg:hover:shadow lg:border rounded-t-xl lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black article">
                 {lock && <ArticleLock validPassword={validPassword} />}
 
@@ -252,10 +253,10 @@ const LayoutSlug = props => {
             </div>
 
             <div className='block lg:hidden'>
-                <TocDrawer post={post} cRef={drawerRight} targetRef={targetRef} />
+                <TocDrawer post={post} cRef={drawerRight} targetRef={tocRef} />
             </div>
 
-        </div>
+        </>
   )
 }
 
@@ -280,7 +281,7 @@ const Layout404 = props => {
     }, 3000)
   })
   return (
-        <div {...props}>
+        <>
             <div className="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">
@@ -291,7 +292,7 @@ const Layout404 = props => {
                     </div>
                 </div>
             </div>
-        </div>
+        </>
   )
 }
 
@@ -304,7 +305,7 @@ const LayoutCategoryIndex = props => {
   const { categoryOptions } = props
   const { locale } = useGlobal()
   return (
-        <div {...props} className='mt-8'>
+        <div className='mt-8'>
             <Card className="w-full min-h-screen">
                 <div className="dark:text-gray-200 mb-5 mx-3">
                     <i className="mr-4 fas fa-th" />  {locale.COMMON.CATEGORY}:
@@ -334,7 +335,7 @@ const LayoutTagIndex = props => {
   const { tagOptions } = props
   const { locale } = useGlobal()
   return (
-        <div {...props} className='mt-8'>
+        <div className='mt-8'>
             <Card className='w-full'>
                 <div className="dark:text-gray-200 mb-5 ml-4">
                     <i className="mr-4 fas fa-tag" /> {locale.COMMON.TAGS}:
diff --git a/themes/landing/index.js b/themes/landing/index.js
index 86ef856d..51bf84ff 100644
--- a/themes/landing/index.js
+++ b/themes/landing/index.js
@@ -57,13 +57,13 @@ const LayoutBase = (props) => {
  */
 const LayoutIndex = (props) => {
   return (
-        <div {...props}>
+        <>
             <Hero />
             <Features />
             <FeaturesBlocks />
             <Testimonials />
             <Newsletter />
-        </div>
+        </>
   )
 }
 
@@ -81,21 +81,20 @@ const LayoutSlug = (props) => {
     return <div id='theme-landing'><Loading /></div>
   }
 
-  return <div {...props}>
-
+  return <>
         <div id='container-inner' className='mx-auto max-w-screen-lg p-12'>
             <NotionPage {...props} />
         </div>
-    </div>
+    </>
 }
 
 // 其他布局暂时留空
-const LayoutSearch = (props) => <div {...props}><Hero /></div>
-const LayoutArchive = (props) => <div {...props}><Hero /></div>
-const Layout404 = (props) => <div {...props}><Hero /></div>
-const LayoutCategoryIndex = (props) => <div {...props}><Hero /></div>
-const LayoutPostList = (props) => <div {...props}><Hero /></div>
-const LayoutTagIndex = (props) => <div {...props}><Hero /></div>
+const LayoutSearch = (props) => <><Hero /></>
+const LayoutArchive = (props) => <><Hero /></>
+const Layout404 = (props) => <><Hero /></>
+const LayoutCategoryIndex = (props) => <><Hero /></>
+const LayoutPostList = (props) => <><Hero /></>
+const LayoutTagIndex = (props) => <><Hero /></>
 
 export {
   CONFIG as THEME_CONFIG,
diff --git a/themes/matery/index.js b/themes/matery/index.js
index 80ed61ee..ce099cd7 100644
--- a/themes/matery/index.js
+++ b/themes/matery/index.js
@@ -44,7 +44,10 @@ const LayoutBase = props => {
   const { onLoading, fullWidth } = useGlobal()
   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 
+  const headerSlot= siteConfig('MATERY_HOME_BANNER_ENABLE', null, CONFIG) && router.route==='/' 
+  ? <Hero {...props} /> : (post && !fullWidth ? <PostHeader {...props} /> : null)
+
+  const floatRightBottom = post ? <JumpToCommentButton /> : null
 
   return (
         <div id='theme-matery' className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full">
@@ -61,7 +64,7 @@ const LayoutBase = props => {
                 appear={true}
                 enter="transition ease-in-out duration-700 transform order-first"
                 enterFrom="opacity-0 -translate-y-16"
-                enterTo="opacity-100"
+                enterTo="opacity-100 w-full"
                 leave="transition ease-in-out duration-300 transform"
                 leaveFrom="opacity-100 translate-y-0"
                 leaveTo="opacity-0 translate-y-16"
@@ -82,7 +85,7 @@ const LayoutBase = props => {
                         appear={true}
                         enter="transition ease-in-out duration-700 transform order-first"
                         enterFrom="opacity-0 translate-y-16"
-                        enterTo="opacity-100"
+                        enterTo="opacity-100 w-full"
                         leave="transition ease-in-out duration-300 transform"
                         leaveFrom="opacity-100 translate-y-0"
                         leaveTo="opacity-0 -translate-y-16"
@@ -101,7 +104,7 @@ const LayoutBase = props => {
             </div>
 
             {/* 右下角悬浮 */}
-            <RightFloatButtons {...props} />
+            <RightFloatButtons {...props} floatRightBottom={floatRightBottom}/>
 
             {/* 页脚 */}
             <Footer title={siteConfig('TITLE')} />
@@ -155,13 +158,13 @@ const LayoutSearch = props => {
     }
   })
   return (
-        <div {...props} currentSearch={currentSearch}>
+        <>
             {!currentSearch
               ? <SearchNave {...props} />
               : <div id="posts-wrapper">
                     {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
                 </div>}
-        </div>
+        </>
   )
 }
 
@@ -172,7 +175,7 @@ const LayoutSearch = props => {
  */
 const LayoutArchive = (props) => {
   const { archivePosts } = props
-  return <div {...props} headerSlot={<PostHeader {...props} />} >
+  return <>
         <Card className='w-full -mt-32'>
             <div className="mb-10 pb-20 bg-white md:p-12 p-3 min-h-full dark:bg-hexo-black-gray">
                 {Object.keys(archivePosts).map(archiveTitle => (
@@ -184,7 +187,7 @@ const LayoutArchive = (props) => {
                 ))}
             </div>
         </Card>
-    </div>
+    </>
 }
 
 /**
@@ -195,9 +198,8 @@ const LayoutArchive = (props) => {
 const LayoutSlug = props => {
   const { post, lock, validPassword } = props
   const { fullWidth } = useGlobal()
-  const headerSlot = fullWidth ? null : <PostHeader {...props} />
-
-  return (<div {...props} headerSlot={headerSlot} showCategory={false} showTag={false} floatRightBottom={<JumpToCommentButton />}>
+ 
+  return (<>
 
         <div id='inner-wrapper' className={`w-full ${fullWidth ? '' : 'lg:max-w-3xl 2xl:max-w-4xl'}`} >
 
@@ -260,7 +262,7 @@ const LayoutSlug = props => {
 
         </div>
 
-    </div>
+    </>
   )
 }
 
@@ -283,7 +285,7 @@ const Layout404 = props => {
     }, 3000)
   })
   return (
-        <div {...props}>
+        <>
             <div className="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">
@@ -294,7 +296,7 @@ const Layout404 = props => {
                     </div>
                 </div>
             </div>
-        </div>
+        </>
   )
 }
 
@@ -307,7 +309,7 @@ const LayoutCategoryIndex = props => {
   const { categoryOptions } = props
 
   return (
-        <div {...props} headerSlot={<PostHeader {...props} />} >
+        <>
 
             <div id='inner-wrapper' className='w-full'>
                 <div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black dark:text-gray-300">
@@ -324,7 +326,7 @@ const LayoutCategoryIndex = props => {
                     </div>
                 </div>
             </div>
-        </div>
+        </>
   )
 }
 
@@ -337,7 +339,7 @@ const LayoutTagIndex = props => {
   const { tagOptions } = props
   const { locale } = useGlobal()
   return (
-        <div {...props} headerSlot={<PostHeader {...props} />} >
+        <>
             <div id='inner-wrapper' className='w-full drop-shadow-xl'>
 
                 <div className="-mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
@@ -357,7 +359,7 @@ const LayoutTagIndex = props => {
                     </div>
                 </div>
             </div>
-        </div>
+        </>
   )
 }
 
diff --git a/themes/medium/index.js b/themes/medium/index.js
index cb6bf541..8087057c 100644
--- a/themes/medium/index.js
+++ b/themes/medium/index.js
@@ -47,12 +47,14 @@ export const useMediumGlobal = () => useContext(ThemeGlobalMedium)
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, showInfoCard = true, slotRight, slotTop, notice, meta } = props
+  const { children, showInfoCard = true, slotRight, notice, meta } = props
   const { locale } = useGlobal()
   const router = useRouter()
   const [tocVisible, changeTocVisible] = useState(false)
   const { onLoading, fullWidth } = useGlobal()
 
+  const slotTop = <BlogPostBar {...props} />
+
   return (
         <ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible }}>
             {/* SEO相关 */}
@@ -137,10 +139,9 @@ const LayoutIndex = (props) => {
  * @returns
  */
 const LayoutPostList = (props) => {
-  const slotTop = <BlogPostBar {...props} />
-  return <div {...props} slotTop={slotTop}>
+  return <>
         {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-    </div>
+    </>
 }
 
 /**
@@ -220,7 +221,7 @@ const LayoutSearch = (props) => {
     }
   }, [])
 
-  return <div {...props}>
+  return <>
 
         {/* 搜索导航栏 */}
         <div className='py-12'>
@@ -236,7 +237,7 @@ const LayoutSearch = (props) => {
         {currentSearch && <div>
             {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
         </div>}
-    </div>
+    </>
 }
 
 /**
@@ -247,12 +248,12 @@ const LayoutSearch = (props) => {
 const LayoutArchive = props => {
   const { archivePosts } = props
   return (
-        <div {...props}>
+        <>
             <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>
+        </>
   )
 }
 
@@ -262,9 +263,9 @@ const LayoutArchive = props => {
  * @returns
  */
 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>
+    </>
 }
 
 /**
@@ -276,7 +277,7 @@ const LayoutCategoryIndex = (props) => {
   const { categoryOptions } = props
   const { locale } = useGlobal()
   return (
-        <div {...props}>
+        <>
             <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}:
@@ -298,7 +299,7 @@ const LayoutCategoryIndex = (props) => {
                     })}
                 </div>
             </div>
-        </div>
+        </>
   )
 }
 
@@ -311,7 +312,7 @@ const LayoutTagIndex = props => {
   const { tagOptions } = props
   const { locale } = useGlobal()
   return (
-        <div {...props}>
+        <>
             <div className="bg-white dark:bg-gray-700 py-10">
                 <div className="dark:text-gray-200 mb-5">
                     <i className="mr-4 fas fa-tag" />
@@ -327,7 +328,7 @@ const LayoutTagIndex = props => {
                     })}
                 </div>
             </div>
-        </div>
+        </>
   )
 }
 
diff --git a/themes/nav/components/MenuItem.js b/themes/nav/components/MenuItem.js
index 9eeb5ecf..84d2a42e 100644
--- a/themes/nav/components/MenuItem.js
+++ b/themes/nav/components/MenuItem.js
@@ -50,9 +50,9 @@ export const MenuItem = ({ link }) => {
                 {
                     link?.subMenus?.map((sLink, index) => (
                         <div key={index} className='nav-submenu'>
-                            <a href={sLink?.to}>
+                            <Link href={sLink?.to}>
                                 <span className='dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-xs font-bold'><i className={`text-xs mr-1 ${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'}`} />{sLink.title}</span>
-                            </a>
+                            </Link>
                         </div>
                     ))
                 }
diff --git a/themes/nav/index.js b/themes/nav/index.js
index 9c98dab2..bf6e4662 100755
--- a/themes/nav/index.js
+++ b/themes/nav/index.js
@@ -172,10 +172,10 @@ const LayoutPostListIndex = props => {
   // const { customMenu, children, post, allNavPages, categoryOptions, slotLeft, slotRight, slotTop, meta } = props
   // const [filteredNavPages, setFilteredNavPages] = useState(allNavPages)
   return (
-    <div {...props} >
+    <>
         <Announcement {...props} />
         <BlogPostListAll { ...props } />
-    </div>
+    </>
   )
 }
 
@@ -189,7 +189,7 @@ const LayoutPostList = props => {
   // 顶部如果是按照分类或标签查看文章列表，列表顶部嵌入一个横幅
   // 如果是搜索，则列表顶部嵌入 搜索框
   return (
-    <div {...props} >
+    <>
         <div className='w-full max-w-7xl mx-auto justify-center mt-8'>
             <div id='posts-wrapper' class='card-list grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'>
                 {posts?.map(post => (
@@ -197,7 +197,7 @@ const LayoutPostList = props => {
                 ))}
             </div>
         </div>
-    </div>
+    </>
   )
 }
 
@@ -210,7 +210,7 @@ const LayoutSlug = (props) => {
   const { post, lock, validPassword } = props
 
   return (
-        <div {...props} >
+        <>
             {/* 文章锁 */}
             {lock && <ArticleLock validPassword={validPassword} />}
 
@@ -244,7 +244,7 @@ const LayoutSlug = (props) => {
 
                 <TocDrawer {...props} />
             </div>}
-        </div>
+        </>
   )
 }
 
@@ -255,7 +255,7 @@ const LayoutSlug = (props) => {
  * @returns
  */
 const LayoutSearch = (props) => {
-  return <div {...props}></div>
+  return <></>
 }
 
 /**
@@ -267,20 +267,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>
+    </>
 }
 
 /**
@@ -289,7 +289,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}:
@@ -311,7 +311,7 @@ const LayoutCategoryIndex = (props) => {
                     })}
                 </div>
             </div>
-  </div>
+  </>
 }
 
 /**
@@ -321,7 +321,7 @@ const LayoutTagIndex = (props) => {
   const { tagOptions } = 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-tag" />
@@ -337,7 +337,7 @@ const LayoutTagIndex = (props) => {
                     })}
                 </div>
             </div>
-  </div>
+  </>
 }
 
 export {
diff --git a/themes/next/components/Card.js b/themes/next/components/Card.js
index a1c507b6..de70f580 100644
--- a/themes/next/components/Card.js
+++ b/themes/next/components/Card.js
@@ -1,10 +1,15 @@
+/**
+ * 卡片组件
+ * @param {*} param0 
+ * @returns 
+ */
 const Card = (props) => {
-  const { children, headerSlot } = props
-  return <div {...props}>
-    <>{headerSlot}</>
-    <section className="shadow px-2 py-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200">
-        {children}
-    </section>
-  </div>
+    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}
+        </section>
+    </div>
 }
 export default Card
diff --git a/themes/next/index.js b/themes/next/index.js
index 0203b749..35a6091a 100644
--- a/themes/next/index.js
+++ b/themes/next/index.js
@@ -33,7 +33,7 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 const LayoutBase = (props) => {
-  const { children, headerSlot, floatSlot, rightAreaSlot, meta } = props
+  const { children, headerSlot, rightAreaSlot, meta, post } = props
   const { onLoading } = useGlobal()
   const targetRef = useRef(null)
   const floatButtonGroup = useRef(null)
@@ -67,6 +67,15 @@ const LayoutBase = (props) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [showRightFloat])
 
+  // 悬浮抽屉
+  const drawerRight = useRef(null)
+  const floatSlot = <div className='block lg:hidden'>
+    <TocDrawerButton onClick={() => {
+        drawerRight?.current?.handleSwitchVisible()
+    }} />
+ </div>
+  const tocRef = isBrowser ? document.getElementById('article-wrapper') : null
+
   return (
         <div id='theme-next'>
             {/* SEO相关 */}
@@ -105,8 +114,14 @@ const LayoutBase = (props) => {
 
                 {/* 右侧栏样式 */}
                 {siteConfig('NEXT_RIGHT_BAR', null, CONFIG) && <SideAreaRight targetRef={targetRef} slot={rightAreaSlot} {...props} />}
+            
             </main>
 
+            {/* 悬浮目录按钮 */}
+            {post && <div className='block lg:hidden'>
+                <TocDrawer post={post} cRef={drawerRight} targetRef={tocRef} />
+            </div>}
+
             {/* 右下角悬浮 */}
             <div ref={floatButtonGroup} className='right-8 bottom-12 lg:right-2 fixed justify-end z-20 font-sans'>
                 <div className={(showRightFloat ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp rounded-md glassmorphism justify-center duration-500  animate__faster flex space-x-2 items-center cursor-pointer '}>
@@ -139,7 +154,7 @@ const LayoutIndex = (props) => {
  * @returns
  */
 const LayoutPostList = (props) => {
-  return <div {...props} >
+  return <>
 
         <BlogListBar {...props} />
 
@@ -147,7 +162,7 @@ const LayoutPostList = (props) => {
           ? <BlogPostListScroll {...props} showSummary={true} />
           : <BlogPostListPage {...props} />
         }
-    </div>
+    </>
 }
 
 /**
@@ -173,7 +188,7 @@ const LayoutSearch = (props) => {
   }, [])
 
   return (
-        <div {...props} >
+        <>
             <StickyBar>
                 <div className="p-4 dark:text-gray-200">
                     <i className="mr-1 fas fa-search" />{' '}
@@ -186,7 +201,7 @@ const LayoutSearch = (props) => {
                   : <BlogPostListPage {...props} />
                 }
             </div>
-        </div>
+        </>
   )
 }
 
@@ -230,7 +245,7 @@ const LayoutArchive = (props) => {
   const { archivePosts } = props
 
   return (
-        <div {...props}>
+        <>
             <div className="mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-hexo-black-gray shadow-md min-h-full">
                 {Object.keys(archivePosts).map(archiveTitle => (
                     <BlogPostArchive
@@ -240,7 +255,7 @@ const LayoutArchive = (props) => {
                     />
                 ))}
             </div>
-        </div>
+        </>
   )
 }
 
@@ -251,27 +266,14 @@ const LayoutArchive = (props) => {
  */
 const LayoutSlug = (props) => {
   const { post, lock, validPassword } = props
-  const drawerRight = useRef(null)
-  const targetRef = isBrowser ? document.getElementById('article-wrapper') : null
-  const floatSlot = <div className='block lg:hidden'>
-        <TocDrawerButton onClick={() => {
-          drawerRight?.current?.handleSwitchVisible()
-        }} />
-    </div>
-
   return (
-        <div {...props} floatSlot={floatSlot}>
+        <>
 
             {post && !lock && <ArticleDetail {...props} />}
 
             {post && lock && <ArticleLock validPassword={validPassword} />}
 
-            {/* 悬浮目录按钮 */}
-            {post && <div className='block lg:hidden'>
-                <TocDrawer post={post} cRef={drawerRight} targetRef={targetRef} />
-            </div>}
-
-        </div>
+        </>
   )
 }
 
@@ -318,7 +320,7 @@ const LayoutCategoryIndex = (props) => {
 const LayoutTagIndex = (props) => {
   const { tagOptions } = props
   const { locale } = useGlobal()
-  return <div {...props}>
+  return <>
         <div className='bg-white dark:bg-hexo-black-gray px-10 py-10 shadow h-full'>
             <div className='dark:text-gray-200 mb-5'><i className='fas fa-tags mr-4' />{locale.COMMON.TAGS}:</div>
             <div id='tags-list' className='duration-200 flex flex-wrap'>
@@ -327,7 +329,7 @@ const LayoutTagIndex = (props) => {
                 })}
             </div>
         </div>
-    </div>
+    </>
 }
 
 export {
diff --git a/themes/nobelium/components/BlogListBar.js b/themes/nobelium/components/BlogListBar.js
index 69076937..57ca7e7b 100644
--- a/themes/nobelium/components/BlogListBar.js
+++ b/themes/nobelium/components/BlogListBar.js
@@ -1,7 +1,8 @@
+import { useNobeliumGlobal } from '..'
 import Tags from './Tags'
 
 export default function BlogListBar(props) {
-  const { tag, setFilterKey } = props
+  const { tag, setFilterKey } = useNobeliumGlobal()
   const handleSearchChange = (val) => {
     setFilterKey(val)
   }
diff --git a/themes/nobelium/index.js b/themes/nobelium/index.js
index f5152842..83650ae8 100644
--- a/themes/nobelium/index.js
+++ b/themes/nobelium/index.js
@@ -37,14 +37,16 @@ export const useNobeliumGlobal = () => useContext(ThemeGlobalNobelium)
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, post, topSlot, meta } = props
-
+  const { children, post,  meta } = props
   const fullWidth = post?.fullWidth ?? false
   const { onLoading } = useGlobal()
   const searchModal = useRef(null)
+  // 在列表中进行实时过滤
+  const [filterKey, setFilterKey] = useState('')
+  const topSlot= <BlogListBar {...props}/>
 
   return (
-        <ThemeGlobalNobelium.Provider value={{ searchModal }}>
+        <ThemeGlobalNobelium.Provider value={{ searchModal, filterKey, setFilterKey }}>
             <div id='theme-nobelium' className='nobelium relative dark:text-gray-300  w-full  bg-white dark:bg-black min-h-screen flex flex-col'>
                 {/* SEO相关 */}
                 <CommonHead meta={meta} />
@@ -114,10 +116,8 @@ const LayoutIndex = props => {
  * @returns
  */
 const LayoutPostList = props => {
-  const { posts, topSlot } = props
-
-  // 在列表中进行实时过滤
-  const [filterKey, setFilterKey] = useState('')
+  const { posts, topSlot,tag } = props
+  const { filterKey } = useNobeliumGlobal()
   let filteredBlogPosts = []
   if (filterKey && posts) {
     filteredBlogPosts = posts.filter(post => {
@@ -130,10 +130,11 @@ const LayoutPostList = props => {
   }
 
   return (
-        <div {...props} topSlot={<BlogListBar {...props} setFilterKey={setFilterKey} />}>
+        <>
             {topSlot}
+            {tag && <SearchNavBar {...props} />}
             {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} posts={filteredBlogPosts} /> : <BlogListScroll {...props} posts={filteredBlogPosts} />}
-        </div>
+        </>
   )
 }
 
@@ -159,7 +160,7 @@ const LayoutSearch = props => {
   }, [])
 
   // 在列表中进行实时过滤
-  const [filterKey, setFilterKey] = useState('')
+  const {filterKey} = useNobeliumGlobal()
   let filteredBlogPosts = []
   if (filterKey && posts) {
     filteredBlogPosts = posts.filter(post => {
@@ -171,10 +172,10 @@ const LayoutSearch = props => {
     filteredBlogPosts = deepClone(posts)
   }
 
-  return <div {...props} topSlot={<BlogListBar {...props} setFilterKey={setFilterKey} />}>
+  return <>
     <SearchNavBar {...props} />
     {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} posts={filteredBlogPosts} /> : <BlogListScroll {...props} posts={filteredBlogPosts} />}
-  </div>
+  </>
 }
 
 /**
@@ -185,11 +186,11 @@ const LayoutSearch = props => {
 const LayoutArchive = props => {
   const { archivePosts } = props
   return (
-        <div {...props}>
+        <>
             <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
                 {Object.keys(archivePosts).map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
             </div>
-        </div>
+        </>
   )
 }
 
@@ -202,7 +203,7 @@ const LayoutSlug = props => {
   const { post, lock, validPassword } = props
 
   return (
-        <div {...props}>
+        <>
 
             {lock && <ArticleLock validPassword={validPassword} />}
 
@@ -216,7 +217,7 @@ const LayoutSlug = props => {
                 </>
             </div>}
 
-        </div>
+        </>
   )
 }
 
@@ -226,9 +227,9 @@ const LayoutSlug = props => {
  * @returns
  */
 const Layout404 = (props) => {
-  return <div {...props}>
+  return <>
         404 Not found.
-    </div>
+    </>
 }
 
 /**
@@ -240,7 +241,7 @@ const LayoutCategoryIndex = (props) => {
   const { categoryOptions } = props
 
   return (
-        <div {...props}>
+        <>
             <div id='category-list' className='duration-200 flex flex-wrap'>
                 {categoryOptions?.map(category => {
                   return (
@@ -257,7 +258,7 @@ const LayoutCategoryIndex = (props) => {
                   )
                 })}
             </div>
-        </div>
+        </>
   )
 }
 
@@ -269,7 +270,7 @@ const LayoutCategoryIndex = (props) => {
 const LayoutTagIndex = (props) => {
   const { tagOptions } = props
   return (
-        <div {...props}>
+        <>
             <div>
                 <div id='tags-list' className='duration-200 flex flex-wrap'>
                     {tagOptions.map(tag => {
@@ -284,7 +285,7 @@ const LayoutTagIndex = (props) => {
                     })}
                 </div>
             </div>
-        </div>
+        </>
   )
 }
 
diff --git a/themes/plog/components/BlogListBar.js b/themes/plog/components/BlogListBar.js
deleted file mode 100644
index 69076937..00000000
--- a/themes/plog/components/BlogListBar.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import Tags from './Tags'
-
-export default function BlogListBar(props) {
-  const { tag, setFilterKey } = props
-  const handleSearchChange = (val) => {
-    setFilterKey(val)
-  }
-  if (tag) {
-    return (<div className="mb-4">
-            <div className='relative'>
-                <input
-                    type="text"
-                    placeholder={
-                        tag ? `Search in #${tag}` : 'Search Articles'
-                    }
-                    className="outline-none block w-full border px-4 py-2 border-black bg-white text-black dark:bg-night dark:border-white dark:text-white"
-                    onChange={e => handleSearchChange(e.target.value)}
-                />
-                <svg
-                    className="absolute right-3 top-3 h-5 w-5 text-black dark:text-white"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                >
-                    <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                    ></path>
-                </svg>
-            </div>
-            <Tags {...props} />
-        </div>)
-  } else {
-    return <></>
-  }
-}
diff --git a/themes/plog/components/Modal.js b/themes/plog/components/Modal.js
index 24494df7..8c490093 100644
--- a/themes/plog/components/Modal.js
+++ b/themes/plog/components/Modal.js
@@ -5,6 +5,7 @@ import { ArrowPath, ChevronLeft, ChevronRight } from '@/components/HeroIcons'
 import Link from 'next/link'
 import { siteConfig } from '@/lib/config'
 import LazyImage from '@/components/LazyImage'
+import { compressImage } from '@/lib/notion/mapImage'
 
 /**
  * 弹出框
@@ -13,7 +14,7 @@ export default function Modal(props) {
   const { showModal, setShowModal, modalContent, setModalContent } = usePlogGlobal()
   const { siteInfo, posts } = props
   const cancelButtonRef = useRef(null)
-  const img = modalContent?.pageCover || siteInfo?.pageCover
+  const img = compressImage(modalContent?.pageCover || siteInfo?.pageCover, 1200, 85, 'webp')
   const imgRef = useRef(null)
 
   // 添加loading状态
diff --git a/themes/plog/index.js b/themes/plog/index.js
index a777055b..07d34068 100644
--- a/themes/plog/index.js
+++ b/themes/plog/index.js
@@ -98,9 +98,9 @@ const LayoutIndex = props => {
  */
 const LayoutPostList = props => {
   return (
-        <div {...props}>
+        <>
             {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-        </div>
+        </>
   )
 }
 
@@ -137,11 +137,11 @@ const LayoutSearch = props => {
 const LayoutArchive = props => {
   const { archivePosts } = props
   return (
-        <div {...props}>
+        <>
             <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
                 {Object.keys(archivePosts).map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
             </div>
-        </div>
+        </>
   )
 }
 
@@ -154,7 +154,7 @@ const LayoutSlug = props => {
   const { post, lock, validPassword } = props
 
   return (
-        <div {...props}>
+        <>
 
             {lock && <ArticleLock validPassword={validPassword} />}
 
@@ -168,7 +168,7 @@ const LayoutSlug = props => {
                 </>
             </div>}
 
-        </div>
+        </>
   )
 }
 
@@ -178,9 +178,9 @@ const LayoutSlug = props => {
  * @returns
  */
 const Layout404 = (props) => {
-  return <div {...props}>
+  return <>
         404 Not found.
-    </div>
+    </>
 }
 
 /**
@@ -192,7 +192,7 @@ const LayoutCategoryIndex = (props) => {
   const { categoryOptions } = props
 
   return (
-        <div {...props}>
+        <>
             <div id='category-list' className='duration-200 flex flex-wrap'>
                 {categoryOptions?.map(category => {
                   return (
@@ -209,7 +209,7 @@ const LayoutCategoryIndex = (props) => {
                   )
                 })}
             </div>
-        </div>
+        </>
   )
 }
 
@@ -221,7 +221,7 @@ const LayoutCategoryIndex = (props) => {
 const LayoutTagIndex = (props) => {
   const { tagOptions } = props
   return (
-        <div {...props}>
+        <>
             <div>
                 <div id='tags-list' className='duration-200 flex flex-wrap'>
                     {tagOptions.map(tag => {
@@ -236,7 +236,7 @@ const LayoutTagIndex = (props) => {
                     })}
                 </div>
             </div>
-        </div>
+        </>
   )
 }
 
diff --git a/themes/simple/index.js b/themes/simple/index.js
index 36e48586..c4a705a7 100644
--- a/themes/simple/index.js
+++ b/themes/simple/index.js
@@ -120,9 +120,9 @@ const LayoutIndex = props => {
  */
 const LayoutPostList = props => {
   return (
-        <div {...props}>
+        <>
             {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-        </div>
+        </>
   )
 }
 
@@ -161,11 +161,11 @@ const LayoutSearch = props => {
 const LayoutArchive = props => {
   const { archivePosts } = props
   return (
-        <div {...props}>
+        <>
             <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
                 {Object.keys(archivePosts).map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
             </div>
-        </div>
+        </>
   )
 }
 
@@ -179,7 +179,7 @@ const LayoutSlug = props => {
   const { fullWidth } = useGlobal()
 
   return (
-        <div {...props}>
+        <>
 
             {lock && <ArticleLock validPassword={validPassword} />}
 
@@ -208,7 +208,7 @@ const LayoutSlug = props => {
 
             </div>
 
-        </div>
+        </>
   )
 }
 
@@ -218,9 +218,9 @@ const LayoutSlug = props => {
  * @returns
  */
 const Layout404 = (props) => {
-  return <div {...props}>
+  return <>
         404 Not found.
-    </div>
+    </>
 }
 
 /**
@@ -231,7 +231,7 @@ const Layout404 = (props) => {
 const LayoutCategoryIndex = props => {
   const { categoryOptions } = props
   return (
-        <div {...props}>
+        <>
             <div id='category-list' className='duration-200 flex flex-wrap'>
                 {categoryOptions?.map(category => {
                   return (
@@ -248,7 +248,7 @@ const LayoutCategoryIndex = props => {
                   )
                 })}
             </div>
-        </div>
+        </>
   )
 }
 
@@ -260,7 +260,7 @@ 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 => {
                   return (
@@ -276,7 +276,7 @@ const LayoutTagIndex = (props) => {
                   )
                 })}
             </div>
-        </div>
+        </>
   )
 }