-
{group?.category}
-
- {groupHasLatest && siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && !isOpen &&
}
+ return (
+ <>
+
+
{group?.category}
+
+
+
+ {groupHasLatest &&
+ siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) &&
+ !expanded &&
}
+
+
+ {group?.items?.map(post => (
+
+
-
- {group?.items?.map(post => (
-
))
- }
-
-
+ ))}
+
+
+ )
} else {
- return <>
- {group?.items?.map(post => (
-
))
- }
-
+ return (
+ <>
+ {group?.items?.map(post => (
+
+
+
+ ))}
+
+ )
}
}
diff --git a/themes/gitbook/components/NavPostList.js b/themes/gitbook/components/NavPostList.js
index 6fbf92b5..2c7fceff 100644
--- a/themes/gitbook/components/NavPostList.js
+++ b/themes/gitbook/components/NavPostList.js
@@ -1,8 +1,9 @@
-import NavPostListEmpty from './NavPostListEmpty'
-import { useRouter } from 'next/router'
-import NavPostItem from './NavPostItem'
-import CONFIG from '../config'
import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import CONFIG from '../config'
+import NavPostItem from './NavPostItem'
/**
* 博客列表滚动分页
@@ -11,11 +12,23 @@ import { siteConfig } from '@/lib/config'
* @returns {JSX.Element}
* @constructor
*/
-const NavPostList = (props) => {
+const NavPostList = props => {
const { filteredNavPages } = props
+ const { locale, currentSearch } = useGlobal()
const router = useRouter()
- let selectedSth = false
- const groupedArray = filteredNavPages?.reduce((groups, item) => {
+
+ // 存放被展开的分组
+ 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
@@ -35,32 +48,77 @@ const NavPostList = (props) => {
return groups
}, [])
- // 处理是否选中
- groupedArray?.map((group) => {
- let groupSelected = false
- for (const post of group?.items) {
+ // 首次打开页面时，跟踪是否已经选择了一个项
+ categoryFolders?.forEach(group => {
+ let hasExpandFolder = false
+ group.items.forEach(post => {
if (router.asPath.split('?')[0] === '/' + post.slug) {
- groupSelected = true
- selectedSth = true
+ hasExpandFolder = true
}
- }
- group.selected = groupSelected
- return null
+ })
+ group.selected = hasExpandFolder
})
// 如果都没有选中默认打开第一个
- if (!selectedSth && groupedArray && groupedArray?.length > 0) {
- groupedArray[0].selected = true
+ useEffect(() => {
+ if (expandedGroups.length === 0) {
+ setExpandedGroups([0])
+ }
+ }, [])
+
+ // 折叠项切换，当折叠或展开数组时会调用
+ const toggleItem = index => {
+ let newExpandedGroups = [...expandedGroups] // 创建一个新的展开分组数组
+
+ // 如果expandedGroups中不存在，增加入，若存在则移除
+ if (expandedGroups.includes(index)) {
+ // 如果expandedGroups中包含index，则移除index
+ newExpandedGroups = newExpandedGroups.filter(
+ expandedIndex => expandedIndex !== index
+ )
+ } else {
+ // 如果expandedGroups中不包含index，则加入index
+ newExpandedGroups.push(index)
+ }
+ // 是否排他
+ if (GITBOOK_EXCLUSIVE_COLLAPSE) {
+ // 如果折叠菜单排他性为 true，则只展开当前分组，关闭其他已展开的分组
+ newExpandedGroups = newExpandedGroups.filter(
+ expandedIndex => expandedIndex === index
+ )
+ }
+
+ // 更新展开分组数组
+ setExpandedGroups(newExpandedGroups)
+ }
+ if (!categoryFolders || categoryFolders.length === 0) {
+ // 空白内容
+ return (
+
+
+ {locale.COMMON.NO_RESULTS_FOUND}{' '}
+ {currentSearch &&
{currentSearch}
}
+
+
+ )
}
- if (!groupedArray || groupedArray.length === 0) {
- return
- } else {
- return
- {/* 文章列表 */}
- {groupedArray?.map((group, index) => )}
-
- }
+ return (
+
+ {/* 文章列表 */}
+ {categoryFolders?.map((group, index) => (
+ toggleItem(index)} // 将切换函数传递给子组件
+ />
+ ))}
+
+ )
}
export default NavPostList
diff --git a/themes/gitbook/components/NavPostListEmpty.js b/themes/gitbook/components/NavPostListEmpty.js
deleted file mode 100644
index 54f2f179..00000000
--- a/themes/gitbook/components/NavPostListEmpty.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useGlobal } from '@/lib/global'
-
-/**
- * 空白博客 列表
- * @returns {JSX.Element}
- * @constructor
- */
-const NavPostListEmpty = ({ currentSearch }) => {
- const { locale } = useGlobal()
- return
-
{locale.COMMON.NO_RESULTS_FOUND} {(currentSearch &&
{currentSearch}
)}
-
-}
-export default NavPostListEmpty
diff --git a/themes/gitbook/config.js b/themes/gitbook/config.js
index 88daae8b..3e376bbb 100644
--- a/themes/gitbook/config.js
+++ b/themes/gitbook/config.js
@@ -1,10 +1,10 @@
const CONFIG = {
-
GITBOOK_INDEX_PAGE: 'about', // 文档首页显示的文章，请确此路径包含在您的notion数据库中
GITBOOK_AUTO_SORT: process.env.NEXT_PUBLIC_GITBOOK_AUTO_SORT || true, // 是否自动按分类名 归组排序文章；自动归组可能会打乱您Notion中的文章顺序
- GITBOOK_LATEST_POST_RED_BADGE: process.env.NEXT_PUBLIC_GITBOOK_LATEST_POST_RED_BADGE || true, // 是否给最新文章显示红点
+ GITBOOK_LATEST_POST_RED_BADGE:
+ process.env.NEXT_PUBLIC_GITBOOK_LATEST_POST_RED_BADGE || true, // 是否给最新文章显示红点
// 菜单
GITBOOK_MENU_CATEGORY: true, // 显示分类
@@ -12,8 +12,12 @@ const CONFIG = {
GITBOOK_MENU_ARCHIVE: true, // 显示归档
GITBOOK_MENU_SEARCH: true, // 显示搜索
+ // 导航文章自动排他折叠
+ GITBOOK_EXCLUSIVE_COLLAPSE: true, // 一次只展开一个分类，其它文件夹自动关闭。
+
// Widget
- GITBOOK_WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
+ GITBOOK_WIDGET_REVOLVER_MAPS:
+ process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
GITBOOK_WIDGET_TO_TOP: true // 跳回顶部
}
export default CONFIG