Hexo主题 微调

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>

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 }

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)

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>

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'>

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>

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'