Skip to content

Commit 5c8c1ee

Browse files
committed
fix gitbook 默认展开
1 parent dc17c1e commit 5c8c1ee

File tree

2 files changed

+109
-68
lines changed

2 files changed

+109
-68
lines changed

themes/gitbook/components/NavPostList.js

+66-38
Original file line numberDiff line numberDiff line change
@@ -17,56 +17,30 @@ const NavPostList = props => {
1717
const { locale, currentSearch } = useGlobal()
1818
const router = useRouter()
1919

20+
// 按分类将文章分组成文件夹
21+
const categoryFolders = groupArticles(filteredNavPages)
22+
2023
// 存放被展开的分组
2124
const [expandedGroups, setExpandedGroups] = useState([])
2225

23-
// 排他折叠
26+
// 是否排他折叠,一次只展开一个文件夹
2427
const GITBOOK_EXCLUSIVE_COLLAPSE = siteConfig(
2528
'GITBOOK_EXCLUSIVE_COLLAPSE',
2629
null,
2730
CONFIG
2831
)
2932

30-
// 按照分类、分组折叠内榕
31-
const categoryFolders = filteredNavPages?.reduce((groups, item) => {
32-
const categoryName = item?.category ? item?.category : '' // 将category转换为字符串
33-
34-
let existingGroup = null
35-
// 开启自动分组排序
36-
if (siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)) {
37-
existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
38-
} else {
39-
existingGroup = groups[groups.length - 1] // 获取最后一个分组
40-
}
41-
42-
// 添加数据
43-
if (existingGroup && existingGroup.category === categoryName) {
44-
existingGroup.items.push(item)
45-
} else {
46-
groups.push({ category: categoryName, items: [item] })
47-
}
48-
return groups
49-
}, [])
50-
51-
// 首次打开页面时,跟踪是否已经选择了一个项
52-
categoryFolders?.forEach(group => {
53-
let hasExpandFolder = false
54-
group.items.forEach(post => {
55-
if (router.asPath.split('?')[0] === '/' + post.slug) {
56-
hasExpandFolder = true
57-
}
58-
})
59-
group.selected = hasExpandFolder
60-
})
61-
62-
// 如果都没有选中默认打开第一个
33+
// 展开文件夹
6334
useEffect(() => {
6435
setTimeout(() => {
65-
if (expandedGroups.length === 0) {
66-
setExpandedGroups([0])
67-
}
36+
// 默认展开一个
37+
const defaultOpenIndex = getDefaultOpenIndexByPath(
38+
categoryFolders,
39+
router.asPath.split('?')[0]
40+
)
41+
setExpandedGroups([defaultOpenIndex])
6842
}, 500)
69-
}, [router])
43+
}, [router, filteredNavPages])
7044

