在网站运营中，清晰的导航路径对于用户体验和搜索引擎优化都至关重要。当用户在网站深层页面浏览时，一个直观的“您在这里”提示能让他们迅速定位，并轻松返回上级目录。这种辅助导航方式，我们称之为面包屑导航。安企CMS（AnQiCMS）内置了强大的面包屑导航标签，让开发者和内容运营者可以非常便捷地在页面顶部显示当前位置路径。

什么是面包屑导航，以及它为何重要？

面包屑导航（Breadcrumb Navigation）是一种以路径形式显示用户在网站中当前位置的辅助导航。它通常出现在页面顶部，呈现为“首页 > 分类 > 子分类 > 当前页面”这样的链式结构。

这种导航模式的重要性体现在以下几个方面：

  1. 提升用户体验： 帮助用户快速了解自己在网站结构中的位置，减少迷失感，并提供便捷的返回上级页面的入口。
  2. 优化网站结构： 面包屑导航是网站内部链接的重要组成部分，它以清晰的层级结构向搜索引擎展示了网站内容的组织方式，有助于搜索引擎更好地抓取和理解页面之间的关系。
  3. 降低跳出率： 当用户通过搜索引擎直接进入网站的深层页面时，面包屑导航能迅速提供上下文，引导用户探索更多相关内容，从而延长停留时间，降低跳出率。

安企CMS充分考虑到了这些需求，通过其灵活的模板标签系统，让面包屑导航的实现变得轻而易举。

在安企CMS中利用面包屑导航标签

安企CMS提供了一个专门的 breadcrumb 标签，用于在模板中生成面包屑导航路径。这个标签会自动识别当前页面的类型（首页、分类页、内容详情页等），并动态生成相应的路径。

基本使用方法

使用 breadcrumb 标签非常直观。你需要在模板中定义一个变量来接收导航路径的列表，然后通过循环遍历这个列表，将每个路径项显示出来。

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

在这段代码中：

  • {% breadcrumb crumbs ... %} 定义了一个名为 crumbs 的变量，它将包含面包屑路径中的每一个环节。
  • {% for item in crumbs %} 遍历 crumbs 变量中的每个路径项。
  • {{item.Link}} 表示当前路径项的链接地址。
  • {{item.Name}} 表示当前路径项的显示名称。

参数详解

breadcrumb 标签还提供了几个实用的参数，帮助你更好地控制面包屑的显示效果：

  1. index (首页名称)： 这个参数用于自定义面包屑导航的起点，默认为“首页”。如果你希望显示为“网站主页”或者其他名称，可以通过这个参数进行设置。
    • 示例：index="网站主页"
  2. title (标题显示)： 该参数主要控制在内容详情页（如文章详情、产品详情）时，面包屑导航是否显示当前页面的完整标题。
    • title=true：显示完整的当前页面标题（默认行为）。
    • title=false：不显示当前页面标题。
    • title="文章详情"：自定义显示特定文本，例如在文章详情页统一显示“文章详情”而不是具体文章标题。
  3. siteId (站点ID)： 如果你在使用安企CMS的多站点管理功能，并且需要调用其他站点的数据，可以通过这个参数指定站点ID。对于大多数单站点用户而言，这个参数通常无需设置。

如何将其添加到模板中？

为了让面包屑导航在网站的所有页面都能一致地显示，**实践是将其放置在一个公共的模板文件中，并通过 include 标签引入。

安企CMS的模板结构通常会将公共部分（如页头、页脚、侧边栏）放在 partial/ 目录下。你可以创建一个名为 partial/_breadcrumb.html 的文件，将上述面包屑代码放入其中。

<!-- partial/_breadcrumb.html -->
<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <ol>
        {% breadcrumb crumbs with index="网站首页" title=true %}
            {% for item in crumbs %}
                <li {% if loop.last %}aria-current="page"{% endif %}>
                    {% if loop.last %}
                        <span>{{item.Name}}</span>
                    {% else %}
                        <a href="{{item.Link}}">{{item.Name}}</a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

小贴士： 在上面的代码中，我们增加了一个判断 loop.last 来识别是否为面包屑的最后一个元素。根据无障碍指南（WCAG），最后一个元素通常不应该有链接，且应添加 aria-current="page" 属性，以更好地指示当前页面。

然后，在你的主模板文件（通常是 base.html）中，在页面的适当位置（例如，紧跟在页头或主内容区域的上方）引入这个面包屑片段：

<!-- base.html -->
<body>
    <header>...</header>
    {% include "partial/_breadcrumb.html" %}
    <main>...</main>
    <footer>...</footer>
</body>

这样一来，无论用户访问哪个页面，面包屑导航都会自动在页面顶部显示，并根据当前页面路径动态调整。

实际应用场景展示

  • 网站首页： 面包屑通常只显示“网站首页”一个条目。
  • 分类页面： 例如，访问“新闻中心”分类，面包屑会显示为“网站首页 > 新闻中心”。
  • 内容详情页面： 如果用户访问了“新闻中心”下的“某篇新闻标题”，面包屑则会显示为“网站首页 > 新闻中心 > 某篇新闻标题”。
  • 单页面： 如“关于我们”，面包屑可能显示为“网站首页 > 关于我们”。

安企CMS的 breadcrumb 标签会智能地解析当前URL和内容结构，自动生成这些路径，大大简化了网站导航的维护工作。

优化建议

  1. 保持一致性： 确保面包屑导航在整个网站中的样式和位置保持一致，避免用户在使用过程中产生困惑。
  2. 注重样式： 虽然安企CMS提供了面包屑的HTML结构，但其默认样式可能较为简单。你可以通过自定义CSS，使其与网站整体设计风格相符，提升视觉体验。
  3. 考虑微数据： 为了更好地被搜索引擎理解，可以在面包屑导航的HTML结构中添加Schema.org的 BreadcrumbList 微数据标记。这有助于搜索引擎在搜索结果中显示富摘要，增加点击率。安企CMS的JSON-LD功能可以辅助实现这一点。

通过以上步骤，你可以有效地在安企CMS网站中实现和优化面包屑导航，为用户提供更友好的浏览体验，同时也为网站的SEO表现打下坚实基础。

常见问题 (FAQ)

Q1：面包屑导航是否会自动更新？当我新增或修改页面时，需要手动调整吗？ A1：不需要。安企CMS的 breadcrumb 标签是动态生成路径的。当你新增文章、修改分类或更新页面时，系统会根据其在网站结构中的位置自动更新面包屑导航路径，无需任何手动调整。

Q2：如果我的网站层级非常深，面包屑导航会显示所有层级吗？会不会显得很长？ A2：是的，安企CMS会根据你的内容实际层级结构，完整地显示从首页到当前页面的所有路径。对于层级较深的网站，面包屑路径确实可能较长。在设计样式时，可以考虑使用省略号或响应式设计，让长路径在小屏幕设备上更友好地显示，例如只显示部分关键层级或使用滚动效果。

Q3：我可以使用自定义文本替代面包屑中的分类名称或页面标题吗？ A3：可以。对于详情页的当前页面标题，你可以通过 title 参数指定一个自定义文本，例如 {% breadcrumb crumbs with index="首页" title="新闻详情" %}。对于分类和文章本身，它们的名称和链接在面包屑中是根据后台设置自动读取的，如果你想更改面包屑中显示的文本，通常需要在后台直接修改