diff --git a/components/Collapse.js b/components/Collapse.js index 69ef59eb..dd36f14f 100644 --- a/components/Collapse.js +++ b/components/Collapse.js @@ -26,9 +26,9 @@ const Collapse = props => { }) /** - * 折叠 - * @param {*} element - */ + * 折叠 + * @param {*} element + */ const collapseSection = element => { const sectionHeight = element.scrollHeight const sectionWidth = element.scrollWidth @@ -51,9 +51,9 @@ const Collapse = props => { } /** - * 展开 - * @param {*} element - */ + * 展开 + * @param {*} element + */ const expandSection = element => { const sectionHeight = element.scrollHeight const sectionWidth = element.scrollWidth @@ -82,13 +82,24 @@ const Collapse = props => { collapseSection(ref.current) } // 通知父组件高度变化 - props?.onHeightChange && props.onHeightChange({ height: ref.current.scrollHeight, increase: props.isOpen }) + props?.onHeightChange && + props.onHeightChange({ + height: ref.current.scrollHeight, + increase: props.isOpen + }) }, [props.isOpen]) return ( -
- {props.children} -
+
+ {props.children} +
) } Collapse.defaultProps = { isOpen: false } diff --git a/themes/gitbook/components/NavPostItem.js b/themes/gitbook/components/NavPostItem.js index 4961d7de..0110be77 100644 --- a/themes/gitbook/components/NavPostItem.js +++ b/themes/gitbook/components/NavPostItem.js @@ -14,12 +14,20 @@ import BlogPostCard from './BlogPostCard' const NavPostItem = props => { const { group, expanded, toggleItem } = props // 接收传递的展开状态和切换函数 // const [isOpen, setIsOpen] = useState(expanded) // 使用展开状态作为组件内部状态 + const hoverExpand = siteConfig('GITBOOK_FOLDER_HOVER_EXPAND', false, CONFIG) // 当展开状态改变时触发切换函数,并根据传入的展开状态更新内部状态 const toggleOpenSubMenu = () => { toggleItem() // 调用父组件传递的切换函数 // setIsOpen(!expanded) // 更新内部状态为传入的展开状态的相反值 } + const onHoverToggle = () => { + // 允许鼠标悬停时自动展开,而非点击展开 + if (!hoverExpand) { + return + } + toggleOpenSubMenu() + } const groupHasLatest = group?.items?.some(post => post.isLatest) @@ -27,13 +35,14 @@ const NavPostItem = props => { return ( <>
{group?.category}
+ className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-700 ${expanded ? '-rotate-90' : ''}`}>
{groupHasLatest && siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && diff --git a/themes/gitbook/components/NavPostList.js b/themes/gitbook/components/NavPostList.js index a67bc7fd..7bc67c44 100644 --- a/themes/gitbook/components/NavPostList.js +++ b/themes/gitbook/components/NavPostList.js @@ -105,6 +105,7 @@ function groupArticles(filteredNavPages) { return [] } const groups = [] + const AUTO_SORT = siteConfig('GITBOOK_AUTO_SORT', true, CONFIG) for (let i = 0; i < filteredNavPages.length; i++) { const item = filteredNavPages[i] @@ -112,7 +113,7 @@ function groupArticles(filteredNavPages) { let existingGroup = null // 开启自动分组排序;将同分类的自动归到同一个文件夹,忽略Notion中的排序 - if (siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)) { + if (AUTO_SORT) { existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组 } else { existingGroup = groups[groups.length - 1] // 获取最后一个分组 diff --git a/themes/gitbook/config.js b/themes/gitbook/config.js index 3e376bbb..4cbb50b4 100644 --- a/themes/gitbook/config.js +++ b/themes/gitbook/config.js @@ -15,6 +15,8 @@ const CONFIG = { // 导航文章自动排他折叠 GITBOOK_EXCLUSIVE_COLLAPSE: true, // 一次只展开一个分类,其它文件夹自动关闭。 + GITBOOK_FOLDER_HOVER_EXPAND: true, // 左侧导航文件夹鼠标悬停时自动展开;若为false,则要点击才能展开 + // Widget GITBOOK_WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件