在构建网站时，面包屑导航不仅能有效提升用户体验，帮助访客了解当前所在位置，更是搜索引擎优化（SEO）不可或缺的一部分，因为它能清晰地展示网站结构层级。对于使用AnQiCMS来管理内容的网站而言，灵活地设置面包屑导航的显示逻辑和层级是模板制作中的一项重要工作。

AnQiCMS提供了一个强大且易于使用的模板标签来处理面包屑导航，让您无需编写复杂的后端逻辑，就能在前端模板中轻松实现。这个核心标签就是breadcrumb。

认识 AnQiCMS 的面包屑导航标签

在AnQiCMS的模板系统中，您可以通过{% breadcrumb %}标签来生成面包屑导航。这个标签能够智能地识别当前页面的类型（无论是文章详情页、分类列表页、单页面还是标签页），并自动构建出完整的导航路径。它会返回一个包含导航链接和名称的数组对象，我们通常将其命名为crumbs。

最基本的用法是这样的：

<div>
    {% breadcrumb crumbs %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</div>

在这段代码中，{% breadcrumb crumbs %}将生成面包屑数据并赋值给crumbs变量。接着，我们使用{% for item in crumbs %}循环遍历这个数组，item.Link代表每个导航项的链接地址，item.Name则代表其显示的名称。通过这种方式，AnQiCMS会自动为您呈现从首页到当前页面的完整路径。

为了使面包屑导航在整个网站中保持一致性，我们通常会将这段代码放置在公共模板文件（例如partial/breadcrumb.html）中，然后在各个页面模板中通过{% include "partial/breadcrumb.html" %}来引用它。

定制面包屑导航的显示逻辑与层级

AnQiCMS的breadcrumb标签不仅智能，还提供了几个参数，让您可以根据实际需求对显示逻辑进行精细化控制。

1. 调整首页的显示名称

默认情况下，面包屑导航的第一个链接是“首页”。如果您想修改这个名称，可以使用index参数。例如，将其改为“我的博客”：

<div>
    {% breadcrumb crumbs with index="我的博客" %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</div>

2. 控制当前页面标题的显示

在某些页面，尤其是文章详情页或产品详情页，页面的主标题（通常是<h1>标签）可能已经足够醒目，此时面包屑导航的最后一个项目（即当前页面标题）可能会显得多余。title参数可以帮助您控制这一点。

  • title=true (默认值): 显示完整的当前页面标题。
  • title=false: 不显示当前页面标题。这在页面的H1标题已经足够明确时非常有用，可以避免信息冗余。
  • title="自定义名称": 将当前页面标题显示为自定义的文字。例如，在文章详情页统一显示为“文章详情”。

以下是一个在详情页不显示文章标题的例子：

<div>
    {% breadcrumb crumbs with title=false %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</div>

而如果您希望在所有文章详情页的最后都显示“文章详情”这个统一的文本，可以这样设置：

<div>
    {% breadcrumb crumbs with title="文章详情" %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</div>

3. 理解AnQiCMS自动构建的层级

AnQiCMS的breadcrumb标签之所以强大，是因为它能够根据当前的URL和内容数据自动推导出层级关系。

  • 首页: 导航只有“首页”一个项目。
  • 分类列表页: 导航会自动显示“首页” -> “父级分类（如有）” -> “当前分类”。AnQiCMS会向上追溯，直到顶级分类。
  • 文章/产品详情页: 导航会显示“首页” -> “所属分类” -> “文章/产品标题”。如果文章所属的分类有多级，AnQiCMS也会自动构建出完整的分类路径。
  • 单页面: 导航通常是“首页” -> “当前单页面标题”。
  • Tag标签页: 导航会显示“首页” -> “标签列表”（或其他相关页面） -> “当前标签名称”。

这意味着，您通常只需要简单地调用{% breadcrumb crumbs %}标签，AnQiCMS就会智能地处理大部分层级构建的工作。系统的灵活性体现在内容模型、分类和文档的关联上，breadcrumb标签正是基于这些数据来动态生成导航的。

实践中的一些建议

  • 保持简洁： 面包屑导航应尽可能简洁，只包含关键的层级信息。避免在其中加入过多不必要的元素或复杂样式。
  • 语义化HTML： 推荐使用有序列表<ol>和列表项<li>来构建面包屑导航，这有助于提高网站的可访问性和SEO友好性。例如： 
    
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb crumbs with index="首页" title=true %}
        {% for item in crumbs %}
            <li class="breadcrumb-item{% if forloop.Last %} active{% endif %}">
                {% if forloop.Last %}
                    {{item.Name}}
                {% else %}
                    <a href="{{item.Link}}">{{item.Name}}</a>
                {% endif %}
            </li>
        {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>
    这里还额外使用了forloop.Last来判断是否是最后一个导航项，以便对其进行特殊处理（例如，不添加链接，或添加active类以突出显示）。
  • 统一风格： 无论您选择哪种显示逻辑，都应在整个网站中保持一致，以避免给用户带来困惑。

通过AnQiCMS提供的breadcrumb标签及其参数，您可以轻松且高效地在网站模板中设置和管理面包屑导航的显示逻辑和层级，从而为您的访客提供清晰的导航路径，并优化网站的整体结构。

常见问题解答 (FAQ)

  1. 问：为什么我的文章详情页面包屑导航中没有显示父级分类，只有首页和文章标题？ 答：这通常是由于文章在后台没有正确地关联到分类，或者关联的分类本身没有设置好父级关系。请检查您的文章是否选择了所属分类，并确保该分类及其上级分类都已在“内容管理”->“文档分类”中正确创建和配置层级。AnQiCMS的面包屑标签会根据内容的实际分类层级自动生成路径。

  2. 问：我能否在面包屑导航中插入一些自定义的静态链接，而不是完全由AnQiCMS自动生成？ 答：AnQiCMS的breadcrumb标签是动态生成当前页面路径的，不直接支持在生成结果中间插入静态链接。如果您有这样的需求，可能需要在调用{% breadcrumb %}标签之后，对crumbs数组进行前端JavaScript操作，或者在模板中手动拼接部分静态链接，例如在{% for item in crumbs %}循环之前或之后添加自定义<li>元素。不过，对于大多数标准层级结构，breadcrumb标签的自动生成功能已经足够。

  3. 问：在多站点或多语言AnQiCMS网站中，面包屑导航会如何适应？ 答：AnQiCMS本身支持多站点和多语言管理。当您的站点配置了多语言内容时，breadcrumb标签会根据