搜索页面样式微调

themes/hexo/LayoutSearch.js

@@ -1,34 +1,89 @@
-
 import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import BlogPostListPage from './components/BlogPostListPage'
 import LayoutBase from './LayoutBase'
 import SearchInput from './components/SearchInput'
-export const LayoutSearch = (props) => {
-  const { keyword } = props
+import { useGlobal } from '@/lib/global'
+import TagItemMini from './components/TagItemMini'
+import Card from './components/Card'
+import Link from 'next/link'
+
+export const LayoutSearch = props => {
+  const { keyword, tags, categories } = props
+  const { locale } = useGlobal()
   const router = useRouter()
   const currentSearch = keyword || router?.query?.s
   let handleTextColor = false
+  const cRef = useRef(null)
 
   useEffect(() => {
     setTimeout(() => {
+      // 自动聚焦到搜索框
+      cRef.current.focus()
       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>`)
+          container.innerHTML = container.innerHTML.replace(
+            re,
+            `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`
+          )
           handleTextColor = true
         }
       }
-    },
-    100)
+    }, 100)
   })
-  return <LayoutBase {...props} currentSearch={currentSearch}>
-    <div className='m-3'>
-      <SearchInput {...props}/>
-    </div>
-    <div id='container'>
-      <BlogPostListPage {...props}/>
-    </div>
-  </LayoutBase>
+  return (
+    <LayoutBase {...props} currentSearch={currentSearch}>
+      <div className="my-6 px-2">
+        <SearchInput cRef={cRef} {...props} />
+        {/* 分类 */}
+        <Card className="w-full mt-4">
+          <div className="dark:text-gray-200 mb-5 mx-3">
+            <i className="mr-4 fas fa-th" />
+            {locale.COMMON.CATEGORY}:
+          </div>
+          <div id="category-list" className="duration-200 flex flex-wrap mx-8">
+            {categories.map(category => {
+              return (
+                <Link
+                  key={category.name}
+                  href={`/category/${category.name}`}
+                  passHref
+                >
+                  <div
+                    className={
+                      ' 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" />
+                    {category.name}({category.count})
+                  </div>
+                </Link>
+              )
+            })}
+          </div>
+        </Card>
+        {/* 标签 */}
+        <Card className="w-full mt-4">
+          <div className="dark:text-gray-200 mb-5 ml-4">
+            <i className="mr-4 fas fa-tag" />
+            {locale.COMMON.TAGS}:
+          </div>
+          <div id="tags-list" className="duration-200 flex flex-wrap ml-8">
+            {tags.map(tag => {
+              return (
+                <div key={tag.name} className="p-2">
+                  <TagItemMini key={tag.name} tag={tag} />
+                </div>
+              )
+            })}
+          </div>
+        </Card>
+      </div>
+      <div id="container">
+        <BlogPostListPage {...props} />
+      </div>
+    </LayoutBase>
+  )
 }

themes/hexo/LayoutTagIndex.js

@@ -22,7 +22,7 @@ export const LayoutTagIndex = props => {
         <div id="tags-list" className="duration-200 flex flex-wrap ml-8">
           {tags.map(tag => {
             return (
-              <div key={tag.name} className="px-2">
+              <div key={tag.name} className="p-2">
                 <TagItemMini key={tag.name} tag={tag} />
               </div>
             )

themes/hexo/components/SearchInput.js

@@ -1,12 +1,14 @@
 import { useRouter } from 'next/router'
 import { useImperativeHandle, useRef, useState } from 'react'
+import { useGlobal } from '@/lib/global'
 let lock = false
 
-const SearchInput = (props) => {
+const SearchInput = props => {
   const { currentSearch, cRef, className } = props
   const [onLoading, setLoadingState] = useState(false)
   const router = useRouter()
   const searchInputRef = useRef()
+  const { locale } = useGlobal()
   useImperativeHandle(cRef, () => {
     return {
       focus: () => {
@@ -21,14 +23,15 @@ const SearchInput = (props) => {
       setLoadingState(true)
       location.href = '/search/' + key
     } else {
-      router.push({ pathname: '/' }).then(r => {
-      })
+      router.push({ pathname: '/' }).then(r => {})
     }
   }
-  const handleKeyUp = (e) => {
-    if (e.keyCode === 13) { // 回车
+  const handleKeyUp = e => {
+    if (e.keyCode === 13) {
+      // 回车
       handleSearch(searchInputRef.current.value)
-    } else if (e.keyCode === 27) { // ESC
+    } else if (e.keyCode === 27) {
+      // ESC
       cleanSearch()
     }
   }
@@ -37,7 +40,7 @@ const SearchInput = (props) => {
   }
 
   const [showClean, setShowClean] = useState(false)
-  const updateSearchKey = (val) => {
+  const updateSearchKey = val => {
     if (lock) {
       return
     }
@@ -57,30 +60,44 @@ const SearchInput = (props) => {
     lock = false
   }
 
-  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'}
-      onKeyUp={handleKeyUp}
-      onCompositionStart={lockSearchInput}
-      onCompositionUpdate={lockSearchInput}
-      onCompositionEnd={unLockSearchInput}
-      onChange={e => updateSearchKey(e.target.value)}
-      defaultValue={currentSearch}
-    />
+  return (
+    <div className={'flex w-full rounded-lg ' + className}>
+      <input
+        ref={searchInputRef}
+        type="text"
+        className={
+          'w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'
+        }
+        onKeyUp={handleKeyUp}
+        onCompositionStart={lockSearchInput}
+        onCompositionUpdate={lockSearchInput}
+        onCompositionEnd={unLockSearchInput}
+        placeholder={locale.SEARCH.ARTICLES}
+        onChange={e => updateSearchKey(e.target.value)}
+        defaultValue={currentSearch || ''}
+      />
 
-     <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>
-
-     {(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
+        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>
+
+      {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>
       )}
-  </div>
+    </div>
+  )
 }
 
 export default SearchInput

themes/next/components/SearchDrawer.js

@@ -28,7 +28,7 @@ const SearchDrawer = ({ cRef, slot }) => {
       </div>
 
       {/* 背景蒙版 */}
-      <div id='search-drawer-background' onClick={hidden} className='animate__animated animate__faster animate__fadeIn fixed bg-day dark:bg-night top-0 left-0 z-40 w-full h-full' />
+      <div id='search-drawer-background' onClick={hidden} className='animate__animated animate__faster animate__fadeIn fixed bg-day dark:bg-night top-0 left-0 z-30 w-full h-full' />
     </div>
   )
 }