From 29407c1b0d65fc5b3741979dbc5790a78c4316b2 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Wed, 21 Feb 2024 13:49:52 +0800 Subject: [PATCH] =?UTF-8?q?gitbook=20=E9=80=82=E9=85=8Dalgolia?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/gitbook/components/NavPostList.js | 2 +- themes/gitbook/components/SearchInput.js | 42 ++++++++++++++---------- themes/gitbook/components/TopNavBar.js | 2 +- themes/gitbook/index.js | 8 +++-- 4 files changed, 33 insertions(+), 21 deletions(-) diff --git a/themes/gitbook/components/NavPostList.js b/themes/gitbook/components/NavPostList.js index 6ad7fd94..6fbf92b5 100644 --- a/themes/gitbook/components/NavPostList.js +++ b/themes/gitbook/components/NavPostList.js @@ -20,7 +20,7 @@ const NavPostList = (props) => { let existingGroup = null // 开启自动分组排序 - if (JSON.parse(siteConfig('GITBOOK_AUTO_SORT', true, CONFIG))) { + if (siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)) { existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组 } else { existingGroup = groups[groups.length - 1] // 获取最后一个分组 diff --git a/themes/gitbook/components/SearchInput.js b/themes/gitbook/components/SearchInput.js index bad985da..cab041fe 100644 --- a/themes/gitbook/components/SearchInput.js +++ b/themes/gitbook/components/SearchInput.js @@ -1,11 +1,15 @@ import { useImperativeHandle, useRef, useState } from 'react' import { deepClone } from '@/lib/utils' import { useGitBookGlobal } from '@/themes/gitbook' +import { siteConfig } from '@/lib/config' let lock = false +/** + * 搜索栏 + */ const SearchInput = ({ currentSearch, cRef, className }) => { const searchInputRef = useRef() - const { setFilteredNavPages, allNavPages } = useGitBookGlobal() + const { searchModal, setFilteredNavPages, allNavPages } = useGitBookGlobal() useImperativeHandle(cRef, () => { return { @@ -16,6 +20,10 @@ const SearchInput = ({ currentSearch, cRef, className }) => { }) const handleSearch = () => { + // 使用Algolia + if (siteConfig('ALGOLIA_APP_ID')) { + searchModal?.current?.openSearch() + } let keyword = searchInputRef.current.value if (keyword) { keyword = keyword.trim() @@ -23,20 +31,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => { setFilteredNavPages(allNavPages) } const filterAllNavPages = deepClone(allNavPages) - // for (const filterGroup of filterAllNavPages) { - // for (let i = filterGroup.items.length - 1; i >= 0; i--) { - // const post = filterGroup.items[i] - // const articleInfo = post.title + '' - // const hit = articleInfo.toLowerCase().indexOf(keyword.toLowerCase()) > -1 - // if (!hit) { - // // 删除 - // filterGroup.items.splice(i, 1) - // } - // } - // if (filterGroup.items && filterGroup.items.length > 0) { - // filterPosts.push(filterGroup) - // } - // } + for (let i = filterAllNavPages.length - 1; i >= 0; i--) { const post = filterAllNavPages[i] const articleInfo = post.title + '' @@ -56,6 +51,12 @@ const SearchInput = ({ currentSearch, cRef, className }) => { * @param {*} e */ const handleKeyUp = (e) => { + // 使用Algolia + if (siteConfig('ALGOLIA_APP_ID')) { + searchModal?.current?.openSearch() + return + } + if (e.keyCode === 13) { // 回车 handleSearch(searchInputRef.current.value) } else if (e.keyCode === 27) { // ESC @@ -63,6 +64,13 @@ const SearchInput = ({ currentSearch, cRef, className }) => { } } + const handleFocus = () => { + // 使用Algolia + if (siteConfig('ALGOLIA_APP_ID')) { + searchModal?.current?.openSearch() + } + } + /** * 清理搜索 */ @@ -77,7 +85,6 @@ const SearchInput = ({ currentSearch, cRef, className }) => { return } searchInputRef.current.value = val - if (val) { setShowClean(true) } else { @@ -97,6 +104,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => { ref={searchInputRef} type='text' className={`${className} outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white`} + onFocus={handleFocus} onKeyUp={handleKeyUp} onCompositionStart={lockSearchInput} onCompositionUpdate={lockSearchInput} @@ -111,7 +119,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => { {(showClean && -
+
)} diff --git a/themes/gitbook/components/TopNavBar.js b/themes/gitbook/components/TopNavBar.js index c2257fb5..b01c26cc 100644 --- a/themes/gitbook/components/TopNavBar.js +++ b/themes/gitbook/components/TopNavBar.js @@ -39,7 +39,7 @@ export default function TopNavBar(props) { } return ( -
+
{/* 移动端折叠菜单 */} diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js index cd4f2207..d4bb22a1 100644 --- a/themes/gitbook/index.js +++ b/themes/gitbook/index.js @@ -2,7 +2,7 @@ import CONFIG from './config' import { useRouter } from 'next/router' -import { useEffect, useState, createContext, useContext } from 'react' +import { useEffect, useState, createContext, useContext, useRef } from 'react' import { isBrowser } from '@/lib/utils' import Footer from './components/Footer' import InfoCard from './components/InfoCard' @@ -34,6 +34,7 @@ import Link from 'next/link' import dynamic from 'next/dynamic' import { siteConfig } from '@/lib/config' import NotionIcon from '@/components/NotionIcon' +import AlgoliaSearchModal from '@/components/AlgoliaSearchModal' const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false }) // 主题全局变量 @@ -55,16 +56,19 @@ const LayoutBase = (props) => { const [filteredNavPages, setFilteredNavPages] = useState(allNavPages) const showTocButton = post?.toc?.length > 1 + const searchModal = useRef(null) useEffect(() => { setFilteredNavPages(allNavPages) }, [post]) return ( - +