breadcrumbs 相关问题

用户界面中使用的导航辅助工具

没有子组件/路由的面包屑

我试图遵循带有动态标签的 Angular breadcrumbs 中的答案，为我的 Angular 应用程序实现面包屑导航。与我的应用程序的不同之处在于我的组件没有 ch...

angularjs breadcrumbs

回答 1 投票 0

Emacs 的图形面包屑

有人知道 Emacs 的图形面包屑吗？我希望我当前正在编辑的文件的路径显示在顶部的某处。

emacs breadcrumbs graphical-interaction

回答 3 投票 0

将 schema.org 数据添加到面包屑中

我正在使用 Breadcrumb NavXT 和 Filter Everything。我正在尝试将产品类别名称添加到自定义存档页面（不是分类存档）的路径中我能够利用

wordpress breadcrumbs

回答 1 投票 0

在 Angular 18 中使用路由历史记录实现面包屑系统

我目前正在使用路由历史记录实现面包屑系统。当当前路径是根路径时就会出现问题。例如，我设置了加载用户表视图的根路径。当我们...

angular primeng breadcrumbs

回答 1 投票 0

从 AIOSEO 面包屑中删除 WooCommerce 商店链接

我正在尝试从 AIOSEO 面包屑中删除 (woo commerce)SHOP 链接。我有自定义类别页面，因此删除链接至关重要。我可以找到 YOAST 和 Woo Commerce 的过滤器，但找不到...

php woocommerce hook-woocommerce breadcrumbs

回答 1 投票 0

UI 工作流程：直观地创建一系列指令

关于允许用户为一组给定任务创建自己的工作流程（以任务或操作序列形式的指令）的用户界面有什么建议吗？我在想一些......

user-interface workflow task breadcrumbs operations

回答 1 投票 0

从 WP Genesis 面包屑中删除当前页面

如何从 Genesis WordPress 网站上的面包屑路径中删除当前页面？我从上到下检查了 breadcrumb.php，但不确定我应该连接哪个过滤器。谢谢！

wordpress breadcrumbs genesis

回答 3 投票 0

如何使用 Bootstrap 5 面包屑创建类似箭头的步进器

我正在尝试创建一个类似于本示例中的步进器。我通过在面包屑项目上使用 text-bg-success 或 text-bg-primary 类对步进器应用着色，如下所示。然而...

css twitter-bootstrap bootstrap-5 breadcrumbs

回答 1 投票 0

如何使用 Bootstrap 5 breadvrumb 创建类似箭头的步进器

我正在尝试创建一个类似于本示例中的步进器。我通过在面包屑项目上使用 text-bg-success 或 text-bg-primary 类对步进器应用着色，如下所示。然而...

css twitter-bootstrap bootstrap-5 breadcrumbs

回答 1 投票 0

应使用什么语义 HTML 标记来创建面包屑？

