当你浏览网站时，是否曾有过迷失方向的感觉？在一个信息丰富的网站上，用户有时会感到不知所措，不知道当前所处的位置，也难以快速回溯到上级页面。这时，面包屑导航（Breadcrumb Navigation）就如同指路明灯，为用户提供清晰的路径指引，极大优化了他们的网站使用体验。

面包屑导航通常以“首页 > 分类 > 子分类 > 当前页面”的形式展现，它不仅能帮助用户清晰地了解自己在网站结构中的位置，还能方便地点击返回上级页面，从而提高导航效率，减少用户的困惑和跳出率。从搜索引擎优化的角度来看，面包屑导航也通过提供清晰的内部链接结构，帮助搜索引擎更好地理解和抓取网站内容。

在AnQiCMS中，显示面包屑导航是一件非常直接且灵活的事情，因为它内置了强大的breadcrumb标签，让你无需编写复杂的逻辑代码，就能轻松实现这一功能。

认识AnQiCMS的breadcrumb标签

AnQiCMS的模板系统基于Go语言，采用了类似Django模板引擎的语法，简洁高效。breadcrumb标签就是其中一个核心功能，专门用于生成网站的面包屑导航。

当你需要在网站模板中渲染面包屑导航时，只需在页面的适当位置调用这个标签即可。它会自动根据当前页面的URL和AnQiCMS的后台设置，智能地构建出完整的导航路径。

核心参数解析：灵活控制显示内容

breadcrumb标签提供了几个实用的参数，让你能精细化控制面包屑导航的显示内容：

  • index 参数：自定义首页名称 这个参数让你能自定义面包屑导航中“首页”的显示文本。默认情况下，它会显示为“首页”。但如果你希望它显示成“我的博客”、“公司官网”或其他任何名称，只需设置index="你的自定义名称"即可。例如，index="我的网站主页"。

  • title 参数：控制当前页面标题的显示 这是一个非常实用的参数，它决定了在详情页（比如文章详情页、产品详情页）的面包屑导航中是否显示当前页面的完整标题。

    • title=true（默认值）：面包屑的最后一个元素会显示当前页面的完整标题。
    • title=false：面包屑的最后一个元素将不显示当前页面的标题，通常只显示到上一级分类。这在某些设计中可以避免标题过长导致显示不佳。
    • title="文章详情"：你也可以为其指定一个自定义的字符串作为最后一个元素的显示文本，而不是页面的实际标题，这对于统一展示形式很有帮助。

  • siteId 参数：多站点下的数据指定 对于有多站点管理需求的用户，siteId参数允许你指定从哪个站点获取面包屑数据。但对于大多数单站点运营者来说，这个参数通常无需设置，系统会默认获取当前站点的数据。

动手实践：将面包屑添加到你的模板中

通常，面包屑导航会放在页面的顶部，主导航下方，或者文章标题上方。在AnQiCMS的模板结构中，我们推荐将面包屑导航的代码片段存放在template/你的模板名/partial/目录下的一个独立文件里，例如breadcrumb.html。

首先，在你的模板目录下创建一个名为partial的文件夹，并在其中新建一个breadcrumb.html文件。

然后，将以下代码添加到breadcrumb.html文件中：

{% breadcrumb crumbs with index="首页" title=true %}
    <nav class="breadcrumb-nav" aria-label="breadcrumb">
        <ol class="breadcrumb">
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {% if loop.last %} {# 如果是最后一个元素（当前页面），则不加链接 #}
                        <span>{{ item.Name }}</span>
                    {% else %}
                        <a href="{{ item.Link }}">{{ item.Name }}</a>
                    {% endif %}
                </li>
            {% endfor %}
        </ol>
    </nav>
{% endbreadcrumb %}

在这段代码中：

  • {% breadcrumb crumbs with index="首页" title=true %}：这是核心标签，它会生成一个名为crumbs的数组变量，其中包含构成面包屑路径的每个层级信息。index="首页"确保了导航的起始点显示为“首页”，title=true则表示在详情页会包含当前页面的标题。
  • crumbs变量：这是一个包含每个导航层级信息的数组，每个元素都代表一个层级，具有Name（显示名称）和Link（链接地址）属性。
  • {% for item in crumbs %}：我们使用一个for循环来遍历crumbs数组，逐个输出每个导航层级。
  • {% if loop.last %}：这是一个模板内置的判断，用于检查当前循环的元素是否是数组中的最后一个。在面包屑导航中，最后一个元素通常是当前页面，它不需要再点击跳转，所以我们通常只显示文本，而不添加超链接。
  • {{ item.Name }}和{{ item.Link }}：分别用于输出当前层级的显示名称和链接地址。

完成breadcrumb.html文件的创建后，你需要在你的主布局文件（例如base.html）或其他你希望显示面包屑的模板文件中，通过include标签将其引入：

{# 在base.html或其他布局文件中 #}
<body>
    {# 其他页面内容，如头部导航等 #}

    {% include "partial/breadcrumb.html" %}

    {# 页面主体内容 #}
</body>

这样，你的网站页面上就会动态显示出清晰的面包屑导航了。

进阶：定制样式与SEO考量

为了让面包屑导航看起来更符合你的网站设计，你还需要为其添加一些CSS样式。你可以针对.breadcrumb-nav、.breadcrumb、.breadcrumb-item等类名进行样式定义，比如调整字体大小、颜色、间距，或者添加分隔符（例如使用CSS伪类::after）。

面包屑导航不仅能帮助用户，对搜索引擎优化（SEO）也有积极作用。它创建了清晰的内部链接结构，帮助搜索引擎蜘蛛更好地理解网站的层级关系，从而可能提升网站在搜索结果中的排名。同时，用户体验的提升，如降低跳出率和增加页面停留时间，也是搜索引擎评估网站质量的重要指标。

通过AnQiCMS的breadcrumb标签，你可以轻松为网站添加功能完善且SEO友好的面包屑导航，为用户提供更好的浏览体验，也为网站的长期发展打下坚实基础。

常见问题 (FAQ)

1. 面包屑导航的样式看起来很基础，怎么才能让它更美观？

面包屑导航的样式完全由你网站的CSS控制。在将面包屑代码添加到模板后，你需要编辑你的CSS文件（通常位于/public/static/你的模板名/css/目录下），为.breadcrumb-nav、.breadcrumb、.breadcrumb-item等HTML元素添加样式。你可以调整字体、颜色、背景、间距，甚至使用CSS伪类（如::before或::after）来添加自定义的分隔符图标或文本，让它与你的网站整体风格保持一致。

2. 为什么我的面包屑导航在文章详情页没有显示文章标题，而只显示到分类？

这通常是因为breadcrumb标签中的title参数被设置为false或一个自定义的字符串。如果希望面包屑导航的最后一个元素（即当前页面）显示完整的文章标题，请确保在调用breadcrumb标签时，将其设置为title=true，例如：{% breadcrumb crumbs with index="首页" title=true %}。

3. 我可以自定义面包屑导航中“首页”的显示名称吗？

是的，你可以通过breadcrumb标签的index参数来轻松实现。只需将index参数设置为你想要的任何文本即可，例如：{% breadcrumb crumbs with index="我的网站主页" %}。这样，面包屑导航的起始点就会显示为你自定义的名称。