fix(portal): 导航栏锚点项点击后正确高亮
mirror-to-gitee / mirror (push) Successful in 3s

问题:点「产品功能 / 核心能力 / 界面预览 / 官方文档」跳转后图标不变蓝。
根因:VitePress 的 isActive() 只比较 path,不看 hash。nav 里
「首页 /」「产品功能 /#features」「核心能力 /#core」的路径部分都是 `/`,
默认逻辑要么把首页和当前锚点同时点亮,要么只亮首页。

改动
- 新增 .vitepress/theme/nav-anchor.ts 接管首页内锚点项的激活判定:
  用 data-anchor-active 属性标记,规则为
  在首页且有 hash → 只有 hash 匹配项亮;在首页无 hash → 只有「首页」亮;
  不在首页 → 清标记交回 VitePress 默认逻辑
- 样式侧用 html.portal-nav-home 限定压制默认 active 的作用域,
  只影响首页,不影响 /projects/ 与 /about 的正常高亮
- 导航「项目」加 activeMatch: '^/projects/',
  使 /projects/iotlcm/ 等详情页也保持高亮
- MutationObserver 监听导航 DOM 变化(SPA 切换、主题切换会重建)

踩的坑
- Layout 是函数式组件,onMounted 在其中无效(Vue 报"no active component
  instance"),改用 nextTick 调度
- 初版用 hashOf(a) 判空来识别「首页」,但 /projects/ 与 /about 也没有 hash,
  被误判成首页项一起点亮;改为判断 href 解析后是否为 '/'
- 抑制规则最初没加作用域,导致非首页页面的正常 active 也被压成黑字

验证(8 个场景逐个实测)
首页顶部→首页 / 四个锚点→各自高亮 / 项目页→项目 /
关于页→关于 / iotLCM 详情→项目;构建 13 页 274 引用 0 失效
This commit is contained in:
Dai0814
2026-11-04 15:23:37 +08:00
parent 9955e830ce
commit 39209ef591
5 changed files with 146 additions and 3 deletions
+24
View File
@@ -1026,3 +1026,27 @@ html.dark .p-section--deep .p-title {
html.dark .p-section--deep .p-card-text {
color: #c2cbdb;
}
/* ============================================================
导航栏锚点高亮
VitePress 只按 path 判定 active,同一路径下的多个锚点会一起亮。
这里用 data-anchor-active 属性接管,并压掉错误的默认 active。
选择器用 :not([data-anchor-active]) 精确排除正确项。
============================================================ */
/* 压制 VitePress 默认 active 只在首页生效:
首页上「/」「/#features」等路径部分相同,默认逻辑会把多个项同时点亮;
其它页面(/projects/、/about)必须保留正常高亮。 */
html.portal-nav-home .VPNavBarMenuLink.active:not([data-anchor-active]) {
color: var(--vp-c-text-1);
}
.VPNavBarMenuLink[data-anchor-active],
.VPNavBarMenuLink.active[data-anchor-active] {
color: var(--vp-c-brand-1);
}
/* 首页内锚点项未激活时保持常态色,并补一个 hover 反馈 */
.VPNavBarMenuLink[href*='#']:not([data-anchor-active]):hover {
color: var(--vp-c-brand-1);
}