gitbook优化搜索组件

styles/globals.css

@@ -276,3 +276,7 @@ a.avatar-wrapper {
 img {
   display: unset;
 }
+
+.adsbygoogle {
+  overflow: hidden;
+}

themes/gitbook/components/SearchInput.js

@@ -2,6 +2,7 @@ import { siteConfig } from '@/lib/config'
 import { deepClone } from '@/lib/utils'
 import { useGitBookGlobal } from '@/themes/gitbook'
 import { useImperativeHandle, useRef, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
 let lock = false
 
 /**
@@ -19,6 +20,15 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
     }
   })
 
+  /**
+   * 快捷键设置
+   */
+  useHotkeys('ctrl+k', e => {
+    searchInputRef?.current?.focus()
+    e.preventDefault()
+    handleSearch()
+  })
+
   const handleSearch = () => {
     // 使用Algolia
     if (siteConfig('ALGOLIA_APP_ID')) {
@@ -29,6 +39,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
       keyword = keyword.trim()
     } else {
       setFilteredNavPages(allNavPages)
+      return
     }
     const filterAllNavPages = deepClone(allNavPages)
 
@@ -79,6 +90,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
   const cleanSearch = () => {
     searchInputRef.current.value = ''
     handleSearch()
+    setShowClean(false)
   }
 
   const [showClean, setShowClean] = useState(false)
@@ -103,11 +115,20 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
   }
 
   return (
-    <div className={`${className}`}>
+    <div className={`${className} relative`}>
+      <div
+        className='absolute left-0 ml-4 items-center justify-center py-2'
+        onClick={handleSearch}>
+        <i
+          className={
+            'hover:text-black transform duration-200 text-gray-500  dark:hover:text-gray-300 cursor-pointer fas fa-search'
+          }
+        />
+      </div>
       <input
         ref={searchInputRef}
         type='text'
-        className={`rounded-md outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-black dark:text-white`}
+        className={`rounded-lg border dark:border-black pl-12 leading-10 placeholder-gray-500 outline-none w-full transition focus:shadow-lg text-black bg-gray-100 dark:bg-black dark:text-white`}
         onFocus={handleFocus}
         onKeyUp={handleKeyUp}
         placeholder='Search'
@@ -117,15 +138,10 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
         onChange={e => updateSearchKey(e.target.value)}
         defaultValue={currentSearch}
       />
-
       <div
-        className='flex -ml-8 cursor-pointer float-right items-center justify-center py-2'
+        className='absolute right-0 mr-4 items-center justify-center py-2 text-gray-400 dark:text-gray-600'
         onClick={handleSearch}>
-        <i
-          className={
-            'hover:text-black transform duration-200 text-gray-500  dark:hover:text-gray-300 cursor-pointer fas fa-search'
-          }
-        />
+        Ctrl+K
       </div>
 
       {showClean && (