diff --git a/themes/nav/components/MenuItemCollapse.js b/themes/nav/components/MenuItemCollapse.js index 4f332337d59..065e92286fa 100755 --- a/themes/nav/components/MenuItemCollapse.js +++ b/themes/nav/components/MenuItemCollapse.js @@ -20,7 +20,9 @@ export const MenuItemCollapse = props => { if (!link || !link.show) { return null } - + // #号加标题 快速跳转到指定锚点 + const isAnchor = link?.href === '#' + const url = isAnchor ? `#${link.name}` : link.href const selected = router.pathname === link.href || router.asPath === link.href const toggleShow = () => { @@ -42,7 +44,7 @@ export const MenuItemCollapse = props => { onClick={toggleShow}> {!hasSubMenu && (
@@ -72,21 +74,24 @@ export const MenuItemCollapse = props => { {hasSubMenu && ( {link?.subMenus?.map((sLink, index) => { + // #号加标题 快速跳转到指定锚点 + const sIsAnchor = sLink?.href === '#' + const sUrl = sIsAnchor ? `#${sLink.name}` : sLink.href + return (
- {/* */} - +
{sLink.title}
-
+
) })} diff --git a/themes/nav/components/TopNavBar.js b/themes/nav/components/TopNavBar.js index cee758c6a2b..f9e9438b67a 100755 --- a/themes/nav/components/TopNavBar.js +++ b/themes/nav/components/TopNavBar.js @@ -1,10 +1,10 @@ -import { useCallback, useEffect, useRef, useState } from 'react' import Collapse from '@/components/Collapse' -import { MenuBarMobile } from './MenuBarMobile' -import throttle from 'lodash.throttle' -import SearchInput from './SearchInput' import DarkModeButton from '@/components/DarkModeButton' +import throttle from 'lodash.throttle' +import { useCallback, useEffect, useRef, useState } from 'react' import LogoBar from './LogoBar' +import { MenuBarMobile } from './MenuBarMobile' +import SearchInput from './SearchInput' /** * 顶部导航栏 + 菜单 @@ -29,20 +29,22 @@ export default function TopNavBar(props) { const throttleMs = 200 - const scrollTrigger = useCallback(throttle(() => { - const scrollS = window.scrollY - const nav = document.querySelector('#nav-bg') - // const header = document.querySelector('#top-nav') - const header = document.querySelector('#container-inner') - const showNav = scrollS <= windowTop || scrollS < 5 || (scrollS <= header.clientHeight)// 非首页无大图时影藏顶部 滚动条置顶时隐藏 - if (!showNav) { - nav && nav.classList.replace('-top-20', 'top-0') - windowTop = scrollS - } else { - nav && nav.classList.replace('top-0', '-top-20') - windowTop = scrollS - } - }, throttleMs) + const scrollTrigger = useCallback( + throttle(() => { + const scrollS = window.scrollY + const nav = document.querySelector('#nav-bg') + // const header = document.querySelector('#top-nav') + const header = document.querySelector('#container-inner') + const showNav = + scrollS <= windowTop || scrollS < 5 || scrollS <= header.clientHeight // 非首页无大图时影藏顶部 滚动条置顶时隐藏 + if (!showNav) { + nav && nav.classList.replace('-top-20', 'top-0') + windowTop = scrollS + } else { + nav && nav.classList.replace('top-0', '-top-20') + windowTop = scrollS + } + }, throttleMs) ) const toggleMenuOpen = () => { @@ -50,42 +52,61 @@ export default function TopNavBar(props) { } return ( -
- {/* 图标Logo */} -
- -
+
+ {/* 图标Logo */} +
+ +
- {/* 移动端折叠菜单 */} - -
- collapseRef.current?.updateCollapseHeight(param)} /> -
-
- - {/* 导航栏菜单 */} -
+ {/* 导航栏菜单 */} +
+
+ {/* 搜索框、折叠按钮、仅移动端显示 */} +
+
+ +
+ +
+ {isOpen ? ( + + ) : ( + + )} +
+
-
- {/* 搜索框、折叠按钮、仅移动端显示 */} -
-
- -
- -
- {isOpen ? : } -
-
+ {/* 桌面端顶部菜单 */} +
+ {/* {links && links?.map((link, index) => )} */} + + +
+
+
- {/* 桌面端顶部菜单 */} -
- {/* {links && links?.map((link, index) => )} */} - - -
-
-
+ {/* 移动端折叠菜单 */} + +
+ + collapseRef.current?.updateCollapseHeight(param) + } + />
+
+
) }