面包屑导航（Breadcrumb Navigation）是一种在网站上非常常见且实用的导航方式，它能够清晰地显示用户在网站层级结构中的当前位置，就像面包屑撒落在森林中指引归途一样。对于用户而言，面包屑导航不仅能帮助他们快速了解当前页面在整个网站中的层级关系，还能方便他们回溯到上一级或更高级别的页面，极大提升了网站的用户体验。同时，对于搜索引擎优化（SEO）来说，清晰的面包屑路径也有助于搜索引擎更好地理解网站结构，从而可能带来更好的抓取和排名效果。

安企CMS作为一款高效的内容管理系统，充分考虑了这一功能的重要性，并内置了便捷的面包屑导航标签，让网站运营者能够轻松地在内容页面中正确显示和管理这些导航路径。

在内容页面添加面包屑导航

要在安企CMS的内容页面中正确显示面包屑导航，我们首先需要在模板文件中使用其内置的 breadcrumb 标签。通常，为了保持模板的整洁和复用性，我们会将面包屑导航的代码片段放置在一个独立的模板文件（例如 partial/breadcrumb.html）中，然后通过 include 标签将其引入到网站的通用头部文件（如 bash.html）或具体的内容页面模板中。

以下是一个基本的面包屑导航实现示例：

首先，在您的模板目录下的 partial 文件夹中创建一个名为 breadcrumb.html 的文件（如果尚未存在）。

