`breadcrumb`标签如何生成面包屑导航以提升用户对页面层级的理解？

在复杂的网站内容结构中，用户有时会感到迷失，不知道当前页面所处的位置。这时，一种被称为“面包屑导航”（Breadcrumb Navigation）的辅助导航方式就显得尤为重要。它不仅能清晰地展示用户从首页到当前页面的路径，还能帮助用户快速理解网站的层级结构，从而提升浏览体验。对于使用 AnQiCMS 构建的网站而言，系统内置的 breadcrumb 标签正是生成这种高效导航的利器。

让页面结构一目了然：AnQiCMS breadcrumb 标签生成面包屑导航的实战指南

AnQiCMS 的 breadcrumb 标签之所以强大，在于它能自动识别您网站内容的层级关系，并将其直观地展现在用户面前。无论是文章、产品还是自定义模型下的分类页面，breadcrumb 都能根据当前页面所在的分类、模块甚至具体的文档，智能地构建出一条从网站首页开始的完整路径。例如，当用户访问一篇属于“技术文章”分类下的“AnQiCMS 模板开发”文章时，面包屑导航可能会显示为“首页 > 技术文章 > AnQiCMS 模板开发”。这不仅让用户对当前页面的“出身”一目了然，也为他们提供了方便快捷的返回上级页面的入口。

breadcrumb 标签的使用方法

在 AnQiCMS 的模板中，使用 breadcrumb 标签非常简单直观。您只需要在需要显示面包屑导航的位置，插入如下基本的代码结构：{% breadcrumb crumbs %} ... {% endbreadcrumb %}。

这里的 crumbs 是一个由 AnQiCMS 自动生成的变量，它包含了组成面包屑导航的每一个环节（通常是链接和名称）。您可以像遍历列表一样，使用 for 循环来逐一输出这些导航项。每个导航项都包含 Name (链接文本) 和 Link (链接地址) 两个关键属性。一个典型的用法可能是：

<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>

这段代码会渲染出一个符合标准 HTML 语义化的面包屑导航，利用 forloop.last 判断是否是当前页，以便进行样式区分。

灵活定制：提升用户体验的参数

AnQiCMS 的 breadcrumb 标签提供了几个实用的参数，让您可以根据网站的设计需求进行灵活定制：

首先是 index 参数，它允许您自定义面包屑导航中“首页”的显示文本。默认情况下，它会显示为“首页”。如果您希望将其改为“网站主页”或您的品牌名称，可以这样设置：{% breadcrumb crumbs with index="我的网站主页" %}。

其次是 title 参数，这个参数决定了当前页面标题是否会显示在面包屑导航的末尾。默认值为 true，即显示当前页面的完整标题。但有时，当前页面的 H1 标题已经非常醒目，您可能不希望面包屑中重复显示，这时可以将其设置为 false：{% breadcrumb crumbs with title=false %}。您甚至可以直接指定一个字符串作为当前页面在面包屑中的显示文本，例如：{% breadcrumb crumbs with title="文章详情页" %}。

此外，还有一个 siteId 参数，它主要用于多站点管理环境下，如果您需要调用特定站点的数据来生成面包屑。对于单站点用户，通常无需关注此参数，系统会自动识别当前站点。

掌握这些参数，您就可以轻松地调整面包屑