theme 优化

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)
   }

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>
+        </>
   )
 }