fix gitbook 默认展开

2026-05-15 23:16:48 +00:00 · 2024-05-09 15:19:50 +08:00
parent dc17c1e533
commit 5c8c1ee407
2 changed files with 109 additions and 68 deletions
--- 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
--- 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 <div className={'flex w-full'}>
-    <input
-      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-800 dark:text-white`}
-      onFocus={handleFocus}
-      onKeyUp={handleKeyUp}
-      onCompositionStart={lockSearchInput}
-      onCompositionUpdate={lockSearchInput}
-      onCompositionEnd={unLockSearchInput}
-      onChange={e => updateSearchKey(e.target.value)}
-      defaultValue={currentSearch}
-    />
+  return (
+    <div className={'flex w-full'}>
+      <input
+        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-800 dark:text-white`}
+        onFocus={handleFocus}
+        onKeyUp={handleKeyUp}
+        onCompositionStart={lockSearchInput}
+        onCompositionUpdate={lockSearchInput}
+        onCompositionEnd={unLockSearchInput}
+        onChange={e => updateSearchKey(e.target.value)}
+        defaultValue={currentSearch}
+      />

-    <div className='flex -ml-8 cursor-pointer float-right items-center justify-center py-2'
-      onClick={handleSearch}>
-        <i className={'hover:text-black transform duration-200 text-gray-500  dark:hover:text-gray-300 cursor-pointer fas fa-search'} />
-    </div>
-
-    {(showClean &&
-      <div className='-ml-12 cursor-pointer flex float-right items-center justify-center py-2'>
-        <i className='fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer   dark:hover:text-gray-300' onClick={cleanSearch} />
+      <div
+        className='flex -ml-8 cursor-pointer float-right items-center justify-center py-2'
+        onClick={handleSearch}>
+        <i
+          className={
+            'hover:text-black transform duration-200 text-gray-500  dark:hover:text-gray-300 cursor-pointer fas fa-search'
+          }
+        />
      </div>
+
+      {showClean && (
+        <div className='-ml-12 cursor-pointer flex float-right items-center justify-center py-2'>
+          <i
+            className='fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer   dark:hover:text-gray-300'
+            onClick={cleanSearch}
+          />
+        </div>
      )}
-  </div>
+    </div>
+  )
 }

 export default SearchInput