From 1353acf8c7e3bd82056da056da4a70744d24dd58 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sun, 30 Jul 2023 11:44:18 +0800 Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E7=90=86filterNavPages?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/AlgoliaSearchModal.js | 2 +- lib/notion/getNotionData.js | 20 ++------- pages/index.js | 2 - themes/gitbook/components/NavPostList.js | 24 ++++++++--- themes/gitbook/components/PageNavDrawer.js | 18 +++++++- themes/gitbook/components/SearchInput.js | 49 +++++++++++++++------- themes/gitbook/index.js | 11 ++--- themes/heo/index.js | 1 + 8 files changed, 78 insertions(+), 49 deletions(-) diff --git a/components/AlgoliaSearchModal.js b/components/AlgoliaSearchModal.js index 7af1fd6a..71f363c7 100644 --- a/components/AlgoliaSearchModal.js +++ b/components/AlgoliaSearchModal.js @@ -132,7 +132,7 @@ export default function AlgoliaSearchModal({ cRef }) {
{totalHit > 0 &&
共搜索到 {totalHit} 条结果，用时 {useTime} 毫秒
}
-
Algolia 提供搜索服务
+
Algolia 提供搜索服务
{/* 遮罩 */} diff --git a/lib/notion/getNotionData.js b/lib/notion/getNotionData.js index d452eb5f..047823cf 100644 --- a/lib/notion/getNotionData.js +++ b/lib/notion/getNotionData.js @@ -174,8 +174,8 @@ function getSiteInfo({ collection, block }) { } /** - * 获取导航pages - * 转为gitbook这类文档主题设计，精减的标题和内容 + * 获取导航用的精减文章列表 + * gitbook主题用到，只保留文章的标题分类标签分类信息，精减掉摘要密码日期等数据 * 导航页面的条件，必须是Posts * @param {*} param0 */ @@ -183,22 +183,8 @@ export function getNavPages({ allPages }) { const allNavPages = allPages.filter(post => { return post && post?.slug && (!post?.slug?.startsWith('http')) && post?.type === 'Post' && post?.status === 'Published' }) - const result = allNavPages.map(item => ({ id: item.id, title: item.title || '', category: item.category || null, tags: item.tags || null, summary: item.summary || null, slug: item.slug })) - const groupedArray = result.reduce((groups, item) => { - const categoryName = item?.category ? item?.category : '' // 将category转换为字符串 - const lastGroup = groups[groups.length - 1] // 获取最后一个分组 - - if (!lastGroup || lastGroup?.category !== categoryName) { // 如果当前元素的category与上一个元素不同，则创建新分组 - groups.push({ category: categoryName, items: [] }) - } - - groups[groups.length - 1].items.push(item) // 将元素加入对应的分组 - - return groups - }, []) - - return groupedArray + return allNavPages.map(item => ({ id: item.id, title: item.title || '', pageCover: item.pageCover || '', category: item.category || null, tags: item.tags || null, summary: item.summary || null, slug: item.slug })) } /** diff --git a/pages/index.js b/pages/index.js index 86d9de24..fbbe0eff 100644 --- a/pages/index.js +++ b/pages/index.js @@ -3,7 +3,6 @@ import { getPostBlocks } from '@/lib/notion' import { getGlobalData } from '@/lib/notion/getNotionData' import { generateRss } from '@/lib/rss' import { generateRobotsTxt } from '@/lib/robots.txt' - import { useRouter } from 'next/router' import { getLayoutByTheme } from '@/themes/theme' @@ -12,7 +11,6 @@ import { getLayoutByTheme } from '@/themes/theme' * @param {*} props * @returns */ - const Index = props => { // 根据页面路径加载不同Layout文件 const Layout = getLayoutByTheme(useRouter()) diff --git a/themes/gitbook/components/NavPostList.js b/themes/gitbook/components/NavPostList.js index 1dff3722..9ffc0cf9 100644 --- a/themes/gitbook/components/NavPostList.js +++ b/themes/gitbook/components/NavPostList.js @@ -10,12 +10,24 @@ import NavPostItem from './NavPostItem' * @constructor */ const NavPostList = (props) => { - const { filteredPostGroups } = props + const { filteredNavPages } = props const router = useRouter() let selectedSth = false + const groupedArray = filteredNavPages?.reduce((groups, item) => { + const categoryName = item?.category ? item?.category : '' // 将category转换为字符串 + const lastGroup = groups[groups.length - 1] // 获取最后一个分组 + + if (!lastGroup || lastGroup?.category !== categoryName) { // 如果当前元素的category与上一个元素不同，则创建新分组 + groups.push({ category: categoryName, items: [] }) + } + + groups[groups.length - 1].items.push(item) // 将元素加入对应的分组 + + return groups + }, []) // 处理是否选中 - filteredPostGroups?.map((group) => { + groupedArray?.map((group) => { let groupSelected = false for (const post of group?.items) { if (router.asPath.split('?')[0] === '/' + post.slug) { @@ -28,16 +40,16 @@ const NavPostList = (props) => { }) // 如果都没有选中默认打开第一个 - if (!selectedSth && filteredPostGroups && filteredPostGroups?.length > 0) { - filteredPostGroups[0].selected = true + if (!selectedSth && groupedArray && groupedArray?.length > 0) { + groupedArray[0].selected = true } - if (!filteredPostGroups || filteredPostGroups.length === 0) { + if (!groupedArray || groupedArray.length === 0) { return } else { return
{/* 文章列表 */} - {filteredPostGroups?.map((group, index) => )} + {groupedArray?.map((group, index) => )}
} } diff --git a/themes/gitbook/components/PageNavDrawer.js b/themes/gitbook/components/PageNavDrawer.js index 17448c94..86c39e9a 100644 --- a/themes/gitbook/components/PageNavDrawer.js +++ b/themes/gitbook/components/PageNavDrawer.js @@ -10,7 +10,21 @@ import NavPostList from './NavPostList' */ const PageNavDrawer = (props) => { const { pageNavVisible, changePageNavVisible } = useGitBookGlobal() - const { filteredPostGroups } = props + const { filteredNavPages } = props + + const groupedArray = filteredNavPages.reduce((groups, item) => { + const categoryName = item?.category ? item?.category : '' // 将category转换为字符串 + const lastGroup = groups[groups.length - 1] // 获取最后一个分组 + + if (!lastGroup || lastGroup?.category !== categoryName) { // 如果当前元素的category与上一个元素不同，则创建新分组 + groups.push({ category: categoryName, items: [] }) + } + + groups[groups.length - 1].items.push(item) // 将元素加入对应的分组 + + return groups + }, []) + const switchVisible = () => { changePageNavVisible(!pageNavVisible) } @@ -23,7 +37,7 @@ const PageNavDrawer = (props) => { ' overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 top-16 rounded py-2 bg-white dark:bg-gray-600'}>
{/* 所有文章列表 */} - +
diff --git a/themes/gitbook/components/SearchInput.js b/themes/gitbook/components/SearchInput.js index 43062eb2..bad985da 100644 --- a/themes/gitbook/components/SearchInput.js +++ b/themes/gitbook/components/SearchInput.js @@ -5,7 +5,7 @@ let lock = false const SearchInput = ({ currentSearch, cRef, className }) => { const searchInputRef = useRef() - const { setFilterPosts, allNavPages } = useGitBookGlobal() + const { setFilteredNavPages, allNavPages } = useGitBookGlobal() useImperativeHandle(cRef, () => { return { @@ -17,31 +17,44 @@ const SearchInput = ({ currentSearch, cRef, className }) => { const handleSearch = () => { let keyword = searchInputRef.current.value - const filterPosts = [] if (keyword) { keyword = keyword.trim() } else { - setFilterPosts(allNavPages) + 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 (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 + '' + const hit = articleInfo.toLowerCase().indexOf(keyword.toLowerCase()) > -1 + if (!hit) { + // 删除 + filterAllNavPages.splice(i, 1) } } // 更新完 - setFilterPosts(filterPosts) + setFilteredNavPages(filterAllNavPages) } + + /** + * 回车键 + * @param {*} e + */ const handleKeyUp = (e) => { if (e.keyCode === 13) { // 回车 handleSearch(searchInputRef.current.value) @@ -49,6 +62,10 @@ const SearchInput = ({ currentSearch, cRef, className }) => { cleanSearch() } } + + /** + * 清理搜索 + */ const cleanSearch = () => { searchInputRef.current.value = '' handleSearch() diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js index 125b3423..0d606343 100644 --- a/themes/gitbook/index.js +++ b/themes/gitbook/index.js @@ -47,16 +47,17 @@ const LayoutBase = (props) => { const router = useRouter() const [tocVisible, changeTocVisible] = useState(false) const [pageNavVisible, changePageNavVisible] = useState(false) - const [filteredPostGroups, setFilteredPostGroups] = useState(allNavPages) + const [filteredNavPages, setFilteredNavPages] = useState(allNavPages) const showTocButton = post?.toc?.length > 1 useEffect(() => { - setFilteredPostGroups(allNavPages) + console.log('更新导航', allNavPages) + setFilteredNavPages(allNavPages) }, [post]) return ( - +