在网站运营中，清晰的导航路径对于用户体验至关重要。面包屑导航（Breadcrumb Navigation）就像现实生活中的线索，它清晰地展示了用户在网站中的当前位置，让用户一目了然地知道自己身处何处，并能快速返回上一级或更高级别的页面。这不仅能帮助用户快速理解网站结构，提升用户体验，对于搜索引擎优化（SEO）也大有裨益，因为它能帮助搜索引擎更好地理解网站的层级结构。

AnQiCMS 作为一款功能强大且注重用户体验的内容管理系统，内置了简单易用的模板标签，让我们能够轻松地在页面中集成面包屑导航，无需复杂的编程即可实现。

如何在 AnQiCMS 模板中显示面包屑导航？

在 AnQiCMS 模板中，实现面包屑导航的核心是 breadcrumb 标签。这个标签会智能地将当前页面的完整路径解析并生成为一个列表数据，供我们在模板中循环展示。

基础用法

使用 breadcrumb 标签时，您需要为其指定一个变量名来接收生成的路径数据。例如，我们可以将其命名为 crumbs。然后，您可以通过 for 循环遍历这个 crumbs 变量，取出每个路径项的名称 (Name) 和链接 (Link) 并显示出来。

以下是一个基本的面包屑导航实现代码示例：

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

在这段代码中：

  • {% breadcrumb crumbs %}：声明并生成面包屑路径数据，存储在 crumbs 变量中。
  • {% for item in crumbs %}：遍历 crumbs 数组，每个路径项都存储在 item 变量中。
  • {{item.Link}}：获取当前路径项的链接地址。
  • {{item.Name}}：获取当前路径项的显示名称。
  • {% if forloop.Last %}：这是一个内置的循环变量，用于判断当前是否是循环中的最后一个元素。通常，面包屑的最后一个元素（即当前页面）是不带链接的纯文本。

通过上述代码，AnQiCMS 会自动根据当前页面类型（文章详情页、分类列表页、单页面等）和网站层级结构，动态生成从网站首页到当前页面的完整导航路径。

定制您的面包屑导航

breadcrumb 标签还提供了一些参数，让您可以根据实际需求进行更精细的控制。

  1. 自定义首页名称 (index 参数) 默认情况下，面包屑导航的起始点会显示为“首页”。如果您想改变这个文字，比如显示为“我的博客”、“网站主页”或者其他品牌名称，可以通过 index 参数来设置。

    <nav class="breadcrumb-nav">
    <ol class="breadcrumb">
        {% breadcrumb crumbs with index="我的专属博客" %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {% if forloop.Last %}
                        {{item.Name}}
                    {% else %}
                        <a href="{{item.Link}}">{{item.Name}}</a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

    上述代码会将面包屑导航的起始点显示为“我的专属博客”。

  2. 控制当前页面标题的显示 (title 参数) 另一个常用功能是控制当前页面的标题是否显示在面包屑的末尾。AnQiCMS 默认会显示当前页面的完整标题。

    • title=true：显示当前页面的完整标题（这是默认行为，通常无需显式设置）。
    • title=false：不显示当前页面的标题。
    • title="自定义文字"：显示您指定的自定义文字作为当前页面的名称，而非实际标题。

    例如，如果您不希望在文章详情页的面包屑中显示文章标题，可以这样设置：

    <nav class="breadcrumb-nav">
    <ol class="breadcrumb">
        {% breadcrumb crumbs with title=false %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {% if forloop.Last %}
                        {{item.Name}}
                    {% else %}
                        <a href="{{item.Link}}">{{item.Name}}</a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

  3. 多站点支持 (siteId 参数) 对于运营多站点的用户，siteId 参数允许您指定从哪个站点获取面包屑数据。通常，如果您没有多站点需求或只在当前站点调用，这个参数无需设置，系统会自动识别当前站点的上下文。

    例如，要获取 ID 为 2 的站点的面包屑路径：

    {% breadcrumb crumbs with siteId="2" %}

    这个参数主要用于跨站点数据调用的高级场景，在大多数情况下您不需要用到。

将面包屑集成到模板中的**实践

为了保持模板代码的整洁和复用性，我们通常会将面包屑导航的代码单独存放在一个公共片段文件中，例如 partial/breadcrumb.html。

首先，在您的模板主题目录下的 partial 文件夹中创建一个名为 breadcrumb.html 的文件，并将上面提到的面包屑代码粘贴进去。

然后，在您的 base.html 或其他需要显示面包屑的页面模板中，使用 include 标签将其引入即可：

{# 您的页面顶部内容 #}

{% include "partial/breadcrumb.html" %}

{# 您的页面主体内容 #}

这样，无论哪个页面被访问，只要包含了这个片段，就能自动显示出对应的面包屑导航。当然，为了让面包屑导航在前端美观显示，您还需要为其添加相应的 CSS 样式，这通常涉及到调整字体大小、颜色、间距以及如何使用分隔符（如 > 或 /）来区分路径中的各个部分。

AnQiCMS 的 breadcrumb 标签提供了一种极其便捷的方式来为您的网站集成清晰、功能完善的面包屑导航。无论是为了提升用户体验、优化网站结构，还是为了更好地支持 SEO，这一功能都能帮助您的网站更上一层楼。

常见问题 (FAQ)

1. 为什么我的面包屑导航路径不正确或显示不全？

这通常与您的网站伪静态规则配置有关。请检查 AnQiCMS 后台“功能管理”下的“伪静态规则”设置，确保文档、分类、单页面等模块的 URL 规则配置正确且生效。不正确的伪静态规则可能导致 AnQiCMS 无法正确解析当前页面的完整层级关系，从而影响面包屑的生成。

2. 我想在面包屑路径的每个项目之间添加一个自定义分隔符（例如 >），应该怎么做？

您可以通过在 for 循环中判断当前是否是最后一个项目来添加分隔符。在上面的示例代码中，我们已经使用了 `{% if not forloop.Last %}