作为一位资深的网站运营专家，我深知面包屑导航对于网站用户体验和搜索引擎优化（SEO）的重要性。它不仅能帮助用户清晰地了解自己在网站中的位置，还能引导搜索引擎更好地抓取和理解网站的层级结构。安企CMS（AnQiCMS）在设计之初就充分考虑了这一点，提供了强大而灵活的面包屑导航功能。今天，我们就来深入探讨在AnQiCMS中，如何轻松获取并遍历出面包屑导航的每个层级链接的名称和URL。

安企CMS如何提供面包屑导航？

在AnQiCMS中，面包屑导航的实现得益于其强大且灵活的模板标签体系。核心在于一个名为breadcrumb的标签，它专为生成面包屑导航而设计。通过简单的调用，这个标签就能智能地识别当前页面的位置，并自动构建出从首页到当前页面的完整路径，将每个层级的名称和对应的URL整理成一个可供模板调用的数据集合。这种设计极大地简化了前端开发者的工作，使得网站运营人员也能轻松地在模板中展示和定制面包屑导航。

深入理解面包屑导航标签：breadcrumb

breadcrumb标签是AnQiCMS模板中的一个万能工具，它能够根据当前页面的上下文，自动生成一个包含所有层级信息的数组。它的基本使用方式是：

{% breadcrumb 变量名称 with index="首页" title=true %}
    {# 遍历生成的面包屑数据 #}
{% endbreadcrumb %}

这里，变量名称是你为面包屑数据集合自定义的一个名称，例如，我们通常会使用crumbs这个名字来代表“面包屑”。

breadcrumb标签还提供了一些实用的参数，让你可以根据具体需求进行灵活配置：

  • index：这个参数用来设置面包屑导航中“首页”的显示名称。默认情况下，它会显示为“首页”。但如果你想让首页链接显示为“我的博客”或者其他名称，只需将其设置为index="我的博客"即可。
  • title：这个参数决定面包屑导航中是否显示当前页面的标题。当设置为title=true时（这也是默认值），当前页面的标题会作为最后一个面包屑项显示。如果设置为title=false，则当前页面标题将不会出现在面包屑中，这在某些设计中可能更符合预期。此外，你也可以直接传入一个字符串，例如title="文章详情"，来替代默认的当前页面标题。
  • siteId：对于使用AnQiCMS多站点管理功能的用户，siteId参数允许你指定从哪个站点获取面包屑数据。但在大多数单站点场景下，这个参数通常无需手动设置，系统会自动识别当前站点。

遍历面包屑层级：获取名称与URL

当breadcrumb标签执行完毕后，它会将所有层级的面包屑信息封装到一个数组对象中，并赋值给你在标签中定义的变量名称（例如crumbs）。这个数组中的每一个元素都代表一个面包屑层级，且每个元素都包含两个核心字段：

  • Name：表示当前面包屑层级的显示名称，比如“新闻动态”、“产品详情”等。
  • **Link：表示当前面包屑层级所对应的URL地址，点击后可以跳转到该页面。

要获取并遍历这些信息，我们可以结合AnQiCMS模板引擎的for循环标签。for循环可以逐一访问crumbs数组中的每个元素，并让我们能够访问到每个元素的Name和Link属性。

此外，在for循环中，我们还可以利用forloop.last这个内置变量来判断当前遍历的项是否是数组中的最后一个。这在渲染面包屑导航时非常有用，因为通常最后一个面包屑项是当前页面，它往往不应该被渲染成可点击的链接，而是以纯文本形式显示，并可能带有active样式。

实用代码示例与解析

下面是一个在AnQiCMS模板中获取并渲染面包屑导航的完整代码示例，它考虑了首页名称的自定义、当前页面标题的显示与否，以及最后一个层级不作为链接的常见需求：

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {# 使用 breadcrumb 标签获取面包屑数据，并命名为 crumbs #}
        {# 这里我们设置首页名称为“安企CMS主页”，并默认显示当前页面标题 #}
        {% breadcrumb crumbs with index="安企CMS主页" title=true %}
            {% for item in crumbs %}
                {# 判断是否是最后一个面包屑项 #}
                {% if forloop.last %}
                    {# 如果是最后一个，通常不作为链接，并添加active样式 #}
                    <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>

代码解析：

  1. <nav aria-label="breadcrumb"> 和 <ol class="breadcrumb">：这是标准的HTML5结构，用于声明面包屑导航的语义和样式容器。
  2. {% breadcrumb crumbs with index="安企CMS主页" title=true %}：
    • 我们调用了breadcrumb标签，并将生成的面包屑数据赋值给crumbs变量。
    • index="安企CMS主页"：将面包屑的第一个链接（即首页）的显示名称设置为“安企CMS主页”。
    • title=true：表示面包屑的最后一个项将显示当前页面的完整标题。
  3. {% for item in crumbs %}：这是一个for循环，它会逐一遍历crumbs数组中的每一个面包屑项。在每次循环中，当前项的数据会存储在item变量中。
  4. {% if forloop.last %}：这是模板引擎提供的一个特殊变量，forloop.last在当前循环是数组中的最后一项时为true，否则为false。我们利用这个特性来区分当前页面和历史路径页面。
  5. <li class="breadcrumb-item active" aria-current="page">{{ item.Name }}</li>：
    • 当forloop.last为true时，表示这是当前页面。我们将其渲染为<li>标签，并添加active类和aria-current="page"属性，这对于无障碍访问和样式表现都非常重要。
    • {{ item.Name }}：直接输出当前面包屑项的显示名称。
  6. <li class="breadcrumb-item"><a href="{{ item.Link }}">{{ item.Name }}</a></li>：
    • 当forloop.last为false时，表示这是历史路径中的一个页面。我们将其渲染为一个带有链接的<li>标签。
    • href="{{ item.Link }}"：将面包屑项的URL赋值给<a>标签的href属性。
    • {{ item.Name }}：输出面包屑项的显示名称作为链接文本。
  7. {% endfor %} 和 {% endbreadcrumb %}：这两个标签分别是for循环和breadcrumb标签的结束标记，确保了模板结构的完整性。

通过这段代码，你就能在AnQiCMS网站的任何页面上，灵活且规范地展示面包屑导航，不仅提升了用户体验，也为网站的SEO打下了坚实基础。

总结

AnQiCMS的面包屑导航功能，通过简洁的breadcrumb标签及其灵活的参数，使得获取和遍历网站层级信息变得异常简单。无论是定制首页名称、控制当前页面标题的显示，还是根据UI/UX需求调整链接样式