问题:点「产品功能 / 核心能力 / 界面预览 / 官方文档」跳转后图标不变蓝。 根因: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:
@@ -16,3 +16,4 @@ dist
|
||||
.vitepress/v3
|
||||
.vitepress/v4
|
||||
.vitepress/v5
|
||||
.vitepress/v6
|
||||
|
||||
Reference in New Issue
Block a user