From 354dacdca6fec8af238a1a1c5e58b53e2cd970da Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 15 Mar 2022 13:11:22 +0800
Subject: [PATCH] =?UTF-8?q?Hexo=E4=B8=BB=E9=A2=98=20=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/Hexo/LayoutSearch.js                  | 20 +++++++---
 themes/Hexo/components/MenuButtonGroupTop.js |  1 +
 themes/Hexo/components/MenuList.js           |  2 +-
 themes/Hexo/components/SearchInput.js        | 41 ++++++++++++--------
 themes/Hexo/components/SideRight.js          |  3 +-
 themes/Hexo/components/TopNav.js             |  2 +-
 themes/index.js                              |  4 +-
 7 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/themes/Hexo/LayoutSearch.js b/themes/Hexo/LayoutSearch.js
index c9ffc4b3..22abf034 100644
--- a/themes/Hexo/LayoutSearch.js
+++ b/themes/Hexo/LayoutSearch.js
@@ -3,23 +3,31 @@ import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import BlogPostListPage from './components/BlogPostListPage'
 import LayoutBase from './LayoutBase'
-
+import SearchInput from './components/SearchInput'
 export const LayoutSearch = (props) => {
   const { keyword } = props
   const router = useRouter()
   const currentSearch = keyword || router?.query?.s
+  let handleTextColor = false
+
   useEffect(() => {
     setTimeout(() => {
-      const container = document.getElementById('container')
-      if (container && container.innerHTML) {
-        const re = new RegExp(`${currentSearch}`, 'gim')
-        container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`)
+      if (currentSearch && !handleTextColor) {
+        const container = document.getElementById('container')
+        if (container && container.innerHTML) {
+          const re = new RegExp(`${currentSearch}`, 'gim')
+          container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`)
+          handleTextColor = true
+        }
       }
     },
     100)
   })
   return <LayoutBase {...props} currentSearch={currentSearch}>
-    <div ic='container'>
+    <div className='m-3'>
+      <SearchInput {...props}/>
+    </div>
+    <div id='container'>
       <BlogPostListPage {...props}/>
     </div>
   </LayoutBase>
diff --git a/themes/Hexo/components/MenuButtonGroupTop.js b/themes/Hexo/components/MenuButtonGroupTop.js
index 2f1c466f..54307132 100644
--- a/themes/Hexo/components/MenuButtonGroupTop.js
+++ b/themes/Hexo/components/MenuButtonGroupTop.js
@@ -8,6 +8,7 @@ const MenuButtonGroupTop = (props) => {
   const { locale } = useGlobal()
 
   let links = [
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH },
     { icon: 'fas fa-archive', name: locale.COMMON.ARTICLE, to: '/archive', show: CONFIG_HEXO.MENU_ARCHIVE },
     { icon: 'fas fa-folder', 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 }
diff --git a/themes/Hexo/components/MenuList.js b/themes/Hexo/components/MenuList.js
index 905a03fd..10439eb3 100644
--- a/themes/Hexo/components/MenuList.js
+++ b/themes/Hexo/components/MenuList.js
@@ -15,7 +15,7 @@ const MenuList = (props) => {
     { 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 }
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH }
   ]
   if (customNav) {
     links = links.concat(customNav)
diff --git a/themes/Hexo/components/SearchInput.js b/themes/Hexo/components/SearchInput.js
index 31074800..438920f7 100644
--- a/themes/Hexo/components/SearchInput.js
+++ b/themes/Hexo/components/SearchInput.js
@@ -1,8 +1,9 @@
 import { useRouter } from 'next/router'
 import { useImperativeHandle, useRef, useState } from 'react'
+let lock = false
 
-const SearchInput = ({ currentTag, currentSearch, cRef }) => {
-  const [searchKey, setSearchKey] = useState(currentSearch || '')
+const SearchInput = (props) => {
+  const { currentSearch, cRef, className } = props
   const [onLoading, setLoadingState] = useState(false)
   const router = useRouter()
   const searchInputRef = useRef()
@@ -13,12 +14,12 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
       }
     }
   })
