面包屑导航需手动编写语义化HTML结构：用包裹，内部用和，当前页加aria-current="page"；数据来自路由元信息，静态页通过构建工具注入，且每级必须有真实可访问URL。
面包屑导航不是自动出来的，HTML 页面里必须显式写清楚层级关系，否则用户点不了、SEO 也抓不到。
面包屑 HTML 结构怎么写才符合语义和可访问性
用 <nav aria-label="Breadcrumb"></nav> 包裹，内部用 <ol></ol>（有序列表）而非 <div> 或 <code><ul></ul>，每个层级用 <li>，当前页用 <li aria-current="page"> 标明。
- 搜索引擎和读屏软件依赖这个结构识别层级，
<ul></ul>会被当成普通列表，丢失导航语义 -
aria-current="page"是关键，它告诉辅助技术“这是终点”，避免把当前页也渲染成可点击链接 - 不要用纯 CSS 伪元素（如
::before）画分隔符，应使用真实字符（如>）或<span></span>元素，确保可复制、可聚焦、可翻译
Vue/React 项目中面包屑数据从哪来、怎么传到 HTML
框架不会帮你生成语义化 HTML 面包屑，你得把路由元信息（比如 meta.breadcrumb 或 handle.breadcrumb）转成 <ol></ol> 的 <li> 列表节点，再挂到 DOM 上。
- Vue Router 4 中，
router.currentRoute.value.matched是一个数组，按从根到叶子顺序排列，遍历它，取每个 route 的meta.breadcrumb字符串拼<li> - React Router v6 推荐用
useMatches()，每个匹配项的handle?.breadcrumb才是 SSR 安全的来源，location.pathname切分不可靠（比如/api/v1/order和/shop/order路径相似但语义不同） - 带参数的路径（如
/item/:id）不能直接显示:id，必须等接口返回商品名后，用响应式变量重 render 对应<li>
静态 HTML 商品页怎么手动维护面包屑又不重复写
如果不用框架，面包屑就得硬编码在每个 HTML 文件里，但可以通过模板包含或构建时注入来减少出错。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 用构建工具（如 Webpack + html-webpack-plugin）配合
templateParameters，把面包屑数组作为变量注入模板，避免手写<li>出错 - 服务端渲染场景（如 PHP/Node.js），把面包屑逻辑抽成函数，例如
renderBreadcrumb(['首页', '耳机', 'WH-1000XM5'])，统一生成<ol></ol>片段 - 绝对别用 JS 在页面加载后动态拼接 DOM 来补面包屑——SEO 抓不到，首屏无内容，Lighthouse 会报“缺少导航上下文”
最常被忽略的是：面包屑里的每一段文字都得对应真实可访问的 URL，且中间层级不能断。比如「首页 > 耳机 > 降噪耳机 > WH-1000XM5」，其中「降噪耳机」这个 <li> 必须有真实 href，否则用户卡在详情页就回不去上一级分类了。
