作为一名资深的网站运营专家，我深知在用户体验和搜索引擎优化（SEO）方面，网站的导航结构扮演着举足轻重的角色。清晰的面包屑导航（Breadcrumb Navigation）不仅能帮助用户了解他们在网站中的位置，还能为搜索引擎提供有价值的网站结构信息。

AnQiCMS 作为一款强大且灵活的内容管理系统，为我们提供了 {% breadcrumb %} 标签来轻松构建面包屑导航。然而，很多运营者在初次接触时，可能会对 {% breadcrumb %} 和 {% endbreadcrumb %} 这对标签之间究竟能放置哪些内容感到疑惑。今天，我就来为大家深度解读这对标签的奥秘。

AnQiCMS 面包屑导航：{% breadcrumb %}与{% endbreadcrumb %}的内涵与实践

简单来说，{% breadcrumb %} 和 {% endbreadcrumb %} 之间的区域，是您用来定义面包屑导航如何渲染和展示的“画板”。当 AnQiCMS 的模板引擎解析到 {% breadcrumb %} 标签时，它会动态生成一个包含当前页面完整导航路径信息的数组（或称列表），并将这个数组赋值给您在标签中指定的变量——通常我们命名为 crumbs。因此，在这对标签之间，我们主要放置的就是用于遍历并显示这个 crumbs 数组内容的循环结构。

这个 crumbs 变量的每一个元素都代表了导航路径中的一个环节，它至少包含两个核心属性：Name（链接的显示文本）和 Link（链接的目标 URL）。为了逐一展示这些环节，我们自然会用到模板引擎的 for 循环标签。

标签内部的核心结构：循环与数据渲染

在 {% breadcrumb crumbs %} 和 {% endbreadcrumb %} 之间，最核心的内容就是对 crumbs 变量的迭代。AnQiCMS 会自动根据当前页面的类型（如文章详情页、分类列表页、单页面等）生成从首页到当前页面的完整路径，并将每个路径节点的信息封装到 crumbs 数组中。

您需要做的是：

  1. 声明一个变量来接收面包屑数据： 在 {% breadcrumb %} 标签中，您会看到 {% breadcrumb crumbs %} 这样的写法，crumbs 就是您为这个面包屑数据数组起的名字。
  2. 使用 for 循环遍历这个变量： 针对 crumbs 数组中的每一个元素，您需要通过 {% for item in crumbs %} 来进行遍历。
  3. 渲染每个 item 的内容： 在 for 循环内部，item 变量代表了当前正在处理的面包屑节点。您可以访问 item.Name 获取该节点的显示文本，通过 item.Link 获取该节点的链接地址。通常，我们会将它们包裹在 <li><a> 这样的 HTML 结构中，以符合面包屑导航的语义化标准。

基础结构示例：

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb crumbs %}
            {# 在这里，我们遍历 crumbs 数组，item 代表每个面包屑节点 #}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {# 判断是否是最后一个元素（当前页面），最后一个通常不带链接 #}
                    {% if forloop.Last %}
                        <span class="active">{{ item.Name }}</span>
                    {% else %}
                        <a href="{{ item.Link }}">{{ item.Name }}</a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

在这个示例中：

  • 我们使用了 <nav> 和 <ol class="breadcrumb"> 标签来提供语义化和样式基础。
  • {% breadcrumb crumbs %} 告诉 AnQiCMS 生成面包屑数据并赋值给 crumbs。
  • {% for item in crumbs %} 循环遍历 crumbs 数组。
  • forloop.Last 是 AnQiCMS 模板引擎提供的循环辅助变量，用于判断当前循环是否是最后一个元素。这是在面包屑导航中常用的一种逻辑，即当前页面通常只显示文本而不提供链接。
  • {{ item.Link }} 和 {{ item.Name }} 分别输出了面包屑节点的链接和名称。

{% breadcrumb %} 标签自身携带的参数

尽管我们关注的是标签内部的内容，但 {% breadcrumb %} 标签自身携带的参数会直接影响 crumbs 数组的生成结果，从而间接影响您在标签对内部的展示逻辑。

  • index 参数： 用于设置面包屑导航中“首页”的显示名称。默认值为“首页”。
    • 示例：{% breadcrumb crumbs with index="我的博客" %} 会将首页链接显示为“我的博客”。
  • title 参数： 控制当前页面（面包屑路径的最后一个节点）的显示方式。
    • title=true（默认值）：显示当前页面的实际标题。
    • title=false：不显示当前页面的标题，当前页面在面包屑中将为空白。
    • title="自定义文本"：显示您指定的自定义文本作为当前页面的标题。
    • 示例：{% breadcrumb crumbs with title="当前位置" %} 会将当前页面显示为“当前位置”。
  • siteId 参数： 在多站点管理模式下使用。如果您需要调用特定站点的数据来生成面包屑，可以通过 siteId="N" 来指定。通常在单站点环境下，无需设置此参数。

定制化显示示例（首页名称与标题控制）：

假设我们想把首页名称从默认的“首页”改为“我的博客”，并且在当前页显示一个固定文本“详情页”，我们可以这样调整 {% breadcrumb %} 标签的参数：

”`twig