在网站运营中，清晰的导航结构对于提升用户体验和搜索引擎优化（SEO）至关重要。设想一下，当访问者进入你的网站深处，如果能有一个路径指引，告诉他们“您现在在这里”，是不是会让他们感到安心和方便？这就是面包屑导航（Breadcrumb Navigation）的作用。它就像童话故事里洒下的面包屑，帮助用户在网站中轻松回溯，理解当前页面在整个网站结构中的位置。

在AnQiCMS中，由于其灵活的模板机制和对SEO友好的设计，为网站添加面包屑导航变得异常简单和高效。本文将带你一步步了解如何在AnQiCMS模板中生成并显示这种实用的导航元素。

理解 AnQiCMS 中面包屑导航的核心机制

AnQiCMS提供了一个名为breadcrumb的专属模板标签，它能自动根据你当前页面的URL结构，智能生成一串导航路径数据。这个标签的使用方式非常直观，通常我们会把它放在页面顶部，给访问者提供一个清晰的“回家之路”。

在使用breadcrumb标签时，你需要定义一个变量名来接收生成的面包屑数据，例如crumbs。这个crumbs变量将是一个包含多个导航项的数组对象，每个导航项都具有Name（链接名称）和Link（链接地址）这两个关键属性。通过遍历这个数组，我们就能动态地在页面上构建出完整的面包屑导航。

详细步骤：在 AnQiCMS 模板中实现面包屑导航

第一步：准备面包屑代码片段文件

为了让面包屑导航在各个页面都能方便地被调用，并且保持代码的整洁和模块化，我们强烈建议将面包屑的代码单独存放在一个模板片段文件中。按照AnQiCMS的模板约定，通常这类片段文件会放在template/你的模板目录/partial/目录下。

你可以创建一个名为 breadcrumb.html 的文件，路径类似于：/template/你的模板目录/partial/breadcrumb.html。

第二步：编写面包屑导航模板代码

在新创建的breadcrumb.html文件中，我们将利用breadcrumb标签和for循环来构建面包屑导航的HTML结构。

以下是一个常用的面包屑导航代码示例，它不仅生成了导航路径，还考虑了当前页面的高亮显示：

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {%- breadcrumb crumbs with index="首页" 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>

在这个代码片段中：

  • {%- breadcrumb crumbs ... %} 定义了面包屑数据将被赋值给crumbs变量。
  • {%- for item in crumbs %} 循环遍历每一个面包屑导航项。
  • forloop.Last 是一个非常有用的内置变量，用于判断当前循环是否是最后一项。我们利用它来区分当前页面（通常是不可点击的）和其他可点击的父级页面。
  • item.Name 显示导航项的文本，item.Link 提供导航项的链接地址。
  • {%- 和 -} 用来移除标签所在行的空白字符，使得最终输出的HTML代码更加整洁。

第三步：自定义面包屑导航的显示行为

breadcrumb标签提供了几个参数，让你能灵活控制面包屑的显示方式：

  1. index 参数：设置首页名称 默认情况下，breadcrumb标签会将导航的起点显示为“首页”。如果你希望更改这个名称，比如改为“我的博客”或“主页”，只需简单地调整index参数即可。 例如：{% breadcrumb crumbs with index="我的网站主页" %}

  2. title 参数：控制当前页标题的显示 对于文档详情页或单页面，你可能希望面包屑的最后一项是当前页面的标题。title参数就派上了用场。

    • title=true（默认值）：会自动显示当前页面的标题（如文章标题、产品名称等）。
    • title=false：则不显示当前页面的标题。
    • title="自定义文本"：如果你想统一显示一个固定词，比如在文章详情页显示title='文章内容'，它就会显示这个自定义的文字。

    你可以根据页面类型或设计需求，灵活设置title参数。

  3. siteId 参数（多站点场景） 如果你在AnQiCMS中启用了多站点管理功能，并且希望在特定站点调用其他站点的数据，breadcrumb标签也支持siteId参数。不过在大多数单站点情况下，你通常无需关心这个参数。

第四步：在页面中引入面包屑导航

有了独立的breadcrumb.html文件后，你只需要在需要显示面包屑的模板文件中（例如detail.html或list.html），使用include标签将其引入。通常，面包屑会放置在页面的主内容区域上方，或者紧跟在网站头部导航之后。

”`twig {% extends ‘base.html’ %} {# 假设你的页面继承了 base.html #}

{% block header %}

{# 你的网站头部导航代码 #}

{% endblock %}

{% block main_content %}

{# 在这里引入面包屑导航 #}
{% include "partial/breadcrumb.html" %}

{# 页面主内容区域 #}
<div class="page-content">
    <h1>欢迎来到 {{ pageTitle }}</h1>
    <p>这是页面的详细内容...</p>
</div>

{%