当我们在浏览网站时，常常会看到页面顶部或内容区域上方有一行文字，清晰地指示着当前页面在整个网站结构中的位置，就像“首页 > 产品中心 > 某产品分类 > 某产品详情”这样。这便是我们常说的“面包屑导航”（Breadcrumb Navigation）。它不仅能够帮助用户快速理解网站的内容层级，避免迷失方向，还能在用户体验和搜索引擎优化（SEO）方面发挥重要作用。

安企CMS深知面包屑导航的重要性，因此在系统设计之初就内置了简洁高效的实现方式，让网站运营者能够轻松地在页面中展示这一导航元素，从而提升用户对网站内容结构的理解。

安企CMS如何实现面包屑导航？

安企CMS内置了非常便捷的面包屑导航标签，它能够智能地根据当前页面的类型（无论是首页、分类页、文章详情页、单页还是标签页）自动生成对应的导航路径。这意味着您无需编写复杂的逻辑代码来判断当前页面并手动构建路径，系统会自动处理这些，极大地简化了开发和维护工作。

这个核心标签就是 {% breadcrumb %}。它会自动收集当前页面的所有父级路径直到首页，并将它们组织成一个列表供您在模板中使用。

在您的模板中添加面包屑导航

要在您的网站中显示面包屑导航，我们通常会将其放置在一个公共的代码片段中，例如在您的模板文件目录下的 partial/ 文件夹中创建一个 breadcrumb.html 文件，然后将其包含（include）到您的主模板文件（如 base.html 或每个页面的顶部）中。

首先，您可以在 partial/breadcrumb.html 文件中这样编写代码：

{# partial/breadcrumb.html 文件内容示例 #}
<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb crumbs %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    <a href="{{ item.Link }}">{{ item.Name }}</a>
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

接下来，您只需要在您的网站主模板文件（例如 base.html）中，您希望显示面包屑导航的位置，添加如下一行代码即可：

{# 在您的 base.html 或其他需要显示面包屑的模板文件中 #}
{% include "partial/breadcrumb.html" %}

这样，无论用户访问哪个页面，系统都会自动识别并生成符合当前页面路径的面包屑导航。

个性化面包屑导航的显示

安企CMS的面包屑导航标签还提供了几个参数，让您可以根据实际需求进行更细致的控制和个性化设置。

  1. 自定义“首页”文字： 默认情况下，面包屑导航的第一个元素是“首页”。如果您希望将其显示为其他文字，例如“我的博客”或您的品牌名称，可以使用 index 参数进行设置：

    {% breadcrumb crumbs with index="我的博客" %}
    {# ... 您的循环代码 ... #}
{% endbreadcrumb %}

  2. 控制当前页面标题的显示： 面包屑导航的最后一项通常是当前页面的标题。您可以通过 title 参数来控制它的显示方式：

    • title=true (默认值): 显示当前页面的完整标题。
    • title=false: 不显示当前页面的标题，面包屑导航将在倒数第二个层级结束。
    • title="自定义文本": 将当前页面的标题替换为自定义的文本。
    {# 显示文章标题 #}
{% breadcrumb crumbs with title=true %} ... {% endbreadcrumb %}


{# 不显示文章标题 #}
{% breadcrumb crumbs with title=false %} ... {% endbreadcrumb %}


{# 显示自定义文本作为当前页面的名称 #}
{% breadcrumb crumbs with title="文章详情页" %} ... {% endbreadcrumb %}

  3. 多站点环境下的数据调用（高级）： 如果您在安企CMS后台配置了多个站点，并且希望在某个站点的面包屑导航中调用其他站点的数据（这通常是比较特殊的需求），可以使用 siteId 参数指定站点ID。一般情况下，此参数无需设置，系统会自动识别当前站点。

进一步优化与使用建议

  • 保持一致性： 强烈建议将面包屑导航的 include 语句放置在网站的全局 base.html 模板中，这样可以确保所有页面都拥有一致的导航体验。
  • 视觉样式： 虽然安企CMS提供了功能，但面包屑导航的最终视觉效果取决于您的CSS样式。您可以根据网站的整体设计风格，为 breadcrumb-nav、breadcrumb 和 breadcrumb-item 类添加自定义样式，使其更好地融入页面。
  • SEO友好： 面包屑导航有助于搜索引擎更好地理解您的网站结构，尤其是在深度较深的网站中。它提供了清晰的内部链接，对SEO有着积极的影响。确保链接是可点击的，并且使用了正确的语义化标签（如 <nav> 和 <ol>）。

通过合理运用安企CMS的面包屑导航功能，您不仅能为用户提供更清晰的网站路径指引，有效提升浏览体验，还能为网站的搜索引擎优化打下坚实的基础。

常见问题 (FAQ)

  1. Q: 为什么我的面包屑导航在文章详情页只显示到分类，而不显示文章标题？ A: 这可能是因为您在 {% breadcrumb %} 标签中将 title 参数设置为 false。请检查您的模板代码，确保 title 参数被设置为 true 或者被赋予了您希望显示的自定义文本，例如 {% breadcrumb crumbs with title=true %}。

  2. Q: 我想让面包屑导航的“首页”链接显示为“网站主页”，应该如何设置？ A: 您可以通过在 {% breadcrumb %} 标签中添加 index 参数来修改“首页”的显示文本。例如，您可以这样设置：{% breadcrumb crumbs with index="网站主页" %}。

  3. Q: 面包屑导航的样式看起来不太美观，安企CMS是否提供默认样式？ A: 安企CMS的模板标签主要负责输出结构化的数据和HTML骨架，不强制提供视觉样式。面包屑导航的最终样式需要您通过自定义CSS来美化。您可以在您的模板CSS文件中，针对 breadcrumb-nav、breadcrumb、breadcrumb-item 等HTML元素和类名编写样式代码，使其符合您网站的视觉设计。