在网站导航中，面包屑（Breadcrumb）导航是一种非常实用的辅助工具。它能清晰地展示用户在网站中的当前位置，提供便捷的返回路径，从而显著提升用户体验，并对搜索引擎优化（SEO）也有积极作用，帮助搜索引擎理解网站的结构层级。

AnQiCMS 充分考虑了这一点，为您提供了一个简洁而强大的方式来在页面上显示面包屑导航。借助内置的模板标签，即使没有复杂的编程知识，也能轻松实现这一功能。

AnQiCMS 中的面包屑导航标签

AnQiCMS 提供了一个专门的模板标签 breadcrumb 来处理面包屑导航的生成和显示。这个标签会根据您当前页面的 URL 结构，自动构建出一条完整的导航路径。

使用 breadcrumb 标签的基本语法如下：

{% breadcrumb crumbs with index="首页" title=true %}
    {# 您的面包屑导航渲染代码 #}
{% endbreadcrumb %}

这里，crumbs 是您为面包屑列表定义的变量名，您可以根据自己的喜好来命名。index 和 title 是两个常用的参数，用于对面包屑导航进行个性化设置：

  • index：这个参数用来设置面包屑导航中“首页”的显示文本。默认情况下，它会显示为“首页”。如果您想修改为“网站主页”或“Home”，只需将 index="网站主页" 传入即可。
  • title：此参数控制当前页面的标题在面包屑导航中的显示方式。
    • 当设置为 true 时（默认值），面包屑会显示完整的当前页面标题。
    • 当设置为 false 时，则不会显示当前页面的标题。
    • 您也可以传入一个自定义字符串，例如 title="文章详情"，这样当前页面的部分就会显示为您指定的文字。
  • siteId：这是一个针对多站点用户的高级参数，通常您不需要设置。如果您在后台管理了多个站点，并需要调用特定站点的数据，可以通过此参数指定站点 ID。

当 breadcrumb 标签执行后，它会把生成的面包屑路径存储到您定义的 crumbs 变量中。crumbs 是一个包含多个对象的数组，每个对象代表导航路径中的一个环节，它们拥有两个关键字段：

  • Name：表示该环节的显示名称。
  • Link：表示该环节对应的 URL 地址。

如何在页面上显示面包屑导航

实现面包屑导航通常建议将其放置在网站的公共模板文件（例如 base.html）中，或者创建一个独立的模板片段（如 partial/breadcrumb.html），然后通过 include 标签将其引入到需要显示的页面中。这样做的好处是，一旦修改面包屑的显示逻辑或样式，所有引用它的页面都会同步更新，极大提高了维护效率。

下面是一个在模板中显示面包屑导航的示例代码：

<nav class="breadcrumb-nav">
    {% breadcrumb breadcrumbs with index="首页" title=true %}
    <ol class="breadcrumb-list">
        {% for item in breadcrumbs %}
            <li class="breadcrumb-item">
                <a href="{{ item.Link }}">{{ item.Name }}</a>
            </li>
        {% endfor %}
    </ol>
    {% endbreadcrumb %}
</nav>

在这段代码中：

  1. 我们使用 nav 标签包裹整个面包屑导航，并赋予 breadcrumb-nav 类名，方便后续的样式控制。
  2. {% breadcrumb breadcrumbs ... %} 定义了面包屑数据源，并将其赋值给 breadcrumbs 变量。
  3. {% for item in breadcrumbs %} 循环遍历 breadcrumbs 数组中的每一个导航项。
  4. 在循环内部，{{ item.Link }} 会输出当前导航项的链接，{{ item.Name }} 则输出其显示名称。我们将其放置在 <li> 标签内，以列表的形式呈现。
  5. 最后，记得使用 {% endbreadcrumb %} 标签来结束面包屑标签块。

如果您希望进行更多个性化设置，可以这样调整 breadcrumb 标签的参数：

  • 修改首页文本并禁用当前页标题：

    {% breadcrumb breadcrumbs with index="网站主页" title=false %}

    这样，面包屑的第一个环节会显示为“网站主页”，且当前页面本身的标题不会出现在面包屑的末尾。

  • 自定义当前页标题显示文本：

    {% breadcrumb breadcrumbs with index="首页" title="当前页面信息" %}

    此时，面包屑的最后一个环节将显示为“当前页面信息”，而不是页面本身的实际标题。

小结

AnQiCMS 的 breadcrumb 标签让网站的面包屑导航功能变得触手可及。只需几行简单的模板代码，您就可以为用户提供清晰的导航路径，并优化网站的层级结构。同时，配合 CSS 样式，您可以轻松地将面包屑导航融入网站的整体设计中，提供美观且功能完备的用户体验。

常见问题 (FAQ)

Q1：面包屑导航会自动识别网站的层级结构吗？ A1：是的，AnQiCMS 的 breadcrumb 标签会根据当前页面的 URL 路径以及内容（如文章、分类、单页等）与系统内数据的关联，智能地解析并生成对应的层级路径。您无需手动指定每个层级。

Q2：如何修改面包屑导航的显示样式？ A2：breadcrumb 标签输出的是标准的 HTML 列表结构（通常是 <ol> 或 <ul> 包裹 <li> 元素）。因此，您可以使用 CSS 对其进行完全的样式自定义。只需为面包屑的容器或列表项添加合适的类名（如示例中的 breadcrumb-nav, breadcrumb-list, breadcrumb-item），然后编写相应的 CSS 规则即可。

Q3：我能在特定页面禁用面包屑导航或只在某些页面显示吗？ A3：当然可以。您可以在页面的模板文件中使用条件判断来控制 breadcrumb 标签的渲染。例如，在不需要显示面包屑的页面模板中不放置 {% breadcrumb ... %} 代码，或者使用 {% if 当前页面不需要面包屑 %}{% else %}{% breadcrumb ... %}{% endif %} 这样的逻辑来有选择地显示。