diff --git a/themes/gitbook/components/NavPostList.js b/themes/gitbook/components/NavPostList.js index be84e9ba..2d52a12b 100644 --- a/themes/gitbook/components/NavPostList.js +++ b/themes/gitbook/components/NavPostList.js @@ -17,56 +17,30 @@ const NavPostList = props => { const { locale, currentSearch } = useGlobal() const router = useRouter() + // 按分类将文章分组成文件夹 + const categoryFolders = groupArticles(filteredNavPages) + // 存放被展开的分组 const [expandedGroups, setExpandedGroups] = useState([]) - // 排他折叠 + // 是否排他折叠,一次只展开一个文件夹 const GITBOOK_EXCLUSIVE_COLLAPSE = siteConfig( 'GITBOOK_EXCLUSIVE_COLLAPSE', null, CONFIG ) - // 按照分类、分组折叠内榕 - const categoryFolders = filteredNavPages?.reduce((groups, item) => { - const categoryName = item?.category ? item?.category : '' // 将category转换为字符串 - - let existingGroup = null - // 开启自动分组排序 - if (siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)) { - existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组 - } else { - existingGroup = groups[groups.length - 1] // 获取最后一个分组 - } - - // 添加数据 - if (existingGroup && existingGroup.category === categoryName) { - existingGroup.items.push(item) - } else { - groups.push({ category: categoryName, items: [item] }) - } - return groups - }, []) - - // 首次打开页面时,跟踪是否已经选择了一个项 - categoryFolders?.forEach(group => { - let hasExpandFolder = false - group.items.forEach(post => { - if (router.asPath.split('?')[0] === '/' + post.slug) { - hasExpandFolder = true - } - }) - group.selected = hasExpandFolder - }) - - // 如果都没有选中默认打开第一个 + // 展开文件夹 useEffect(() => { setTimeout(() => { - if (expandedGroups.length === 0) { - setExpandedGroups([0]) - } + // 默认展开一个 + const defaultOpenIndex = getDefaultOpenIndexByPath( + categoryFolders, + router.asPath.split('?')[0] + ) + setExpandedGroups([defaultOpenIndex]) }, 500) - }, [router]) + }, [router, filteredNavPages]) // 折叠项切换,当折叠或展开数组时会调用 const toggleItem = index => { @@ -93,6 +67,8 @@ const NavPostList = props => { // 更新展开分组数组 setExpandedGroups(newExpandedGroups) } + + // 空数据返回 if (!categoryFolders || categoryFolders.length === 0) { // 空白内容 return ( @@ -123,4 +99,56 @@ const NavPostList = props => { ) } +// 按照分类将文章分组成文件夹 +function groupArticles(filteredNavPages) { + if (!filteredNavPages) { + return [] + } + const groups = [] + + for (let i = 0; i < filteredNavPages.length; i++) { + const item = filteredNavPages[i] + const categoryName = item?.category ? item?.category : '' // 将category转换为字符串 + + let existingGroup = null + // 开启自动分组排序;将同分类的自动归到同一个文件夹,忽略Notion中的排序 + if (siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)) { + existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组 + } else { + existingGroup = groups[groups.length - 1] // 获取最后一个分组 + } + + // 添加数据 + if (existingGroup && existingGroup.category === categoryName) { + existingGroup.items.push(item) + } else { + groups.push({ category: categoryName, items: [item] }) + } + } + return groups +} + +/** + * 查看当前路由需要展开的菜单索引 + * 路过都没有,则返回0,即默认展开第一个 + * @param {*} categoryFolders + * @param {*} path + * @returns {number} 返回需要展开的菜单索引 + */ +function getDefaultOpenIndexByPath(categoryFolders, path) { + // 默认展开第一个索引 + let defaultIndex = 0 + + // 查找满足条件的第一个索引 + const index = categoryFolders.findIndex(group => { + return group.items.some(post => path === '/' + post.slug) + }) + + // 如果找到满足条件的索引,则设置为该索引 + if (index !== -1) { + defaultIndex = index + } + + return defaultIndex +} export default NavPostList diff --git a/themes/gitbook/components/SearchInput.js b/themes/gitbook/components/SearchInput.js index e1560a51..fc1cd793 100644 --- a/themes/gitbook/components/SearchInput.js +++ b/themes/gitbook/components/SearchInput.js @@ -1,7 +1,7 @@ -import { useImperativeHandle, useRef, useState } from 'react' +import { siteConfig } from '@/lib/config' import { deepClone } from '@/lib/utils' import { useGitBookGlobal } from '@/themes/gitbook' -import { siteConfig } from '@/lib/config' +import { useImperativeHandle, useRef, useState } from 'react' let lock = false /** @@ -50,16 +50,18 @@ const SearchInput = ({ currentSearch, cRef, className }) => { * 回车键 * @param {*} e */ - const handleKeyUp = (e) => { + const handleKeyUp = e => { // 使用Algolia if (siteConfig('ALGOLIA_APP_ID')) { searchModal?.current?.openSearch() return } - if (e.keyCode === 13) { // 回车 + if (e.keyCode === 13) { + // 回车 handleSearch(searchInputRef.current.value) - } else if (e.keyCode === 27) { // ESC + } else if (e.keyCode === 27) { + // ESC cleanSearch() } } @@ -80,7 +82,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => { } const [showClean, setShowClean] = useState(false) - const updateSearchKey = (val) => { + const updateSearchKey = val => { if (lock) { return } @@ -91,39 +93,50 @@ const SearchInput = ({ currentSearch, cRef, className }) => { setShowClean(false) } } - function lockSearchInput () { + + function lockSearchInput() { lock = true } - function unLockSearchInput () { + function unLockSearchInput() { lock = false } - return