在使用安企CMS（AnQiCMS）管理网站内容时，面包屑导航是提升用户体验和搜索引擎优化（SEO）效果的重要组成部分。它能清晰地展示当前页面在网站结构中的位置，帮助用户理解网站层级，并方便地回溯到上级页面。得益于AnqiCMS灵活的模板引擎和丰富的内置标签，实现面包屑导航并进行个性化定制变得非常简单。

什么是面包屑导航？

面包屑导航（Breadcrumb Navigation）通常以“您当前的位置：首页 > 分类 > 子分类 > 当前页面”的形式展现，形象地如同童话故事中撒下的面包屑，引导用户找到来时的路。它不仅提供了辅助导航功能，还能有效降低网站的跳出率，并向搜索引擎提供页面结构化的信息，有助于提升网站内容的收录和排名。

AnqiCMS 中如何显示面包屑导航？

AnqiCMS 内置了专门的面包屑导航标签，使得在网站模板中添加这项功能变得轻而易举。我们通常会将面包屑导航代码放置在网站模板的公共头部文件，例如 partial/breadcrumb.html 或 bash.html 等文件中，然后通过 {% include %} 标签将其引入到需要显示面包屑的页面布局中。

要在模板中显示面包屑导航，您可以使用 breadcrumb 标签。这个标签会根据当前页面的URL路径，自动生成包含层级关系的导航链。

以下是基础的面包屑导航实现代码：

<nav class="breadcrumb-nav">
    {% breadcrumb crumbs %}
    <ol class="breadcrumb">
        {% for item in crumbs %}
            <li class="breadcrumb-item">
                <a href="{{item.Link}}">{{item.Name}}</a>
            </li>
        {% endfor %}
    </ol>
    {% endbreadcrumb %}
</nav>

在这段代码中：

  • {% breadcrumb crumbs %} 标签用于获取面包屑数据。系统会计算当前页面的路径，并将每个层级的数据（包括链接名称 Name 和链接地址 Link）存储在一个名为 crumbs 的数组变量中。
  • {% for item in crumbs %} 循环遍历 crumbs 数组，逐一输出每个导航项。
  • {{item.Link}} 和 {{item.Name}} 则分别用于输出每个导航项的链接地址和显示名称。

您可以根据自己网站的CSS样式，调整 <nav>、<ol> 和 <li> 标签的class名称，以匹配网站的整体设计风格。

如何自定义首页名称？

默认情况下，面包屑导航中的第一个项通常显示为“首页”。如果您希望将其更改为更具个性化或品牌特色的名称，比如“我的网站主页”或者您的公司名称，可以通过 breadcrumb 标签的 index 参数进行设置。

只需在 breadcrumb 标签中添加 index 参数，并为其指定您想要的首页名称：

<nav class="breadcrumb-nav">
    {% breadcrumb crumbs with index="我的网站主页" %}
    <ol class="breadcrumb">
        {% for item in crumbs %}
            <li class="breadcrumb-item">
                <a href="{{item.Link}}">{{item.Name}}</a>
            </li>
        {% endfor %}
    </ol>
    {% endbreadcrumb %}
</nav>

这样一来，面包屑导航中的第一个链接就会显示为您自定义的“我的网站主页”了。

控制末尾页面标题的显示

除了自定义首页名称，有时我们可能还需要控制面包屑导航最末尾的当前页面标题的显示方式。breadcrumb 标签提供了 title 参数来实现这一目的。

  • title=true (默认值): 显示当前页面的完整标题。例如，当访问一篇文章时，面包屑会显示文章的完整标题。
  • title=false: 不显示当前页面的标题，面包屑导航会在显示到当前页面的上一个层级后结束。
  • title="自定义标题": 用指定的字符串作为当前页面的标题显示。

例如，如果您不希望显示当前页面的标题，或者想统一显示为“详情页面”，可以这样修改：

<nav class="breadcrumb-nav">
    {# 不显示当前页面标题，面包屑到上一级止 #}
    {% breadcrumb crumbs with index="我的网站主页" title=false %}
    <ol class="breadcrumb">
        {% for item in crumbs %}
            <li class="breadcrumb-item">
                <a href="{{item.Link}}">{{item.Name}}</a>
            </li>
        {% endfor %}
    </ol>
    {% endbreadcrumb %}

    {# 或者统一显示为“详情页面” #}
    {% breadcrumb crumbs_alt with index="我的网站主页" title="详情页面" %}
    <ol class="breadcrumb">
        {% for item in crumbs_alt %}
            <li class="breadcrumb-item">
                <a href="{{item.Link}}">{{item.Name}}</a>
            </li>
        {% endfor %}
    </ol>
    {% endbreadcrumb %}
</nav>

通过这些参数的灵活运用，您可以轻松地在 AnqiCMS 网站中实现功能完善且符合网站设计风格的面包屑导航。

常见问题 (FAQ)

  1. 面包屑导航是否对所有页面都有效？ 面包屑导航主要针对具有层级关系的内容页面（如分类列表页、文章详情页、产品详情页等）提供导航辅助。对于网站首页本身，由于它通常是网站的最高层级，面包屑导航的显示意义不大，或者仅显示一个“首页”链接。在实际应用中，您通常会在除了首页之外的通用页面模板中引入面包屑代码。

  2. 自定义首页名称后，网站的实际首页 <title> 标签会改变吗？ 不会。breadcrumb 标签中的 index 参数仅影响面包屑导航中首页链接的显示名称，而不会改变网站首页在浏览器标签页中显示的 <title> 标签内容。网站首页的 <title>、<keywords> 和 <description> 通常是在 AnqiCMS 后台的“首页 TDK 设置”中进行配置的。

  3. 如果我不希望在某个特定页面显示面包屑导航怎么办？ 您可以在需要显示面包屑导航的模板文件中使用 {% include "partial/breadcrumb.html" %} （假设您的面包屑代码保存在此文件）。对于不希望显示面包屑的页面，则不在其对应的模板文件中引入该 include 标签即可。如果面包屑代码是直接写在 bash.html 这样的通用布局文件中，您可以通过在特定的页面模板中使用 {% set noBreadcrumb = true %} 这样的变量，然后在 bash.html 中用 {% if not noBreadcrumb %} 来判断是否显示面包屑导航。