在网站内容日益丰富的今天，用户常常需要在网站中穿梭于不同页面。为了帮助访客了解他们当前所处的位置，并提供便捷的返回路径，面包屑导航（Breadcrumb Navigation）应运而生。它就像地图上的路径指示，让用户一目了然地知道“我从哪里来，要到哪里去”。

AnQiCMS 深知面包屑导航对于用户体验和网站结构的重要性，因此在模板标签中内置了专门的 breadcrumb 标签，让网站开发者和运营者能够轻松生成动态、灵活的面包屑导航。接下来，我们将详细了解这个便捷的标签如何使用。

生成面包屑导航的基本方法

在 AnQiCMS 的模板中，生成面包屑导航非常直观。你可以使用 breadcrumb 标签来获取当前页面的完整路径信息。它通常与 for 循环结合使用，遍历路径中的每一个环节。

例如，一个基本的面包屑导航代码片段可能看起来像这样：

<div>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            {% breadcrumb crumbs %}
            {% for item in crumbs %}
                {% if forloop.Last %}
                    <li class="breadcrumb-item active" aria-current="page">{{item.Name}}</li>
                {% else %}
                    <li class="breadcrumb-item"><a href="{{item.Link}}">{{item.Name}}</a></li>
                {% endif %}
            {% endfor %}
            {% endbreadcrumb %}
        </ol>
    </nav>
</div>

在这段代码中，{% breadcrumb crumbs %} 和 {% endbreadcrumb %} 包裹了生成面包屑的逻辑。crumbs 是一个数组对象，代表了从首页到当前页面的所有层级。我们通过 {% for item in crumbs %} 遍历这个数组，item.Name 表示每个层级的显示名称（如“首页”、“产品中心”、“某产品名称”），item.Link 则表示该层级对应的链接地址。通过判断 forloop.Last 可以区分当前页是否为面包屑路径的最后一项，从而赋予其不同的样式或行为（比如最后一项通常是不可点击的纯文本）。

灵活配置面包屑导航的参数

breadcrumb 标签不仅简单易用，还提供了几个实用的参数，帮助你根据网站的具体需求进行个性化定制。

  1. title 参数：控制末尾标题的显示 title 参数用于控制面包屑导航最后一项（通常是当前页面的标题）的显示方式。

    • 当你设置 title=true（这也是默认值）时，面包屑会显示完整的文档或页面标题作为最后一项。
    • 如果你希望不显示当前页面标题，可以设置为 title=false。
    • 更进一步，你也可以将 title 设置为自定义的字符串，例如 title="文章详情"，这样面包屑的最后一项将统一显示为你指定的文字，而不是页面的具体标题。

  2. index 参数：自定义首页名称 面包屑导航的起点通常是“首页”，但有时你可能希望将其显示为“我的博客”、“公司官网”等自定义名称。index 参数就能满足这个需求。

    • 例如，使用 index="我的博客" 就能将面包屑的起始项从默认的“首页”改为“我的博客”。

  3. siteId 参数：多站点环境下的数据调用 对于使用 AnQiCMS 多站点管理功能的用户，siteId 参数允许你指定从哪个站点获取面包屑数据。

    • 大多数情况下，如果你只运行一个站点，或者希望面包屑反映当前站点的路径，则无需填写此参数。它会自动获取当前站点的路径信息。

综合示例：构建多样化的面包屑导航

了解了参数后，我们可以尝试构建更灵活的面包屑导航。

假设我们希望：

  • 首页显示为“我的主页”。
  • 在文章详情页，面包屑的最后一项统一显示为“详情内容”，而不是具体的文章标题。
  • 其他分类页面则正常显示分类名称。
<div>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            {% breadcrumb crumbs with index="我的主页" title="详情内容" %}
            {% for item in crumbs %}
                {% if forloop.Last %}
                    <li class="breadcrumb-item active" aria-current="page">{{item.Name}}</li>
                {% else %}
                    <li class="breadcrumb-item"><a href="{{item.Link}}">{{item.Name}}</a></li>
                {% endif %}
            {% endfor %}
            {% endbreadcrumb %}
        </ol>
    </nav>
</div>

通过这样的设置，AnQiCMS 会根据当前页面类型智能地生成面包屑路径，并在文章详情页的末尾统一显示“详情内容”，同时将首页显示为“我的主页”。

实践中的一些建议

在实际的模板制作中，为了提高代码的复用性和可维护性，我们通常会将面包屑导航的代码片段单独存放在 partial 目录下，例如 partial/breadcrumb.html。然后在需要显示面包屑的页面，通过 {% include "partial/breadcrumb.html" %} 来引用。这样，当面包屑的逻辑或样式需要调整时，只需修改一个文件即可。

面包屑导航不仅有助于提升用户体验，从 SEO 的角度来看，它也能清晰地向搜索引擎展示网站的结构层级，有助于改善网站的抓取和排名。通过 AnQiCMS 的 breadcrumb 标签，你可以轻松实现一个既美观又实用的面包屑导航系统。

常见问题 (FAQ)

Q1: 为什么我的文章详情页，面包屑导航的最后一项没有显示文章标题，而是其他文字或没有显示？ A1: 这很可能是因为 breadcrumb 标签的 title 参数被设置了特定的值或者 false。请检查你的模板代码中 {% breadcrumb crumbs %} 这一行，如果包含 title="自定义文字" 或 title=false，它将覆盖默认的显示文章标题行为。要显示文章标题，可以移除 title 参数或将其设置为 title=true。

Q2: 如何更改面包屑导航中“首页”的显示文字？ A2: 你可以通过 breadcrumb 标签的 index 参数来修改“首页”的显示文字。例如，在标签中添加 index="我的主页" 或 index="网站首页" 即可将默认的“首页”替换为你指定的文字。

Q3: 面包屑导航的样式看起来不太美观，AnQiCMS 提供样式设置吗？ A3: AnQiCMS 的 breadcrumb 标签主要负责生成面包屑导航的数据结构（即路径名称和链接），并将其输出为 HTML 骨架。至于美观的样式，这通常属于前端（CSS）的设计范畴。你需要在网站的样式表（CSS文件）中，针对面包屑导航的 HTML 元素（如 <ol class="breadcrumb"> 和 <li class="breadcrumb-item">）编写相应的样式规则，以实现你期望的视觉效果。你可以将面包屑的代码片段放到 partial/ 目录下，方便集中管理样式和结构。