diff --git a/themes/hexo/components/SearchButton.js b/themes/hexo/components/SearchButton.js
new file mode 100644
index 00000000..47d1da6f
--- /dev/null
+++ b/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 <>
+
+
+
+ >
+}
diff --git a/themes/hexo/components/TopNav.js b/themes/hexo/components/TopNav.js
index 252ce8a0..8966aa51 100644
--- a/themes/hexo/components/TopNav.js
+++ b/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 => {
{/* 右侧功能 */}
-
+
{isOpen ? : }
+ {showSearchButton &&
}
diff --git a/themes/hexo/index.js b/themes/hexo/index.js
index 4fa0dd62..fc3dace7 100644
--- a/themes/hexo/index.js
+++ b/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 (
+
{/* 网页SEO */}
@@ -98,9 +108,13 @@ const LayoutBase = props => {
{/* 悬浮菜单 */}
+ {/* 全文搜索 */}
+
+
{/* 页脚 */}
+
)
}