导航文章排他自动折叠

2026-05-14 07:26:52 +00:00 · 2024-04-25 16:49:57 +08:00
parent 939515b43c
commit 509db899b4
5 changed files with 131 additions and 101 deletions
--- a/themes/gitbook/components/BlogPostListPage.js
+++ b/themes/gitbook/components/BlogPostListPage.js
@@ -1,34 +0,0 @@
-import BlogPostCard from './BlogPostCard'
-import { siteConfig } from '@/lib/config'
-import NavPostListEmpty from './NavPostListEmpty'
-import PaginationSimple from './PaginationSimple'
-
-/**
- * 文章列表分页表格
- * @param page 当前页
- * @param posts 所有文章
- * @param tags 所有标签
- * @returns {JSX.Element}
- * @constructor
- */
-const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
-  const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
-
-  if (!posts || posts.length === 0) {
-    return <NavPostListEmpty />
-  }
-
-  return (
-      <div className='w-full justify-center'>
-        <div id='posts-wrapper'>
-        {/* 文章列表 */}
-        {posts?.map(post => (
-          <BlogPostCard key={post.id} post={post} />
-        ))}
-        </div>
-        <PaginationSimple page={page} totalPage={totalPage} />
-      </div>
-  )
-}
-
-export default BlogPostListPage
--- a/themes/gitbook/components/NavPostItem.js
+++ b/themes/gitbook/components/NavPostItem.js
@@ -1,9 +1,8 @@
-import BlogPostCard from './BlogPostCard'
-import { useState } from 'react'
-import Collapse from '@/components/Collapse'
 import Badge from '@/components/Badge'
+import Collapse from '@/components/Collapse'
 import { siteConfig } from '@/lib/config'
 import CONFIG from '../config'
+import BlogPostCard from './BlogPostCard'

 /**
 * 导航列表
@@ -12,36 +11,53 @@ import CONFIG from '../config'
 * @returns {JSX.Element}
 * @constructor
 */
-const NavPostItem = (props) => {
-  const { group } = props
-  const [isOpen, changeIsOpen] = useState(group?.selected)
+const NavPostItem = props => {
+  const { group, expanded, toggleItem } = props // 接收传递的展开状态和切换函数
+  // const [isOpen, setIsOpen] = useState(expanded) // 使用展开状态作为组件内部状态

+  // 当展开状态改变时触发切换函数，并根据传入的展开状态更新内部状态
  const toggleOpenSubMenu = () => {
-    changeIsOpen(!isOpen)
+    toggleItem() // 调用父组件传递的切换函数
+    // setIsOpen(!expanded) // 更新内部状态为传入的展开状态的相反值
  }

  const groupHasLatest = group?.items?.some(post => post.isLatest)

  if (group?.category) {
-    return <>
-            <div onClick={toggleOpenSubMenu}
-                className='select-none relative flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600' key={group?.category}>
-                <span>{group?.category}</span>
-                <div className='inline-flex items-center select-none pointer-events-none '><i className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-200 ${isOpen ? '-rotate-90' : ''}`}></i></div>
-                {groupHasLatest && siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && !isOpen && <Badge/>}
+    return (
+      <>
+        <div
+          onClick={toggleOpenSubMenu}
+          className='select-none relative flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600'
+          key={group?.category}>
+          <span>{group?.category}</span>
+          <div className='inline-flex items-center select-none pointer-events-none '>
+            <i
+              className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-200 ${expanded ? '-rotate-90' : ''}`}></i>
+          </div>
+          {groupHasLatest &&
+            siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) &&
+            !expanded && <Badge />}
+        </div>
+        <Collapse isOpen={expanded} onHeightChange={props.onHeightChange}>
+          {group?.items?.map(post => (
+            <div key={post.id} className='ml-3 border-l'>
+              <BlogPostCard className='text-sm ml-3' post={post} />
            </div>
-            <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-                {group?.items?.map(post => (<div key={post.id} className='ml-3 border-l'>
-                    <BlogPostCard className='text-sm ml-3' post={post} /></div>))
-                }
-            </Collapse>
-        </>
+          ))}
+        </Collapse>
+      </>
+    )
  } else {
-    return <>
-            {group?.items?.map(post => (<div key={post.id} >
-                <BlogPostCard className='text-sm py-2' post={post} /></div>))
-            }
-        </>
+    return (
+      <>
+        {group?.items?.map(post => (
+          <div key={post.id}>
+            <BlogPostCard className='text-sm py-2' post={post} />
+          </div>
+        ))}
+      </>
+    )
  }
 }

--- 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 (
+      <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
+        <p className='text-gray-500 dark:text-gray-300'>
+          {locale.COMMON.NO_RESULTS_FOUND}{' '}
+          {currentSearch && <div>{currentSearch}</div>}
+        </p>
+      </div>
+    )
  }

-  if (!groupedArray || groupedArray.length === 0) {
-    return <NavPostListEmpty />
-  } else {
-    return <div id='posts-wrapper' className='w-full flex-grow space-y-0.5 tracking-wider'>
-            {/* 文章列表 */}
-            {groupedArray?.map((group, index) => <NavPostItem key={index} group={group} onHeightChange={props.onHeightChange}/>)}
-        </div>
-  }
+  return (
+    <div
+      id='posts-wrapper'
+      className='w-full flex-grow space-y-0.5 tracking-wider'>
+      {/* 文章列表 */}
+      {categoryFolders?.map((group, index) => (
+        <NavPostItem
+          key={index}
+          group={group}
+          onHeightChange={props.onHeightChange}
+          expanded={expandedGroups.includes(index)} // 将展开状态传递给子组件
+          toggleItem={() => toggleItem(index)} // 将切换函数传递给子组件
+        />
+      ))}
+    </div>
+  )
 }

 export default NavPostList
--- a/themes/gitbook/components/NavPostListEmpty.js
+++ b/themes/gitbook/components/NavPostListEmpty.js
@@ -1,14 +0,0 @@
-import { useGlobal } from '@/lib/global'
-
-/**
- * 空白博客 列表
- * @returns {JSX.Element}
- * @constructor
- */
-const NavPostListEmpty = ({ currentSearch }) => {
-  const { locale } = useGlobal()
-  return <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
-        <p className='text-gray-500 dark:text-gray-300'>{locale.COMMON.NO_RESULTS_FOUND}  {(currentSearch && <div>{currentSearch}</div>)}</p>
-  </div>
-}
-export default NavPostListEmpty
--- 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