如何在安企CMS中显示动态生成的面包屑导航，并自定义其显示方式？

当我们在网站上浏览时，经常会看到页面顶部或底部有一行指示当前位置的导航路径，这就是我们常说的“面包屑导航”（Breadcrumbs）。它不仅能清晰地告诉用户当前页面在网站结构中的位置，还能有效提升网站的用户体验和搜索引擎优化（SEO）效果。安企CMS（AnQiCMS）作为一个功能强大的内容管理系统，内置了便捷的方式来生成和定制这种动态的面包屑导航。

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

安企CMS内置了强大的模板标签系统，其中就包含了专门用于生成面包屑导航的 breadcrumb 标签。它的精妙之处在于，能够根据当前页面的上下文，无论是文章详情页、分类列表页、标签页，还是单页面，智能地构建出一条完整的导航路径。您无需手动编写复杂的逻辑来判断当前页面的类型和层级，安企CMS会自动完成这项工作。

当您在模板中调用 breadcrumb 标签时，它会返回一个包含所有导航节点的数组。每个节点都包含了Name（链接名称）和Link（链接地址）两个关键信息，您可以根据这些信息在前端进行灵活的展示。

核心标签与参数解析

breadcrumb 标签的基本使用方式如下：

{% breadcrumb crumbs with index="首页" title=true %}
    {# 在这里循环输出面包屑节点 #}
{% endbreadcrumb %}

让我们来详细了解一下这个标签及其参数：

• crumbs (变量名)：这是一个您自定义的变量名，它将承载由 breadcrumb 标签生成的面包屑导航节点数组。您可以在 {% breadcrumb ... %} 和 {% endbreadcrumb %} 之间使用 for 循环遍历这个 crumbs 数组，从而逐一渲染每个导航节点。每个 crumbs 数组中的元素都是一个对象，包含 Name (链接名称) 和 Link (链接地址)。

• index (参数)：此参数用于设置面包屑导航路径中最开头的元素，通常是网站的首页链接。默认值为“首页”。如果您希望将其修改为其他文字，例如“您的位置”或“网站主页”，可以通过 index="您的当前位置" 来实现。

• title (参数)：这个参数控制着面包屑导航末尾是否显示当前页面的标题。

  • 当设置为 title=true（默认值）时，面包屑的最后一个节点会显示当前页面的完整标题。
  • 当设置为 title=false 时，面包屑的最后一个节点将不会显示标题，通常用于列表页或需要更简洁显示的情况。
  • 您也可以为其赋值一个具体的字符串，例如 title="文章详情"，这样最后一个节点就会显示您自定义的文本。

• siteId (参数)：此参数在多站点管理场景下使用。如果您有多个站点并希望调用其他站点的面包屑数据，可以通过 siteId="站点ID" 来指定。在大多数单站点情况下，此参数无需填写。

实际应用：自定义面包屑显示方式

了解了 breadcrumb 标签的核心功能和参数后，我们来看看如何在实际模板中运用它，并对其显示方式进行个性化定制。

基本结构与分隔符添加

最常见的面包屑导航通常以无序列表（<ul>）或有序列表（<ol>）的形式呈现，并在每个链接之间使用分隔符（如 > 或 /）。以下是一个在安企CMS模板中实现这一基础结构的示例：

<nav class="breadcrumb-nav">
    <ul>
        {% breadcrumb crumbs with index="首页" title=true %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {% if not forloop.Last %} {# 如果不是最后一个节点（当前页面），则显示链接和分隔符 #}
                        <a href="{{ item.Link }}" class="breadcrumb-link">{{ item.Name }}</a>
                        <span class="breadcrumb-separator"> &gt; </span>
                    {% else %} {# 如果是最后一个节点（当前页面），只显示文本 #}
                        <span class="breadcrumb-current">{{ item.Name }}</span>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ul>
</nav>

在这个示例中，我们使用了 forloop.Last 来判断当前遍历的节点是否是面包屑路径中的最后一个。对于非最后一个节点，我们为其添加了链接和分隔符；而对于最后一个节点，则仅显示其名称，并可以为其应用不同的样式（例如加粗或高亮），以突出显示当前页面。

自定义首页文本与末尾标题

您可以根据网站品牌或语言需求，轻松修改面包屑导航的首页文本。例如，如果您的网站是电商平台，可以将“首页”改为“商城主页”：

{# 将首页文本改为“商城主页” #}
{% breadcrumb crumbs with index="商城主页" title=true %}
    {# ... 循环渲染面包屑 ... #}
{% endbreadcrumb %}

同样，根据页面类型，您可能需要控制末尾标题的显示。例如，在分类列表页，您可能不希望面包屑的最后一个节点重复显示分类名称：

{# 在列表页，不显示当前分类的标题 #}
{% breadcrumb crumbs with index="首页" title=false %}
    {# ... 循环渲染面包屑 ... #}
{% endbreadcrumb %}

或者，您希望所有文章详情页的最后一个面包屑节点都显示统一的“详情”字样：

{# 在文章详情页，最后一个节点显示“文章详情” #}
{% breadcrumb crumbs with index="首页" title="文章详情" %}
    {# ... 循环渲染面包屑 ... #}
{% endbreadcrumb %}

CSS样式美化

安企CMS的模板系统只负责生成HTML结构和数据，具体的视觉呈现则完全取决于您的CSS样式。在上面的示例中，我们添加了 breadcrumb-nav、breadcrumb-item、breadcrumb-link、breadcrumb-separator 和 breadcrumb-current 等CSS类，您可以根据这些类来为面包屑导航定义字体、颜色、大小、间距和布局等样式，使其与您的网站整体设计风格保持一致。

条件判断与特殊处理

对于更高级的定制需求，您可以在 for 循环内部结合 if 语句，根据 item.Name 或 item.Link 进行条件判断，从而对特定节点进行特殊处理。例如，如果某个节点是“产品中心”，您可能希望为其添加一个图标：

{% breadcrumb crumbs with index="首页" title=true %}
    {% for item in crumbs %}
        <li class="breadcrumb-item">
            {% if item.Name == "产品中心" %}
                <i class="icon-product"></i>
            {% endif %}
            {% if not forloop.Last %}
                <a href="{{ item.Link }}" class="breadcrumb-link">{{ item.Name }}</a>
                <span class="breadcrumb-separator"> &gt; </span>
            {% else %}
                <span class="breadcrumb-current">{{ item.Name }}</span>
            {% endif %}
        </li>
    {% endfor %}
{% endbreadcrumb %}

通过这样的方式，您可以对面包屑的各个环节进行细致入微的控制，满足各种复杂的显示需求。

**实践建议

• 保持简洁：面包屑导航旨在简化导航，避免过长或过于复杂的路径。
• 确保可点击性：除了当前页面（通常是面包屑的最后一个节点），所有面包屑节点都应是可点击的链接，方便用户回溯。
• 统一风格：确保面包屑的样式和布局在整个网站中保持一致，提升用户体验。
• 多类型页面测试：在网站的首页、分类页、详情页、标签页甚至搜索结果页等不同类型的页面上测试面包屑的显示效果，确保其正确性和一致性。

安企CMS