在网站运营中，清晰的导航路径对于用户体验和搜索引擎优化（SEO）都至关重要。面包屑导航（Breadcrumb Navigation）就像网站的小地图，能让访客随时了解自己所处的位置，并方便地返回上一级页面。今天，我们就来深入了解如何在安企CMS中，利用其强大的breadcrumb标签，创建动态面包屑导航，并根据我们的需求定制首页名称和标题显示。
认识安企CMS的breadcrumb标签
安企CMS为了简化网站开发和内容管理，提供了许多直观且功能强大的模板标签。breadcrumb标签就是其中之一，它能自动生成当前页面到首页的完整路径，大大减少了手动编写导航代码的工作量。
这个标签的使用方式非常符合安企CMS模板引擎的风格，它基于Django模板引擎语法，让您能轻松地在模板文件中调用和定制。基本结构是：
{% breadcrumb crumbs with index="首页" title=true %}
{# 在这里循环输出面包屑的每个项 #}
{% endbreadcrumb %}
在这里，crumbs是我们给面包屑导航列表起的变量名，您可以根据喜好自由命名。在{% for item in crumbs %}循环中，每个item都包含Name（链接名称）和Link（链接地址）两个字段，方便我们构建可视化的导航元素。
创建动态面包屑导航
最基础的面包屑导航，只需简单地调用breadcrumb标签，它就会自动检测当前页面类型（如文章详情、分类列表、单页面等），并生成相应的路径。
一个基本的面包屑导航结构可能如下所示：
<nav class="breadcrumb">
{% breadcrumb crumbs %}
<ul>
{% for item in crumbs %}
<li><a href="{{ item.Link }}">{{ item.Name }}</a></li>
{% if not forloop.Last %}
{# 如果不是最后一个元素，添加分隔符 #}
<li class="separator"> > </li>
{% endif %}
{% endfor %}
</ul>
{% endbreadcrumb %}
</nav>
这段代码会遍历crumbs数组中的每一个面包屑项，生成一个链接。forloop.Last是一个非常有用的辅助变量，它能判断当前循环是否是最后一个元素，从而帮助我们正确地添加或省略分隔符（比如 >）。通过简单的CSS样式，您就能让它呈现出美观的视觉效果。
定制首页名称：让您的网站更具个性
默认情况下，安企CMS面包屑导航的第一个元素是“首页”。如果您希望根据网站的品牌调性或目标用户群体，将其修改为更具特色的名称，比如“我的博客”、“公司主页”或者特定的品牌名，breadcrumb标签的index参数就能派上用场。
只需在breadcrumb标签中添加index参数并指定您想要的名称即可：
<nav class="breadcrumb">
{% breadcrumb crumbs with index="我的博客首页" %}
<ul>
{% for item in crumbs %}
<li><a href="{{ item.Link }}">{{ item.Name }}</a></li>
{% if not forloop.Last %}
<li class="separator"> > </li>
{% endif %}
{% endfor %}
</ul>
{% endbreadcrumb %}
</nav>
现在，您的面包屑导航将以“我的博客首页”作为起点，与网站的整体风格保持一致。
控制标题显示：灵活应对不同页面需求
在文章详情页或产品详情页，面包屑导航的最后一个元素通常是当前页面的标题。安企CMS的breadcrumb标签提供了title参数，让您可以更灵活地控制这一部分的显示方式。
title参数支持三种设置：
title=true(默认)：这是默认行为，面包屑的最后一个元素会显示当前页面的完整标题。title=false：如果您不希望在面包屑中显示当前页面的标题，可以选择将其关闭。例如，在某些设计风格下，当前页面的标题可能已经在页面内容中非常醒目，面包屑中就不再需要重复显示。title="自定义标题"：您可以将当前页面的标题替换为一个自定义的字符串。这在需要简化显示或统一风格时非常有用，比如所有文章详情页的面包屑末尾都显示“文章详情”，而不是具体的文章标题。
下面是针对这三种情况的代码示例：
1. 显示完整标题（默认行为，或明确设置 title=true）：
<nav class="breadcrumb">
{% breadcrumb crumbs with index="我的站点" title=true %}
<ul>
{% for item in crumbs %}
<li><a href="{{ item.Link }}">{{ item.Name }}</a></li>
{% if not forloop.Last %}
<li class="separator"> > </li>
{% endif %}
{% endfor %}
</ul>
{% endbreadcrumb %}
</nav>
这会显示类似 “我的站点 > 分类名称 > 文章标题” 的效果。
2. 不显示当前页面标题 (title=false)：
<nav class="breadcrumb">
{% breadcrumb crumbs with index="我的站点" title=false %}
<ul>
{% for item in crumbs %}
<li><a href="{{ item.Link }}">{{ item.Name }}</a></li>
{% if not forloop.Last %}
<li class="separator"> > </li>
{% endif %}
{% endfor %}
</ul>
{% endbreadcrumb %}
</nav>
在文章详情页，这只会显示 “我的站点 > 分类名称”，文章标题会被省略。
3. 使用自定义标题 (title="文章详情页")：
<nav class="breadcrumb">
{% breadcrumb crumbs with index="我的站点" title="文章详情页" %}
<ul>
{% for item in crumbs %}
<li><a href="{{ item.Link }}">{{ item.Name }}</a></li>
{% if not forloop.Last %}
<li class="separator"> > </li>
{% endif %}
{% endfor %}
</ul>
{% endbreadcrumb %}
</nav>
在文章详情页，这会显示 “我的站点 > 分类名称 > 文章详情页”，将具体的文章标题替换为“文章详情页”。
结合实际应用：完整示例代码
通过灵活运用index和title参数，您可以根据网站的品牌策略和用户体验目标，创建出既实用又美观的面包屑导航。下面是一个综合了定制首页名称和自定义标题显示的例子：
<style>
.breadcrumb ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap; /* 适应小屏幕换行 */
}
.breadcrumb li {
margin-right: 5px;
font-size: 14px;
color: #666;
}
.breadcrumb li a {
color: #337ab7;
text-decoration: none;
}
.breadcrumb li.separator {
color: #999;
margin: 0 5px;
}
.breadcrumb li:last-child a {
color: #333; /* 最后一个元素通常颜色更深或不可点击 */
cursor: default;
}
.breadcrumb li:last-child.separator {
display: none; /* 隐藏最后一个分隔符 */
}
</style>
<nav class="breadcrumb">
{% breadcrumb pathItems with index="公司官网" title="当前页面" %}
<ul>
{% for item in pathItems %}
<li>
<a href="{{ item.Link }}" {% if forloop.Last %}aria-current="page"{% endif %}>
{{ item.Name }}
</a>
</li>
{% if not forloop.Last %}
<li class="separator"> > </li>
{% endif %}
{% endfor %}
</ul>
{% endbreadcrumb %}
</nav>
这段代码不仅演示了如何定制首页