面包屑導(dǎo)航的三層正確性：視覺(jué)、可訪問(wèn)性與結(jié)構(gòu)化數(shù)據(jù)

一個(gè)看似簡(jiǎn)單的面包屑組件，實(shí)際需要同時(shí)滿足三個(gè)互不重疊的評(píng)判標(biāo)準(zhǔn)——而用戶只能看到其中一個(gè)。

為什么面包屑比看起來(lái)復(fù)雜

開發(fā)者常低估面包屑的復(fù)雜度。它不只是視覺(jué)上的路徑指示器，還承擔(dān)著屏幕閱讀器的導(dǎo)航語(yǔ)義，以及搜索引擎結(jié)果頁(yè)的結(jié)構(gòu)化展示。

原文作者用 Breadcrumb.astro 同時(shí)處理這三層需求，并設(shè)計(jì)了一套無(wú)配置時(shí)的自動(dòng)回退機(jī)制。

核心數(shù)據(jù)結(jié)構(gòu)很簡(jiǎn)單：

interface Crumb { label: string; href?: string; }

最后一個(gè) crumb 的 href 為空，表示當(dāng)前頁(yè)面不可點(diǎn)擊。inverted 用于深色背景反色，noContainer 則跳過(guò)外層容器——當(dāng)面包屑嵌入已受限寬的布局時(shí)使用。

組件自動(dòng)前置"Home" crumb，避免每個(gè)調(diào)用處重復(fù)書寫。

自動(dòng)生成的邊界判斷

當(dāng)未傳入顯式 crumbs 時(shí)，組件從 URL 路徑推導(dǎo)：

過(guò)濾掉字面量 "page" 和純數(shù)字段——/blog/page/2 只生成"Blog"，跳過(guò)"Page"和"2"。分頁(yè)是結(jié)構(gòu)細(xì)節(jié)，不是內(nèi)容層級(jí)。

標(biāo)簽格式化規(guī)則：連字符轉(zhuǎn)空格，首字母大寫。"why-astro" → "Why Astro"。

作者坦承這不完美：slug "using-mdx" 會(huì)渲染成 "Using Mdx"，但符合該站點(diǎn)的命名慣例。

搜索引擎的隱形契約

第三層正確性完全不可見：Schema.org 的 BreadcrumbList 結(jié)構(gòu)化標(biāo)記。

通過(guò) itemscope 和 itemprop 屬性內(nèi)聯(lián)在 HTML 中，讓搜索引擎能在結(jié)果頁(yè)直接展示面包屑路徑。

三層需求，三種受眾：用戶看視覺(jué)，屏幕閱讀器解析語(yǔ)義，搜索引擎消費(fèi)結(jié)構(gòu)化數(shù)據(jù)。任何一層出錯(cuò)，組件都不算完成。

這種設(shè)計(jì)思路是否值得引入你的項(xiàng)目？當(dāng)"夠用"和"正確"產(chǎn)生沖突時(shí)，你會(huì)為不可見的兩層額外投入多少成本？