{# partial/breadcrumb.html #}
<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <ol class="breadcrumb-list">
        {% breadcrumb crumbs %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {% if forloop.Last %} {# 判断是否为最后一个面包屑项 #}
                        <span aria-current="page">{{item.Name}}</span>
                    {% else %}
                        <a href="{{item.Link}}">{{item.Name}}</a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

在这段代码中：

  • {% breadcrumb crumbs %} 是安企CMS提供的核心标签，它会根据当前页面的URL和网站的结构，自动生成一个包含路径信息的数组，并赋值给 crumbs 变量。
  • {% for item in crumbs %} 循环遍历 crumbs 数组中的每一个路径片段。
  • item.Name 表示该路径片段的显示名称（例如“首页”、“文章分类”、“文章标题”）。
  • item.Link 表示该路径片段对应的URL地址。
  • forloop.Last 是一个内置的循环变量，用于判断当前循环的项是否为最后一个。通常，最后一个面包屑项（即当前页面）不应该是一个链接，而只是纯文本，并带有 aria-current="page" 属性以增强可访问性。

接着，您可以在您的网站通用模板文件（例如 bash.html）中，在 <body> 标签的适当位置（通常是页面的顶部内容区域，主导航下方）引入这个面包屑导航片段：

{# bash.html 或您希望显示面包屑导航的任何模板文件 #}
...
<body>
    {# 网站头部内容，如Logo、主导航等 #}
    {% include "partial/header.html" %}

    <main>
        {# 引入面包屑导航 #}
        {% include "partial/breadcrumb.html" %}

        {# 当前页面主要内容区域 #}
        {% block content %}{% endblock %}
    </main>

    {# 网站底部内容 #}
    {% include "partial/footer.html" %}
</body>
...

完成这些步骤后，当您访问网站的任何内容页面，如文章详情页、产品详情页、分类列表页或单页面时，系统都会自动根据当前页面的位置，生成并显示相应的面包屑导航路径。

定制面包屑导航的显示

安企CMS的 breadcrumb 标签还提供了一些参数，允许您对面包屑导航的显示进行更精细的控制：

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

    {% breadcrumb crumbs with index="我的博客" %}
    {# ... 循环显示 crumbs ... #}
{% endbreadcrumb %}

  2. 控制文档标题显示 (title) 在文档详情页（如文章、产品页），面包屑导航的最后一项通常是该文档的标题。您可以通过 title 参数来控制其显示方式：

    • title=true (默认值): 显示完整的文档标题。
    • title=false: 不显示文档标题，面包屑路径止步于当前分类。
    • title="自定义标题": 显示您指定的自定义字符串作为最后一个面包项。
    {# 在文章详情页，如果不想显示具体文章标题，只到分类层级 #}
{% breadcrumb crumbs with title=false %}
    {# ... 循环显示 crumbs ... #}
{% endbreadcrumb %}


{# 或者，将文章标题统一显示为“文章详情” #}
{% breadcrumb crumbs with title="文章详情" %}
    {# ... 循环显示 crumbs ... #}
{% endbreadcrumb %}

将这些参数结合使用，您可以根据网站的设计和用户体验需求，灵活地调整面包屑导航的显示效果。

面包屑导航的实践建议

  • 语义化HTML： 使用 <nav>、<ol>、<li> 和 <a> 等语义化标签来构建面包屑导航，有助于提高网站的可访问性和SEO友好性。
  • 清晰的样式： 虽然面包屑导航的功能性强于视觉性，但仍需通过CSS进行适当的样式设计，使其与网站整体风格保持一致，并且易于用户识别和点击。确保链接有足够的点击区域，并且当前页面（最后一个项）能够通过样式清晰地辨识出来。
  • 移动端适配： 在移动设备上，面包屑导航可能因为空间限制而显得冗长。考虑采用响应式设计，例如只显示最近的几个层级，或将面包屑折叠成一个可点击的“返回”按钮。
  • 层级逻辑： 面包屑导航应严格遵循网站的实际层级结构，不要跳过层级或创建逻辑上不一致的路径，这会混淆用户。

通过安企CMS提供的 breadcrumb 标签及其灵活的参数，您可以轻松为网站构建出用户友好且SEO优化的面包屑导航，提升整体网站的质量。

常见问题 (FAQ)

1. 我的面包屑导航为什么没有显示出来？

如果面包屑导航没有显示，请首先检查以下几点：

  • 是否在模板中正确引入了 breadcrumb.html？ 确认您的主模板文件（如 bash.html 或页面详情模板）中使用了 {% include "partial/breadcrumb.html" %} 标签。
  • breadcrumb.html 文件是否存在于正确路径？ 确保该文件确实在 template 目录下的 partial 文件夹中。
  • 当前页面是否有明确的层级结构？ 面包屑导航是基于页面的分类、模型或单页父子关系自动生成的。如果当前页面是网站首页，或者没有明确的分类归属，面包屑可能只会显示“首页”或为空。请检查内容的分类设置是否正确。
  • 网站缓存是否清理？ 在修改模板文件后，有时需要清除网站缓存才能看到最新的效果。您可以在安企CMS后台找到“更新缓存”功能进行操作。

2. 如何排除面包屑导航中的某个层级，例如不显示“产品分类”这个中间层级？

安企CMS的 breadcrumb 标签本身没有直接提供排除特定层级的功能。然而，您可以通过在循环 {% for item in crumbs %} 内部添加条件判断来实现自定义的过滤逻辑。例如，如果您想排除名称为“产品分类”的层级，可以这样修改 breadcrumb.html：

<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <ol class="breadcrumb-list">
        {% breadcrumb crumbs %}
            {% for item in crumbs %}
                {# 假设 item.Name 不会是空字符串 #}
                {% if item.Name != "产品分类" %}
                    <li class="breadcrumb-item">
                        {% if forloop.Last %}
                            <span aria-current="page">{{item.Name}}</span>
                        {% else %}
                            <a href="{{item.Link}}">{{item.Name}}</a>
                        {% endif %}
                    </li>
                {% endif %}
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

请注意，这种方法是基于面包屑项的名称进行判断，如果名称可能变化或有多个类似的名称，您需要调整判断逻辑。

3. 如何改变面包屑导航的样式？

面包屑导航的视觉样式完全取决于您的网站CSS文件。安企CMS提供的 breadcrumb 标签主要负责输出导航路径的HTML结构，至于颜色、字体、大小、间距、背景等，都需要您通过编写或修改CSS代码来实现。

您可以使用类似 breadcrumb-nav、breadcrumb-list、breadcrumb-item 和 breadcrumb-item a 等CSS选择器来针对性地设置样式。例如：

”`css