index.html中的层级面包屑自动生成：HTML结构化导航实战-html教程-PHP中文网

纯静态 index.html 中不能用 js 解析 url 生成面包屑，因 pathname 切分失真、多语言误判、url 重写失效，且违反语义化与可访问性要求；必须手写或构建时注入。

index.html中的层级面包屑自动生成：html结构化导航实战

纯静态 index.html 里不能靠 JS 自动解析 URL 生成面包屑——它不可靠、不语义、还破坏可访问性。必须手写或构建时注入，否则“首页 > 产品 > 小部件”可能和真实信息架构完全对不上。

直接在 index.html 里运行 JS 解析路径，看似省事，实则埋雷：

/products/widget/index.html 会被切成 ["", "products", "widget", "index"]，把 index 当成一个独立层级，但用户理解中它是“小部件”的默认页，不该单独出现
URL 重写后（如 Nginx 配置了 try_files $uri $uri/ /index.html），pathname 已失真，无法反推业务层级
多语言站点如 /zh/products/，硬切会把 zh 当成一级导航，而实际“首页”仍是根路径 /
键盘用户 Tab 进来时，读屏器会读出“第1项:空 → 第2项:products → 第3项:widget”，语义断裂且误导

这是当前页可被读屏器识别的唯一可靠方式，CSS 类名（如 class="active"）完全无效：

只加在当前页对应的 <li> 上，例如 <li aria-current="page">无线耳机</li>
值必须是 "page"，写成 "true"、"current" 或 "location" 都不会被 JAWS/NVDA/VoiceOver 正确识别
当前页项不能带 href，否则键盘用户按 Enter 会刷新或跳转失败；也不该加 tabindex="0"，它本就不该聚焦
上级页链接必须用绝对路径（以 / 开头），比如 href="/products/"，而不是 ./products.html —— 后者在子目录下（如 /blog/）会错指向 /blog/products.html

把 / 或 > 直接写进 HTML，读屏器会连读成“首页斜杠产品斜杠当前页”，打断语义流：

正确写法：nav[aria-label="Breadcrumb"] li:not(:first-child)::before { content: "/"; aria-hidden: "true"; }
禁用 .breadcrumb-item::before { content: ">" !important; } —— 它和 Bootstrap 5 的变量冲突，且 !important 增加维护成本
别用 SVG、图标字体或背景图做分隔符：高对比度模式下可能消失，也增加渲染负担
移动端窄屏时，避免用 text-overflow: ellipsis 截断中间项——最该保留的是当前页名，而它恰好在末尾，常被误截

最稳的方案：5 个以内固定页面，直接手写 HTML 结构；超过这个量，用 Hugo/Jekyll 的 {{ site.url }} 或 Vite 的 templateParameters 注入预置路径对象。动态生成不是懒，而是错——错在把语义交给了不可控的运行时环境。