在日常的网站浏览中,你是否曾因不清楚自己身处何处而感到些许迷茫?面包屑导航(Breadcrumb Navigation)就像你探索一个新地方时,沿途留下的一个个小标记,让你清晰地知道从哪里来,现在又在哪里。它不仅能显著提升网站的用户体验,帮助访客快速理解网站结构,对于搜索引擎优化(SEO)也大有裨益,因为它为搜索引擎蜘蛛提供了清晰的网站层次结构信息。
在AnQiCMS中,得益于其强大而灵活的模板系统,我们可以非常便捷地在网站模板中实现和定制面包屑导航,包括自定义首页名称以及灵活控制当前页面的标题显示。
在AnQiCMS模板中显示面包屑导航
要在AnQiCMS模板中加入面包屑导航,你需要用到系统内置的 breadcrumb 标签。这个标签通常会放置在每个页面的公共部分,比如一个名为 partial/header.html 或 partial/breadcrumb.html 的文件中,然后通过 {% include 'partial/breadcrumb.html' %} 这样的标签在需要显示面包屑的页面引入。
breadcrumb 标签会自动识别当前页面的路径,并将其层级结构输出为一个名为 crumbs 的数组对象。你可以通过 for 循环来遍历这个 crumbs 数组,然后将每个导航项的名称 (Name) 和链接 (Link) 渲染到页面上。
下面是一个基本的面包屑导航代码示例,你可以将其添加到你的模板文件中:
<nav aria-label="breadcrumb">
{% breadcrumb crumbs %}
<ol class="breadcrumb">
{% for item in crumbs %}
{% if forloop.Last %}
{# 最后一个元素是当前页,通常不带链接,并可加active类 #}
<li class="breadcrumb-item active" aria-current="page">{{ item.Name }}</li>
{% else %}
{# 其他元素是可点击的链接 #}
<li class="breadcrumb-item"><a href="{{ item.Link }}">{{ item.Name }}</a></li>
{% endif %}
{% endfor %}
</ol>
{% endbreadcrumb %}
</nav>
在这个例子中,forloop.Last 是一个非常有用的内置变量,它能帮助我们判断当前循环到的元素是否是数组中的最后一个。这样,我们就可以为面包屑的最后一个元素(即当前页面)应用不同的样式或移除其链接。
自定义面包屑导航的首页名称
AnQiCMS的 breadcrumb 标签提供了一个 index 参数,让你能够轻松地修改面包屑导航中首页的显示文本。默认情况下,首页会显示为“首页”。
如果你想将首页名称改为“我的主页”或者其他更具个性化的文字,只需在 breadcrumb 标签中添加 index 参数并赋予相应的值即可:
<nav aria-label="breadcrumb">
{% breadcrumb crumbs with index="我的AnQiCMS主页" %}
<ol class="breadcrumb">
{% for item in crumbs %}
{% if forloop.Last %}
<li class="breadcrumb-item active" aria-current="page">{{ item.Name }}</li>
{% else %}
<li class="breadcrumb-item"><a href="{{ item.Link }}">{{ item.Name }}</a></li>
{% endif %}
{% endfor %}
</ol>
{% endbreadcrumb %}
</nav>
通过简单的 index="你的自定义名称" 设置,面包屑导航的第一项就会按你的意愿显示。如果你不希望显示首页名称,也可以尝试将其设置为空字符串,例如 index="",但请注意检查实际显示效果,以确保符合你的预期。
控制是否包含当前页标题以及自定义其名称
除了首页名称,面包屑导航的最后一个元素通常是当前页面的标题。AnQiCMS也提供了灵活的 title 参数来控制这部分的显示。
title 参数有几种用法:
显示当前页的完整标题(默认行为): 如果你不设置
title参数,或者明确设置为title=true,面包屑的最后一个项目将自动显示当前页面的完整标题。{# 默认行为,或者明确指定 title=true #} {% breadcrumb crumbs with index="网站首页" title=true %}不显示当前页标题: 如果你