如何在AnQiCMS模板中显示面包屑导航,并自定义其首页名称或是否包含当前页标题?

📅 👁️ 73

在日常的网站浏览中,你是否曾因不清楚自己身处何处而感到些许迷茫?面包屑导航(Breadcrumb Navigation)就像你探索一个新地方时,沿途留下的一个个小标记,让你清晰地知道从哪里来,现在又在哪里。它不仅能显著提升网站的用户体验,帮助访客快速理解网站结构,对于搜索引擎优化(SEO)也大有裨益,因为它为搜索引擎蜘蛛提供了清晰的网站层次结构信息。

在AnQiCMS中,得益于其强大而灵活的模板系统,我们可以非常便捷地在网站模板中实现和定制面包屑导航,包括自定义首页名称以及灵活控制当前页面的标题显示。

在AnQiCMS模板中显示面包屑导航

要在AnQiCMS模板中加入面包屑导航,你需要用到系统内置的 breadcrumb 标签。这个标签通常会放置在每个页面的公共部分,比如一个名为 partial/header.htmlpartial/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 参数有几种用法:

  1. 显示当前页的完整标题(默认行为): 如果你不设置 title 参数,或者明确设置为 title=true,面包屑的最后一个项目将自动显示当前页面的完整标题。

    {# 默认行为,或者明确指定 title=true #}
    {% breadcrumb crumbs with index="网站首页" title=true %}
    
  2. 不显示当前页标题: 如果你

相关文章

AnQiCMS如何利用`navList`标签构建和显示多级网站导航菜单?

在构建一个功能完善的网站时,清晰直观的导航菜单是用户体验的核心。AnQiCMS 提供了强大的模板标签系统,其中 `navList` 标签就是专门用来构建和显示网站多级导航菜单的利器。它不仅能够展示你在后台配置的导航结构,还能帮助你将技术细节转化为用户友好的交互体验。 ### 构建导航的基石:后台设置 在使用 `navList` 标签之前,首先需要在 AnQiCMS

2025-11-07

如何在AnQiCMS中获取并显示网站的联系方式,如电话、邮箱、地址和社交媒体链接?

在构建和运营网站时,清晰地展示联系方式对于建立用户信任、提供客户支持至关重要。AnQiCMS作为一个高效的内容管理系统,提供了直观的途径来管理和显示这些关键信息,无论是传统的电话、邮箱,还是现代的社交媒体链接,都能轻松实现。 ### 一、后台配置:统一管理您的联系信息 AnQiCMS设计了一个集中式的区域,让您能够在一个地方管理所有的网站联系信息。要访问这个功能,您只需登录后台

2025-11-07

如何在AnQiCMS模板中获取并显示网站的系统全局设置,如网站名称、Logo、备案号和版权信息?

在构建网站时,一些核心信息如网站名称、网站Logo、备案号以及版权信息是不可或缺的元素。这些全局性的设置不仅能帮助访客快速识别您的品牌,也是网站专业性和合规性的体现。AnQiCMS 提供了一套直观而灵活的方式来管理和在模板中呈现这些系统级的信息。 ### 在哪里设置这些全局信息? 首先,这些重要的网站信息都需要在 AnQiCMS 的后台进行统一配置。通常

2025-11-07

如何获取并显示文章的Tag标签列表及其对应的链接?

在内容日益丰富的网站中,如何有效组织和呈现信息至关重要。文章的Tag标签(通常称为关键词或标签)不仅能帮助用户快速找到相关内容,也是搜索引擎优化(SEO)不可或缺的一部分。安企CMS深知这一点,为用户提供了强大且灵活的标签功能,让您能够轻松地为文章添加标签,并在网站前端以多种形式展示这些标签及其对应的链接。本文将详细介绍如何在安企CMS中获取并显示文章的Tag标签列表

2025-11-07

AnQiCMS如何动态生成并显示页面的Title、Keywords和Description(TDK)以优化SEO?

在网站运营中,让您的内容在搜索引擎中脱颖而出,吸引更多目标用户,离不开Title、Keywords和Description(TDK)这三个核心元素的精心设置。AnQiCMS深知TDK对SEO的重要性,因此在系统设计之初就融入了完善的动态TDK生成与管理机制,让您能够灵活、高效地优化网站的每一个页面。 ### AnQiCMS 动态 TDK 机制概览 AnQiCMS 的 TDK

2025-11-07

如何为AnQiCMS网站启用多语言支持,并在前端模板中显示语言切换选项?

全球化浪潮下,网站不再仅仅服务于本地用户,如何让不同语言背景的访客都能无障碍地访问和理解网站内容,成为许多运营者面临的重要挑战。安企CMS(AnQiCMS)深知这一需求,提供了一套灵活且强大的多语言支持方案,帮助网站轻松拓展国际市场。本文将详细介绍如何在AnQiCMS网站中启用多语言功能,并引导您在前端模板中集成语言切换选项,提升用户体验。 ### 启用AnQiCMS的多语言支持

2025-11-07

AnQiCMS如何处理和显示图片资源,包括自动压缩、转换为WebP格式及水印管理?

在网站内容运营中,图片是吸引访客、传递信息不可或缺的元素,但其体积大小、加载速度及版权保护同样是运营者关注的焦点。AnQiCMS作为一个内容管理系统,深谙此道,因此集成了一系列智能化的图片资源处理与优化功能,旨在帮助我们更高效、更省心地管理网站图片,提升用户体验和SEO表现。 ### 一、高效上传与智能优化:图片的基础处理 当我们向网站上传图片时,无论是从本地选择文件,还是引用外部链接的图片

2025-11-07

如何在AnQiCMS模板中获取并显示单页(例如“关于我们”或“联系我们”)的内容和信息?

在安企CMS中管理和展示单页内容,如“关于我们”、“联系我们”或“服务条款”等,是网站运营中非常常见的需求。安企CMS为开发者提供了直观且功能强大的模板标签,让您可以轻松地在网站前端获取并呈现这些页面上的信息。 ### 理解安企CMS中的单页内容管理 首先,我们需要了解安企CMS是如何管理这些“单页”的。在后台的“页面资源”模块下,您可以找到“页面管理”功能。在这里,您可以创建

2025-11-07