Next主题支持algolia全文搜索

themes/next/components/SearchInput.js

@@ -1,6 +1,8 @@
 import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
 import { useImperativeHandle, useRef, useState } from 'react'
+import { useNextGlobal } from '..'
+import { siteConfig } from '@/lib/config'
 
 let lock = false
 
@@ -9,6 +11,8 @@ const SearchInput = ({ currentTag, keyword, cRef }) => {
   const [onLoading, setLoadingState] = useState(false)
   const router = useRouter()
   const searchInputRef = useRef()
+  const { searchModal } = useNextGlobal()
+
   useImperativeHandle(cRef, () => {
     return {
       focus: () => {
@@ -16,7 +20,21 @@ const SearchInput = ({ currentTag, keyword, cRef }) => {
       }
     }
   })
+
+  const handleFocus = () => {
+    // 使用Algolia
+    if (siteConfig('ALGOLIA_APP_ID')) {
+      searchModal.current.openSearch()
+    }
+  }
+
   const handleSearch = () => {
+    // 使用Algolia
+    if (siteConfig('ALGOLIA_APP_ID')) {
+      searchModal.current.openSearch()
+      return
+    }
+
     const key = searchInputRef.current.value
     if (key && key !== '') {
       setLoadingState(true)
@@ -60,18 +78,20 @@ const SearchInput = ({ currentTag, keyword, cRef }) => {
     }
   }
 
-  return <div data-aos="fade-down"
-        data-aos-duration="500"
-        data-aos-delay="200"
-        data-aos-once="true"
-        data-aos-anchor-placement="top-bottom"
-        className='flex w-full bg-gray-100'>
+  return <div className='flex w-full bg-gray-100'
+              data-aos="fade-down"
+              data-aos-duration="500"
+              data-aos-delay="200"
+              data-aos-once="true"
+              data-aos-anchor-placement="top-bottom"
+        >
         <input
             ref={searchInputRef}
             type='text'
             placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
             className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
             onKeyUp={handleKeyUp}
+            onFocus={handleFocus}
             onCompositionStart={lockSearchInput}
             onCompositionUpdate={lockSearchInput}
             onCompositionEnd={unLockSearchInput}

themes/next/components/TopNav.js

@@ -10,6 +10,7 @@ import SearchDrawer from './SearchDrawer'
 import TagGroups from './TagGroups'
 import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
+import { useNextGlobal } from '..'
 
 let windowTop = 0
 
@@ -54,6 +55,16 @@ const TopNav = (props) => {
     changeShow(!isOpen)
   }
 
+  const { searchModal } = useNextGlobal()
+  const showSeachModal = () => {
+    if (siteConfig('ALGOLIA_APP_ID')) {
+      searchModal?.current?.openSearch()
+    } else {
+      searchDrawer?.current?.show()
+    }
+  }
+
+  //   搜索栏
   const searchDrawerSlot = <>
         {categories && (
             <section className='mt-8'>
@@ -112,7 +123,7 @@ const TopNav = (props) => {
 
                     {/* 右侧功能 */}
                     <div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-                        <div className="cursor-pointer block lg:hidden" onClick={() => { searchDrawer?.current?.show() }}>
+                        <div className="cursor-pointer block lg:hidden" onClick={showSeachModal}>
                             <i className="mr-2 fas fa-search" />{locale.NAV.SEARCH}
                         </div>
                     </div>