hexo主题支持Algolia全文搜索

themes/hexo/components/SearchButton.js

@@ -0,0 +1,30 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
+import { useRef } from 'react'
+import { useHexoGlobal } from '..'
+
+/**
+ * 搜索按钮
+ * @returns
+ */
+export default function SearchButton(props) {
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const { searchModal} = useHexoGlobal()
+
+  function handleSearch() {
+    if (siteConfig('ALGOLIA_APP_ID')) {
+      searchModal.current.openSearch()
+    } else {
+      router.push('/search')
+    }
+  }
+
+  return <>
+        <div onClick={handleSearch} title={locale.NAV.SEARCH} alt={locale.NAV.SEARCH} className='cursor-pointer hover:bg-black hover:bg-opacity-10 rounded-full w-10 h-10 flex justify-center items-center duration-200 transition-all'>
+            <i title={locale.NAV.SEARCH} className="fa-solid fa-magnifying-glass" />
+        </div>
+    </>
+}

themes/hexo/components/TopNav.js

@@ -10,6 +10,9 @@ import { useRouter } from 'next/router'
 import throttle from 'lodash.throttle'
 import SideBar from './SideBar'
 import SideBarDrawer from './SideBarDrawer'
+import { siteConfig } from '@/lib/config'
+import SearchButton from './SearchButton'
+import CONFIG from '../config'
 
 let windowTop = 0
 
@@ -26,6 +29,7 @@ const TopNav = props => {
   const router = useRouter()
 
   const [isOpen, changeShow] = useState(false)
+  const showSearchButton = siteConfig('HEXO_MENU_SEARCH',false,CONFIG)
 
   const toggleMenuOpen = () => {
     changeShow(!isOpen)
@@ -140,11 +144,12 @@ const TopNav = props => {
                 </div>
 
                 {/* 右侧功能 */}
-                <div className='mr-1 justify-end items-center '>
+                <div className='mr-1 flex justify-end items-center '>
                     <div className='hidden lg:flex'> <MenuListTop {...props} /></div>
                     <div onClick={toggleMenuOpen} className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'>
                         {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
                     </div>
+                    {showSearchButton && <SearchButton />}
                 </div>
             </div>
         </div>

themes/hexo/index.js

@@ -1,6 +1,6 @@
 import CONFIG from './config'
 import CommonHead from '@/components/CommonHead'
-import { useEffect, useRef } from 'react'
+import { createContext, useContext, useEffect, useRef } from 'react'
 import Footer from './components/Footer'
 import SideRight from './components/SideRight'
 import TopNav from './components/TopNav'
@@ -32,6 +32,12 @@ import { Transition } from '@headlessui/react'
 import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
 import { siteConfig } from '@/lib/config'
+import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
+
+
+// 主题全局状态
+const ThemeGlobalHexo = createContext()
+export const useHexoGlobal = () => useContext(ThemeGlobalHexo)
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -42,8 +48,12 @@ import { siteConfig } from '@/lib/config'
 const LayoutBase = props => {
   const { children, headerSlot, floatSlot, slotTop, meta, className } = props
   const { onLoading, fullWidth } = useGlobal()
+  
+  // Algolia搜索框
+  const searchModal = useRef(null)
 
   return (
+    <ThemeGlobalHexo.Provider value={{ searchModal }}>
         <div id='theme-hexo'>
             {/* 网页SEO */}
             <CommonHead meta={meta}/>
@@ -98,9 +108,13 @@ const LayoutBase = props => {
             {/* 悬浮菜单 */}
             <RightFloatArea floatSlot={floatSlot} />
 
+            {/* 全文搜索 */}
+            <AlgoliaSearchModal cRef={searchModal} {...props}/>
+
             {/* 页脚 */}
             <Footer title={siteConfig('TITLE') } />
         </div>
+    </ThemeGlobalHexo.Provider>
   )
 }