清理冗余搜索

pages/search.js

@@ -1,5 +1,8 @@
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import { LayoutSearch } from '@/themes'
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
 
 export async function getStaticProps () {
   const {
@@ -24,7 +27,36 @@ export async function getStaticProps () {
 }
 
 const Search = (props) => {
-  return <LayoutSearch {...props} />
+  const { posts } = props
+  let filteredPosts
+  const searchKey = getSearchKey()
+  // 静态过滤
+  if (searchKey) {
+    filteredPosts = posts.filter(post => {
+      const tagContent = post.tags ? post.tags.join(' ') : ''
+      const categoryContent = post.category ? post.category.join(' ') : ''
+      const searchContent = post.title + post.summary + tagContent + categoryContent
+      return searchContent.toLowerCase().includes(searchKey.toLowerCase())
+    })
+  } else {
+    filteredPosts = posts
+  }
+
+  const { locale } = useGlobal()
+  const meta = {
+    title: `${searchKey || ''} | ${locale.NAV.SEARCH} | ${BLOG.TITLE}  `,
+    description: BLOG.DESCRIPTION,
+    type: 'website'
+  }
+  return <LayoutSearch {...props} posts={filteredPosts} meta={meta} currentSearch={searchKey} />
+}
+
+function getSearchKey () {
+  const router = useRouter()
+  if (router.query && router.query.s) {
+    return router.query.s
+  }
+  return null
 }
 
 export default Search

themes/Empty/LayoutSearch.js

@@ -1,31 +1,6 @@
-import { useRouter } from 'next/router'
 import LayoutBase from './LayoutBase'
 
 export const LayoutSearch = (props) => {
-  const { posts } = props
-  let filteredPosts
-  const searchKey = getSearchKey()
-  if (searchKey) {
-    filteredPosts = posts.filter(post => {
-      const tagContent = post.tags ? post.tags.join(' ') : ''
-      const searchContent = post.title + post.summary + tagContent
-      return searchContent.toLowerCase().includes(searchKey.toLowerCase())
-    })
-  } else {
-    filteredPosts = posts
-  }
-
-  console.log(filteredPosts)
-
   return <LayoutBase {...props}>
-    Search {searchKey}
   </LayoutBase>
 }
-
-function getSearchKey () {
-  const router = useRouter()
-  if (router.query && router.query.s) {
-    return router.query.s
-  }
-  return null
-}

themes/Fukasawa/LayoutIndex.js

@@ -3,8 +3,6 @@ import LayoutBase from './LayoutBase'
 
 export const LayoutIndex = (props) => {
   return <LayoutBase {...props}>
-
-    <BlogListPage posts={props.posts} postCount={props.postCount}/>
-
+    <BlogListPage {...props}/>
   </LayoutBase>
 }

themes/Fukasawa/LayoutSearch.js

@@ -1,30 +1,8 @@
-import { useRouter } from 'next/router'
 import LayoutBase from './LayoutBase'
+import BlogListPage from './components/BlogListPage'
 
 export const LayoutSearch = (props) => {
-  let filteredPosts
-  const searchKey = getSearchKey()
-  if (searchKey) {
-    filteredPosts = props.posts.filter(post => {
-      const tagContent = post.tags ? post.tags.join(' ') : ''
-      const searchContent = post.title + post.summary + tagContent
-      return searchContent.toLowerCase().includes(searchKey.toLowerCase())
-    })
-  } else {
-    filteredPosts = props.posts
-  }
-
-  console.log(filteredPosts)
-
   return <LayoutBase {...props}>
-    Search {searchKey}
+        <BlogListPage {...props}/>
   </LayoutBase>
 }
-
-function getSearchKey () {
-  const router = useRouter()
-  if (router.query && router.query.s) {
-    return router.query.s
-  }
-  return null
-}

themes/Hexo/LayoutCategoryIndex.js

@@ -25,7 +25,7 @@ export const LayoutCategoryIndex = props => {
               <Link key={category} href={`/category/${category}`} passHref>
                 <div
                   className={
-                    ' duration-300 dark:hover:text-white rounded-lg px-5 cursor-pointer py-2 hover:bg-blue-600 hover:text-white'
+                    ' duration-300 dark:hover:text-white rounded-lg px-5 cursor-pointer py-2 hover:bg-blue-400 hover:text-white'
                   }
                 >
                   <i className="mr-4 fas fa-folder" />

themes/Hexo/LayoutSearch.js

@@ -1,38 +1,9 @@
-import BLOG from '@/blog.config'
-import { useGlobal } from '@/lib/global'
-import { useRouter } from 'next/router'
+
 import BlogPostListPage from './components/BlogPostListPage'
 import LayoutBase from './LayoutBase'
 
 export const LayoutSearch = (props) => {
-  const { posts } = props
-  let filteredPosts
-  const searchKey = getSearchKey()
-  if (searchKey) {
-    filteredPosts = posts.filter(post => {
-      const tagContent = post.tags ? post.tags.join(' ') : ''
-      const searchContent = post.title + post.summary + tagContent
-      return searchContent.toLowerCase().includes(searchKey.toLowerCase())
-    })
-  } else {
-    filteredPosts = posts
-  }
-
-  const { locale } = useGlobal()
-  const meta = {
-    title: `${searchKey || ''} | ${locale.NAV.SEARCH} | ${BLOG.TITLE}  `,
-    description: BLOG.DESCRIPTION,
-    type: 'website'
-  }
-  return <LayoutBase {...props} meta={meta}>
-    <BlogPostListPage {...props} posts={filteredPosts}/>
+  return <LayoutBase {...props}>
+    <BlogPostListPage {...props}/>
   </LayoutBase>
 }
-
-function getSearchKey () {
-  const router = useRouter()
-  if (router.query && router.query.s) {
-    return router.query.s
-  }
-  return null
-}

themes/Hexo/components/MenuButtonGroup.js

@@ -11,11 +11,11 @@ const MenuButtonGroup = (props) => {
   const archiveSlot = <div className='bg-blue-300 dark:bg-blue-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
 
   let links = [
-    { id: 0, icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { id: 1, icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
-    { id: 2, icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG },
-    { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_HEXO.MENU_ARCHIVE },
-    { id: 4, icon: 'fas fa-user', name: locale.NAV.ABOUT, to: '/about', show: CONFIG_HEXO.MENU_ABOUT }
+    { icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
+    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_HEXO.MENU_ARCHIVE },
+    { icon: 'fas fa-user', name: locale.NAV.ABOUT, to: '/about', show: CONFIG_HEXO.MENU_ABOUT }
   ]
   if (customNav) {
     links = links.concat(customNav)
@@ -24,11 +24,11 @@ const MenuButtonGroup = (props) => {
       {links.map(link => {
         if (link.show) {
           const selected = (router.pathname === link.to) || (router.asPath === link.to)
-          return <Link key={`${link.id}-${link.to}`} title={link.to} href={link.to} >
+          return <Link key={`${link.to}`} title={link.to} href={link.to} >
           <a className={'py-1.5 my-1 px-5 duration-300 text-base justify-between hover:bg-blue-400 rounded-md hover:text-white hover:shadow-lg cursor-pointer flex flex-nowrap items-center ' +
               (selected ? 'bg-blue-400 rounded-md text-white' : ' ')} >
               <div className='my-auto items-center justify-center flex '>
-                <i className={link.icon} />
+                <i className={`${link.icon} w-4 text-center`} />
                 <div className={'ml-4'}>{link.name}</div>
               </div>
               {link.slot}

themes/Hexo/components/SearchInput.js

@@ -44,10 +44,10 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
     <input
       ref={searchInputRef}
       type='text'
-      className={'w-full rounded-lg text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100'}
+      className={'w-full rounded-lg text-sm pl-5 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100'}
       onKeyUp={handleKeyUp}
       onChange={e => updateSearchKey(e.target.value)}
-      defaultValue={searchKey}
+      defaultValue={currentSearch}
     />
 
     <div className='-ml-8 cursor-pointer dark:hover:bg-gray-800 float-right items-center justify-center py-2'

themes/Medium/LayoutSearch.js

@@ -1,5 +1,4 @@
 import LayoutBase from './LayoutBase'
-import BlogPostListPage from './components/BlogPostListPage'
 import SearchInput from './components/SearchInput'
 import { useGlobal } from '@/lib/global'
 import TagGroups from './components/TagGroups'

themes/NEXT/LayoutSearch.js

@@ -2,52 +2,22 @@ import LayoutBase from './LayoutBase'
 import StickyBar from './components/StickyBar'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import { useGlobal } from '@/lib/global'
-import BLOG from '@/blog.config'
-import { useRouter } from 'next/router'
 
 export const LayoutSearch = (props) => {
-  const { posts, tags } = props
-  let filteredPosts
-  const searchKey = getSearchKey()
-  if (searchKey) {
-    filteredPosts = posts.filter(post => {
-      const tagContent = post.tags ? post.tags.join(' ') : ''
-      const searchContent = post.title + post.summary + tagContent
-      return searchContent.toLowerCase().includes(searchKey.toLowerCase())
-    })
-  } else {
-    filteredPosts = posts
-  }
-
   const { locale } = useGlobal()
-  const meta = {
-    title: `${searchKey || ''} | ${locale.NAV.SEARCH} | ${BLOG.TITLE}  `,
-    description: BLOG.DESCRIPTION,
-    type: 'website'
-  }
+  const { posts } = props
+
   return (
-    <LayoutBase
-      meta={meta}
-      currentSearch={searchKey}
-      {...props}
-    >
+    <LayoutBase {...props} >
       <StickyBar>
         <div className="p-4 dark:text-gray-200">
           <i className="mr-1 fas fa-search" />{' '}
-          {filteredPosts.length} {locale.COMMON.RESULT_OF_SEARCH}
+          {posts.length} {locale.COMMON.RESULT_OF_SEARCH}
         </div>
       </StickyBar>
       <div className="md:mt-5">
-        <BlogPostListScroll posts={filteredPosts} tags={tags} showSummary={true}/>
+        <BlogPostListScroll {...props} showSummary={true}/>
       </div>
     </LayoutBase>
   )
 }
-
-function getSearchKey () {
-  const router = useRouter()
-  if (router.query && router.query.s) {
-    return router.query.s
-  }
-  return null
-}

themes/NEXT/components/SearchInput.js

@@ -47,12 +47,12 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
       ref={searchInputRef}
       type='text'
       placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-      className={'w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 border-gray-300 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
+      className={'w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 border-gray-300 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
       onKeyUp={handleKeyUp}
       onChange={e => updateSearchKey(e.target.value)}
       defaultValue={searchKey}
     />
-    {(searchKey && searchKey.length && <i className='fas fa-times text-gray-300 float-right m-3 cursor-pointer' onClick={cleanSearch} />)}
+    {(searchKey && searchKey.length && <i className='fas fa-times text-gray-300 float-right m-3 cursor-pointer absolute' onClick={cleanSearch} />)}
 
     <div className='p-3 bg-gray-50 flex border-l dark:border-gray-700 dark:hover:bg-gray-800 dark:bg-gray-600 justify-center items-center cursor-pointer'
       onClick={() => { handleSearch(searchKey) }}>

themes/index.js

@@ -4,6 +4,6 @@
 
 // export * from './Empty' //  空主题
 // export * from './NEXT'
-// export * from './Fukasawa'
+export * from './Fukasawa'
+// export * from './Hexo'
 // export * from './Hexo'
-export * from './Hexo'