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

Have you ever felt a bit confused while browsing websites on a daily basis?Breadcrumb Navigation is like leaving a series of small markers along the way when you explore a new place, allowing you to clearly know where you came from and where you are now.It can not only significantly improve the user experience of the website, help visitors quickly understand the website structure, but also greatly benefit from search engine optimization (SEO), because it provides clear website hierarchy information for search engine spiders.

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

Display breadcrumb navigation in AnQiCMS template

To add breadcrumb navigation to the 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 it is accessed through{% include 'partial/breadcrumb.html' %}Such a label is introduced on pages where breadcrumbs need to be displayed.

breadcrumbThe label automatically identifies the current page path and outputs the hierarchical structure as a namedcrumbsThe array object. You can go throughfora loop to iterate over thiscrumbsarray, then name each navigation item (Name) and link (LinkRender 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 helps us determine whether the current element being looped through is the last one in the array.This way, we can apply a different style or remove the link of the last element in the breadcrumb (i.e., the current page).

Customize the home page name of the breadcrumb navigation

AnQiCMS'breadcrumbTags provide aindexParameter, allows you to easily modify the display text of the home page in the breadcrumb navigation. By default, the home page will display as "home".

If you want to change the home page name to 'My Homepage' or any other personalized text, just inbreadcrumbthe tag withindexthe parameter and assign the corresponding value:

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

By simpleindex="你的自定义名称"Set, the first item of the breadcrumb navigation will display 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=""Please note the actual display effect, to ensure it meets your expectations.

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

Besides the home page name, the last element of the breadcrumb navigation is usually the title of the current page. AnQiCMS also provides flexibletitleparameters to control the display of this part.

titleThere are several ways to use the parameter:

1. Display the full title of the current page (default behavior): If you do not settitleparameter, or set it explicitlytitle=truethe 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