路径导航(面包屑)

建站
0 字 / 约 0 分钟

路径导航(面包屑)

功能说明

在文档页顶部展示基于目录结构的面包屑导航,显示真实的目录路径,但链接指向对应的 uuid5 permalink。

实现方式

1. 路径解析

  • 根据当前页面的 routePathrelativePath 生成路径段
  • 支持多层回退机制:
    1. 优先使用 routePath 解析路径段
    2. routePath 不足时,从 relativePath 推断目录层级
    3. 通过 findSourcePathByPermalink 反查源文件路径重构层级
  • 使用 findPermalinkForPath 按物理路径查找对应 index.md 的 permalink
  • 如果找不到,使用 findPermalinkByPrefix 按前缀匹配查找
  • 显示名称去除数字前缀(如 10.CadenceCadence

3. 生成逻辑

  • 使用工具函数 generateBreadcrumb(位于 .vitepress/utils/breadcrumb.ts
  • 仅展示至父级目录,最后一个文件名不展示
  • 示例:首页 > EDA > Cadence > Virtuoso
  • 每个链接指向对应目录的 uuid5 permalink(如 /eda/e78b7

4. 集成方式

  • config.tsmarkdown.config 中通过 md.renderer.rules.heading_open 钩子插入
  • 直接生成 HTML 结构,不经过 Markdown 渲染