fix nobelium主题搜索框丢失

themes/nobelium/components/BlogListPage.js

@@ -13,11 +13,11 @@ export const BlogListPage = props => {
   const currentPage = +page
 
   const showPrev = currentPage > 1
-  const showNext = page < totalPage
+  const showNext = currentPage < totalPage && posts?.length > 0
   const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
 
   return (
-      <div className="w-full md:pr-12 mb-12">
+      <div className="w-full md:pr-12 my-6">
 
             <div id="posts-wrapper">
                 {posts?.map(post => (

themes/nobelium/components/SearchInput.js

@@ -4,7 +4,8 @@ import { useImperativeHandle, useRef, useState } from 'react'
 
 let lock = false
 
-const SearchInput = ({ currentTag, currentSearch, cRef }) => {
+const SearchInput = props => {
+  const { tag, keyword, cRef } = props
   const { locale } = useGlobal()
   const router = useRouter()
   const searchInputRef = useRef(null)
@@ -61,14 +62,14 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
   <input
     ref={searchInputRef}
     type='text'
-    placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
+    placeholder={tag ? `${locale.SEARCH.TAGS} #${tag}` : `${locale.SEARCH.ARTICLES}`}
     className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
     onKeyUp={handleKeyUp}
     onCompositionStart={lockSearchInput}
     onCompositionUpdate={lockSearchInput}
     onCompositionEnd={unLockSearchInput}
     onChange={e => updateSearchKey(e.target.value)}
-    defaultValue={currentSearch || ''}
+    defaultValue={keyword || ''}
   />
 
   <div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'

themes/nobelium/index.js

@@ -45,7 +45,7 @@ const LayoutBase = props => {
 
   return (
         <ThemeGlobalNobelium.Provider value={{ searchModal }}>
-            <div id='theme-nobelium' className='nobelium relative dark:text-gray-300  w-full  bg-white dark:bg-black min-h-screen'>
+            <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} />
                 {/* SEO相关 */}
@@ -144,7 +144,7 @@ const LayoutPostList = props => {
  * @returns
  */
 const LayoutSearch = props => {
-  const { keyword } = props
+  const { keyword, posts } = props
   useEffect(() => {
     if (isBrowser) {
       replaceSearchResult({
@@ -157,7 +157,25 @@ const LayoutSearch = props => {
       })
     }
   }, [])
-  return <LayoutPostList {...props} slotTop={<SearchNavBar {...props} />} />
+
+  // 在列表中进行实时过滤
+  const [filterKey, setFilterKey] = useState('')
+  let filteredBlogPosts = []
+  if (filterKey && posts) {
+    filteredBlogPosts = posts.filter(post => {
+      const tagContent = post?.tags ? post?.tags.join(' ') : ''
+      const searchContent = post.title + post.summary + tagContent
+      return searchContent.toLowerCase().includes(filterKey.toLowerCase())
+    })
+  } else {
+    filteredBlogPosts = deepClone(posts)
+  }
+  console.log('posts', props, posts, filteredBlogPosts)
+
+  return <LayoutBase {...props} topSlot={<BlogListBar {...props} setFilterKey={setFilterKey} />}>
+    <SearchNavBar {...props} />
+    {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} posts={filteredBlogPosts} /> : <BlogListScroll {...props} posts={filteredBlogPosts} />}
+  </LayoutBase>
 }
 
 /**