How to display breadcrumb navigation in AnQiCMS templates and customize the homepage name or whether to include the current page title?

Have you ever felt a bit confused while browsing websites on a daily basis, not being sure of where you are?The Breadcrumb Navigation is like leaving a series of small markers as you explore a new place, clearly indicating where you came from and where you are now.It can significantly improve the user experience of the website, help visitors quickly understand the website structure, and is very beneficial for search engine optimization (SEO), as it provides clear hierarchical information about the website to search engine spiders.

In AnQiCMS, thanks to its powerful and flexible template system, we can easily implement and customize breadcrumb navigation in website templates, including customizing the home page name and flexibly controlling the display of the current page title.

In AnQiCMS template, breadcrumb navigation is displayed

To add breadcrumb navigation in AnQiCMS template, you need to use the built-in system.breadcrumbLabel. This label is usually placed in the common part of each page, such as a file namedpartial/header.htmlorpartial/breadcrumb.htmlthen access it through{% include 'partial/breadcrumb.html' %}such labels to be introduced on pages where breadcrumbs need to be displayed.

breadcrumbThe label will automatically identify the path of the current page and output its hierarchical structure as an array namedcrumbs. You can access it throughforLoop to iterate through thiscrumbs, then you can get the name of each navigation item (Name) and link (",Link) Render to the page.

Below is a basic breadcrumb navigation code example, you can add it to your template file:

<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>

In this example,forloop.LastIt is a very useful built-in variable that can help us determine whether the current element we are looping through is the last one in the array.So, we can apply different styles or remove the link for the last element of the breadcrumb (i.e., the current page).

Customize the home page name of the breadcrumb navigation

AnQiCMSbreadcrumbTags provide aindex参数，让你能够轻松地修改面包屑导航中首页的显示文本。默认情况下，首页会显示为“English”。

If you want to change the home page name to "My Homepage" or other more personalized text, justbreadcrumbtag.indexassign the corresponding value to the

<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>

simpleindex="你的自定义名称"Settings, the first breadcrumb navigation item will be displayed according to your wishes. If you do not want to display the home page name, you can also try setting it to an empty string, for exampleindex=""But please check the actual display effect to ensure it meets your expectations.

Control whether to include the current page title and customize its name

AnQiCMS also provides parameters to control the display of this section. Besides the home page name, the last element of the breadcrumb navigation is usually the title of the current page.titleThe parameter allows you to control the display of this part.

titleThere are several usages of parameters:

1. Display the full title of the current page (default behavior) If you do not settitleparameters, or explicitly set totitle=true, the last item of the breadcrumb will automatically display the full title of the current page.

   {# 默认行为，或者明确指定 title=true #}
   {% breadcrumb crumbs with index="网站首页" title=true %}
   

2. Do not display the title of the current pageIf you