应该使用什么有意义的 HTML 标签来创建面包屑？我有一个使用未排序列表创建的菜单栏，因为它是一个列表： <... 应该使用什么有意义的 HTML 标签来创建面包屑？我有一个使用未排序列表创建的菜单栏，因为它是一个列表： <ul id="navigation"> <li><%= Html.ActionLink("Home", "Index", "Home") %></li> <li><%= Html.ActionLink("Contacts", "Index", "Contacts") %></li> </ul> 现在，我决定在菜单下方放置一个面包屑，问题是，我不知道应该使用什么标签。我想尽可能使用有意义的标签。请帮助我... 标记面包屑的方法有很多。一个清单就好了。有序列表更适合面包屑，因为它是按特定顺序排列的链接列表。如果您不想使用列表，您可以将它们作为一组链接保留在 div 中。不过，如果您使用的是 HTML5，您可能希望将它们放入 nav 元素中。最后，HTML5 规范建议使用 p 元素，因为它们可以被理解为关于如何访问特定页面的指导段落。旧帖子，但在搜索中排名很高，我认为自从最初提出这个问题以来，事情已经发生了一些变化。在 html5 网站中，我会使用导航标签，因为从技术上讲，面包屑是在网站中导航的。如果您想更清楚地了解它们是什么，您可以添加微数据来表明它们是面包屑。来自 Google 的示例和 html5doctor <nav> <ul> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/dresses" itemprop="url"> <span itemprop="title">Dresses</span> </a> </li> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/dresses/real" itemprop="url"> <span itemprop="title">Real Dresses</span> </a> </li> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url"> <span itemprop="title">Real Green Dresses</span> </a> </li> </ul> 如果您不想使用有序列表或段落标签，则始终可以使用嵌套列表来在语义上表示面包屑的层次结构性质。以下示例来自 Mark Newhouse 的 List Apart 文章，题为“CSS 设计：驯服列表”。 <div id="bread"> <ul> <li class="first">Home <ul> <li>» Products <ul> <li>» Computers <ul> <li>» Software</li> </ul> </li> </ul></li> </ul></li> </ul> </div> 2021 年快速更新：射频达： <ol vocab="https://schema.org/" typeof="BreadcrumbList"> <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="https://example.com/dresses"> <span property="name">Dresses</span></a> <meta property="position" content="1"> </li> <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="https://example.com/dresses/real"> <span property="name">Real Dresses</span></a> <meta property="position" content="2"> </li> </ol> 微观数据： <ol itemscope itemtype="https://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="https://example.com/dresses"> <span itemprop="name">Dresses</span></a> <meta itemprop="position" content="1" /> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="https://example.com/dresses/real"> <span itemprop="name">Real Dresses</span></a> <meta itemprop="position" content="2" /> </li> </ol> 此示例取自https://schema.org/BreadcrumbList 如http://data-vocabulary.org所述：自 2011 年 6 月以来，几个主要搜索引擎一直在合作开发一个名为 Schema.org 的新通用数据词汇表对我来说，使用无序列表作为面包屑似乎完全合理；每个应用程序特定结构并不总是有一个命名标签，而且您毕竟显示的是面包屑列表。您可以使用 css 使面包屑按照您想要的方式显示。要创建面包屑，您可以使用以下方式：（如果您使用的是 html5，您应该使用 nav 作为包装器来告诉机器人有一些内部链接） Matthew Rankin 的回答描述了这一点。第二种方式使用 ol list 而不是第一种方式，如下所示告诉机器人项目之间有顺序： <nav> <ol class="breadcrumb"> <li><a href="#">Top Level</a></li> <li><a href="#">Second Level</a></li> <li><a href="#">Third Level</a></li> <li>Current Item</li> </ol> </nav> 第三种方法是使用p标签和rel up作为链接（rel up不是最终的！） <nav> <p> <a href="/" rel="index up up up">Main</a> > <a href="/products/" rel="up up">Products</a> > <a href="/products/dishwashers/" rel="up">Dishwashers</a> > <a>Second hand</a> </p> </nav> 看看：https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html 如果需要，您可以与 schema.org 结合（由 @SCabralO 建议），但保留本示例中的属性。让它完美但简单;) 始终查看 Jacob Nielsen：他自 2003 年以来一直推荐“>”。 W3C 的 Web Accessibility Initiative (WAI) 发布的《ARIA 创作实践指南》建议在 <ol> 内使用有序列表 (<nav>)，并带有适当的 aria 标签，以便通过辅助技术进行标记。例如： <nav aria-label="Breadcrumb"> <ol> <li> <a href="/">Home</a> </li> <li> <a href="/posts">Posts</a> </li> <li> <a href="/posts/how-to-mark-up-breadcrumbs" aria-current="page"> How to mark up breadcrumbs </a> </li> </ol> </nav>

html semantics breadcrumbs

回答 9 投票 0

从 WooCommerce 面包屑中删除“主页”和“商店”

我的 woocommerce 面包屑有问题。事实上，在我想要的实际类别之前总是有“主页/商店/”。我只想有特定的类别，

wordpress woocommerce breadcrumbs

回答 1 投票 0

从 WooCommerce 面包屑中删除“主页”和“商店”

我的 woocommerce 面包屑有问题。事实上，在我想要的实际类别之前总是有“主页/商店/”。我只想有特定的类别，

wordpress woocommerce breadcrumbs

回答 1 投票 0

Woocommerce 标签档案面包屑

我想在 woocommerce 标签存档页面（例如 website.com/product-tag/jesse-marsh/）上显示面包屑。目前，面包屑在 woocommerce 产品和类别页面上可见。我...