-  const handleSearch = (key) => {
+
+  const handleSearch = () => {
+    const key = searchInputRef.current.value
     if (key && key !== '') {
       setLoadingState(true)
-      router.push({ pathname: '/search', query: { s: key } }).then(r => {
-        setLoadingState(false)
-      })
+      location.href = '/search/' + key
     } else {
       router.push({ pathname: '/' }).then(r => {
       })
@@ -33,12 +34,19 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
   }
   const cleanSearch = () => {
     searchInputRef.current.value = ''
-    setSearchKey('')
   }
-  let lock = false
+
+  const [showClean, setShowClean] = useState(false)
   const updateSearchKey = (val) => {
-    if (!lock) {
-      setSearchKey(val)
+    if (lock) {
+      return
+    }
+    searchInputRef.current.value = val
+
+    if (val) {
+      setShowClean(true)
+    } else {
+      setShowClean(false)
     }
   }
   function lockSearchInput () {
@@ -48,8 +56,9 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
   function unLockSearchInput () {
     lock = false
   }
-  return <div className='flex'>
-    <input
+
+  return <div className={'flex w-full bg-gray-100 ' + className}>
+     <input
       ref={searchInputRef}
       type='text'
       className={'w-full rounded-lg text-sm pl-5 transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'}
@@ -61,12 +70,12 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
       defaultValue={currentSearch}
     />
 
-    <div className='-ml-8 cursor-pointer  float-right items-center justify-center py-2'
-      onClick={() => { handleSearch(searchKey) }}>
+     <div className='-ml-8 cursor-pointer  float-right items-center justify-center py-2'
+      onClick={handleSearch}>
         <i className={`hover:text-black transform duration-200 text-gray-500 dark:text-gray-200 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}`} />
-    </div>
+     </div>
 
-    {(searchKey && searchKey.length &&
+     {(showClean &&
       <div className='-ml-12 cursor-pointer float-right items-center justify-center py-2'>
         <i className='hover:text-black transform duration-200 text-gray-400 dark:text-gray-300 cursor-pointer fas fa-times' onClick={cleanSearch} />
       </div>
diff --git a/themes/Hexo/components/SideRight.js b/themes/Hexo/components/SideRight.js
index ad7ba329..0ff07cd6 100644
--- a/themes/Hexo/components/SideRight.js
+++ b/themes/Hexo/components/SideRight.js
@@ -17,8 +17,9 @@ export default function SideRight (props) {
     showCategory,
     showTag
   } = props
+
   return (
-    <div className='w-96 space-y-4 hidden lg:block'>
+    <div className={'w-80 space-y-4 hidden lg:block'}>
       <InfoCard {...props}/>
       <Card>
         <div className='ml-2 mb-3 font-sans'>
diff --git a/themes/Hexo/components/TopNav.js b/themes/Hexo/components/TopNav.js
index a9ad8aad..464277c5 100644
--- a/themes/Hexo/components/TopNav.js
+++ b/themes/Hexo/components/TopNav.js
@@ -107,7 +107,7 @@ const TopNav = (props) => {
       </div>
 
       <Collapse isOpen={isOpen} className='shadow-xl'>
-        <div className='bg-white pt-1 py-2 px-5 flex lg:hidden'>
+        <div className='bg-white pt-1 py-2 px-5 lg:hidden'>
           <MenuList {...props}/>
         </div>
       </Collapse>
diff --git a/themes/index.js b/themes/index.js
index e9b63872..5acc65dd 100644
--- a/themes/index.js
+++ b/themes/index.js
@@ -3,7 +3,7 @@
  */
 
 // export * from './Empty' //  空主题
-export * from './NEXT'
+// export * from './NEXT'
 // export * from './Fukasawa'
-// export * from './Hexo'
+export * from './Hexo'
 // export * from './Medium'