路径导航(面包屑)
建站
0 字 / 约 0 分钟
路径导航(面包屑)
功能说明
在文档页顶部展示基于目录结构的面包屑导航,显示真实的目录路径,但链接指向对应的 uuid5 permalink。
实现方式
1. 路径解析
- 根据当前页面的
routePath和relativePath生成路径段 - 支持多层回退机制:
- 优先使用
routePath解析路径段 - 当
routePath不足时,从relativePath推断目录层级 - 通过
findSourcePathByPermalink反查源文件路径重构层级
- 优先使用
2. Permalink 查找
- 使用
findPermalinkForPath按物理路径查找对应index.md的 permalink - 如果找不到,使用
findPermalinkByPrefix按前缀匹配查找 - 显示名称去除数字前缀(如
10.Cadence→Cadence)
3. 生成逻辑
- 使用工具函数
generateBreadcrumb(位于.vitepress/utils/breadcrumb.ts) - 仅展示至父级目录,最后一个文件名不展示
- 示例:
首页 > EDA > Cadence > Virtuoso - 每个链接指向对应目录的
uuid5permalink(如/eda/e78b7)
4. 集成方式
- 在
config.ts的markdown.config中通过md.renderer.rules.heading_open钩子插入 - 直接生成 HTML 结构,不经过 Markdown 渲染