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"
+  return <div className='flex w-full bg-gray-100'
-        data-aos-duration="500"
+              data-aos="fade-down"
-        data-aos-delay="200"
+              data-aos-duration="500"
-        data-aos-once="true"
+              data-aos-delay="200"
-        data-aos-anchor-placement="top-bottom"
+              data-aos-once="true"
-        className='flex w-full bg-gray-100'>
+              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>

themes/next/index.js

@@ -7,7 +7,7 @@ import SideAreaLeft from './components/SideAreaLeft'
 import SideAreaRight from './components/SideAreaRight'
 import TopNav from './components/TopNav'
 import { useGlobal } from '@/lib/global'
-import { useEffect, useRef, useState } from 'react'
+import { createContext, useContext, useEffect, useRef, useState } from 'react'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import BlogPostListPage from './components/BlogPostListPage'
 import StickyBar from './components/StickyBar'
@@ -26,6 +26,11 @@ import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
 import CommonHead from '@/components/CommonHead'
 import { siteConfig } from '@/lib/config'
+import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
+
+// 主题全局状态
+const ThemeGlobalNext = createContext()
+export const useNextGlobal = () => useContext(ThemeGlobalNext)
 
 /**
  * 基础布局 采用左中右三栏布局，移动端使用顶部导航栏
@@ -74,9 +79,13 @@ const LayoutBase = (props) => {
       drawerRight?.current?.handleSwitchVisible()
     }} />
  </div>
+
   const tocRef = isBrowser ? document.getElementById('article-wrapper') : null
 
+  const searchModal = useRef(null)
+
   return (
+    <ThemeGlobalNext.Provider value={{ searchModal }}>
         <div id='theme-next'>
             {/* SEO相关 */}
             <CommonHead meta={meta}/>
@@ -85,6 +94,8 @@ const LayoutBase = (props) => {
             {/* 移动端顶部导航栏 */}
             <TopNav {...props} />
 
+            <AlgoliaSearchModal cRef={searchModal} {...props}/>
+
             <>{headerSlot}</>
 
             {/* 顶部黑线装饰 */}
@@ -135,6 +146,7 @@ const LayoutBase = (props) => {
             {/* 页脚 */}
             <Footer title={siteConfig('TITLE')} />
         </div>
+      </ThemeGlobalNext.Provider>
   )
 }