7145
// 折叠项切换,当折叠或展开数组时会调用
7246
const toggleItem = index => {
@@ -93,6 +67,8 @@ const NavPostList = props => {
9367
// 更新展开分组数组
9468
setExpandedGroups(newExpandedGroups)
9569
}
70+
71+
// 空数据返回
9672
if (!categoryFolders || categoryFolders.length === 0) {
9773
// 空白内容
9874
return (
@@ -123,4 +99,56 @@ const NavPostList = props => {
12399
)
124100
}
125101

102+
// 按照分类将文章分组成文件夹
103+
function groupArticles(filteredNavPages) {
104+
if (!filteredNavPages) {
105+
return []
106+
}
107+
const groups = []
108+
109+
for (let i = 0; i < filteredNavPages.length; i++) {
110+
const item = filteredNavPages[i]
111+
const categoryName = item?.category ? item?.category : '' // 将category转换为字符串
112+
113+
let existingGroup = null
114+
// 开启自动分组排序;将同分类的自动归到同一个文件夹,忽略Notion中的排序
115+
if (siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)) {
116+
existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
117+
} else {
118+
existingGroup = groups[groups.length - 1] // 获取最后一个分组
119+
}
120+
121+
// 添加数据
122+
if (existingGroup && existingGroup.category === categoryName) {
123+
existingGroup.items.push(item)
124+
} else {
125+
groups.push({ category: categoryName, items: [item] })
126+
}
127+
}
128+
return groups
129+
}
130+
131+
/**
132+
* 查看当前路由需要展开的菜单索引
133+
* 路过都没有,则返回0,即默认展开第一个
134+
* @param {*} categoryFolders
135+
* @param {*} path
136+
* @returns {number} 返回需要展开的菜单索引
137+
*/
138+
function getDefaultOpenIndexByPath(categoryFolders, path) {
139+
// 默认展开第一个索引
140+
let defaultIndex = 0
141+
142+
// 查找满足条件的第一个索引
143+
const index = categoryFolders.findIndex(group => {
144+
return group.items.some(post => path === '/' + post.slug)
145+
})
146+
147+
// 如果找到满足条件的索引,则设置为该索引
148+
if (index !== -1) {
149+
defaultIndex = index
150+
}
151+
152+
return defaultIndex
153+
}
126154
export default NavPostList

themes/gitbook/components/SearchInput.js

+43-30
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { useImperativeHandle, useRef, useState } from 'react'
1+
import { siteConfig } from '@/lib/config'
22
import { deepClone } from '@/lib/utils'
33
import { useGitBookGlobal } from '@/themes/gitbook'
4-
import { siteConfig } from '@/lib/config'
4+
import { useImperativeHandle, useRef, useState } from 'react'
55
let lock = false
66

77
/**
@@ -50,16 +50,18 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
5050
* 回车键
5151
* @param {*} e
5252
*/
53-
const handleKeyUp = (e) => {
53+
const handleKeyUp = e => {
5454
// 使用Algolia
5555
if (siteConfig('ALGOLIA_APP_ID')) {
5656
searchModal?.current?.openSearch()
5757
return
5858
}
5959

60-
if (e.keyCode === 13) { // 回车
60+
if (e.keyCode === 13) {
61+
// 回车
6162
handleSearch(searchInputRef.current.value)
62-
} else if (e.keyCode === 27) { // ESC
63+
} else if (e.keyCode === 27) {
64+
// ESC
6365
cleanSearch()
6466
}
6567
}
@@ -80,7 +82,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
8082
}
8183

8284
const [showClean, setShowClean] = useState(false)
83-
const updateSearchKey = (val) => {
85+
const updateSearchKey = val => {
8486
if (lock) {
8587
return
8688
}
@@ -91,39 +93,50 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
9193
setShowClean(false)
9294
}
9395
}
94-
function lockSearchInput () {
96+
97+
function lockSearchInput() {
9598
lock = true
9699
}
97100

98-
function unLockSearchInput () {
101+
function unLockSearchInput() {
99102
lock = false
100103
}
101104

102-
return <div className={'flex w-full'}>
103-
<input
104-
ref={searchInputRef}
105-
type='text'
106-
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`}
107-
onFocus={handleFocus}
108-
onKeyUp={handleKeyUp}
109-
onCompositionStart={lockSearchInput}
110-
onCompositionUpdate={lockSearchInput}
111-
onCompositionEnd={unLockSearchInput}
112-
onChange={e => updateSearchKey(e.target.value)}
113-
defaultValue={currentSearch}
114-
/>
115-
116-
<div className='flex -ml-8 cursor-pointer float-right items-center justify-center py-2'
117-
onClick={handleSearch}>
118-
<i className={'hover:text-black transform duration-200 text-gray-500 dark:hover:text-gray-300 cursor-pointer fas fa-search'} />
119-
</div>
105+
return (
106+
<div className={'flex w-full'}>
107+
<input
108+
ref={searchInputRef}
109+
type='text'
110+
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`}
111+
onFocus={handleFocus}
112+
onKeyUp={handleKeyUp}
113+
onCompositionStart={lockSearchInput}
114+
onCompositionUpdate={lockSearchInput}
115+
onCompositionEnd={unLockSearchInput}
116+
onChange={e => updateSearchKey(e.target.value)}
117+
defaultValue={currentSearch}
118+
/>
120119

121-
{(showClean &&
122-
<div className='-ml-12 cursor-pointer flex float-right items-center justify-center py-2'>
123-
<i className='fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer dark:hover:text-gray-300' onClick={cleanSearch} />
120+
<div
121+
className='flex -ml-8 cursor-pointer float-right items-center justify-center py-2'
122+
onClick={handleSearch}>
123+
<i
124+
className={
125+
'hover:text-black transform duration-200 text-gray-500 dark:hover:text-gray-300 cursor-pointer fas fa-search'
126+
}
127+
/>
124128
</div>
129+
130+
{showClean && (
131+
<div className='-ml-12 cursor-pointer flex float-right items-center justify-center py-2'>
132+
<i
133+
className='fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer dark:hover:text-gray-300'
134+
onClick={cleanSearch}
135+
/>
136+
</div>
125137
)}
126-
</div>
138+
</div>
139+
)
127140
}
128141

129142
export default SearchInput

0 commit comments

Comments
 (0)