How to generate and display a clear hierarchical breadcrumb navigation on the AnQiCMS page using the `breadcrumb` tag?

In website operation, a clear navigation path is crucial for improving user experience and search engine optimization (SEO).When we browse websites, a concise and clear path can help us quickly locate and understand our current position.This navigation form is usually called "Breadcrumb Navigation", which is like the breadcrumbs you leave on your way home, clearly showing the position of the current page in the website structure, such as "Home > Product Category > Electronics > Smartphones"。

AnQiCMS provides a powerful and easy-to-usebreadcrumbTags that let you easily generate and display these well-structured navigation levels on a website.It can intelligently identify and construct a complete hierarchy path based on the context of the current page, such as the category, document detail page, even custom pages, thus saving the trouble of manually maintaining complex navigation.

ingenious usagebreadcrumblabel-based navigation

breadcrumbThe core function of the tag is to return an array object containing information about each link in the path.This array represents each element as a node in the navigation path, which includes the display name of the node and the corresponding link address.In the template, we usually assign this array to a variable, such ascrumbsThen, the information is displayed on the page through a loop.

The most basicbreadcrumbThe tag usage may be like this:

{% breadcrumb crumbs %}
    <nav class="breadcrumb-nav">
        {% for item in crumbs %}
            {% if not forloop.Last %}
                <a href="{{ item.Link }}">{{ item.Name }}</a> &gt;
            {% else %}
                <span>{{ item.Name }}</span>
            {% endif %}
        {% endfor %}
    </nav>
{% endbreadcrumb %}

In this code block,{% breadcrumb crumbs %}Defined a namedcrumbsVariable to receive breadcrumb path data. Next,{% for item in crumbs %}Loop throughcrumbsEach item in the array. We useforloop.LastThis built-in variable is used to determine whether the current loop is the last element, usually the last element is the current page, it does not need a link, just display the text.Thus, a clear and reasonable breadcrumb navigation appears in front of the visitor.

Personalize your breadcrumb navigation

AnQiCMS'breadcrumbThe tag also provides some parameters to help you customize it more finely according to your actual needs.

FirstlyHome page name. You may not want the breadcrumb start point to always display 'Home', but 'Website Homepage' or other more brand-characteristic names. In this case, you can useindexSpecify the display text for the home page, for example:index="我的主页".

Next isDisplay of the current page title. For the last element of the breadcrumb navigation, which is the current page itself, you may want to display it as the full title of the document, or a simpler description, or even not display it at all.titleThe parameter provides such flexibility:

• By default,title=trueIt will display the full title of the current page. For example, on an article detail page, it will display the title of the article.
• If you find the document title too long, or do not want it to appear in the breadcrumb on some pages, you can set it totitle=falseto hide.
• If you want to give a unified description to the current page, for example, to display 'Product Details' on all product detail pages, you can pass a specific string, for example:title="产品详情".

There is anothersiteIdA parameter, it is mainly used for multi-site management scenarios. If you are using the AnQiCMS multi-site feature and need to call data from a specific site to generate breadcrumbs, it may be used.In most cases, for a single site or default site, this parameter does not need to be set.

Combining these parameters, we can build a more customizable breadcrumb navigation. For example, the following example shows how to set the home page text to "website home page" and turn off the display of the current page title:

{% breadcrumb pathItems with index="网站首页" title=false %}
    <ol class="breadcrumb">
        {% for item in pathItems %}
            <li{% if forloop.Last %} class="active"{% endif %}>
                {% if not forloop.Last %}
                    <a href="{{ item.Link }}">{{ item.Name }}</a>
                {% else %}
                    {{ item.Name }}
                {% endif %}
            </li>
        {% endfor %}
    </ol>
{% endbreadcrumb %}

In this example, we will change the variable name fromcrumbstopathItemsThis means you can name it according to your preference. Bytitle=falseThe title of the current page will not appear at the end of the breadcrumb, making the navigation path more concise.forloop.LastThe judgment ensures that the last element of the path will not be added a link, and it can be added withactivea style class to highlight the current position.

AnQiCMS'breadcrumbThe label generates intelligent paths and offers flexible customization options, greatly simplifying the implementation of website navigation.It is an indispensable tool to enhance user experience or optimize SEO, making the structure of your website clear at a glance.

Frequently Asked Questions (FAQ)

Q1: Why is my breadcrumb navigation not displaying the title of the current page, or is displaying a title that is not what I want?A: This is likely becausetitleParameter settings. By default,title=trueit will display the full title of the current page (such as an article or product). If you want to hide it, you can settitle=falseIf you want to display a unified description, such as "news details", you can settitle="新闻详情". Please check yourbreadcrumbin the tagtitleparameter configuration.

Q2: How to adjust the breadcrumb navigation style to make it more in line with my website design?A:breadcrumbThe tag is responsible for generating the HTML structure and content of the breadcrumb navigation, and the specific visual style needs to be controlled through CSS. You can place the breadcrumb navigation in your template.nav/ol/li/a/spanAdd custom CSS classes to HTML elements (such as the example above)breadcrumb-navorbreadcrumb），Then define the styles for these classes in your website's stylesheet (CSS file), including font, color, spacing, and separator styles, etc.

Q3: How do I change the starting text of the breadcrumb navigation from 'Home' to other words, such as 'Website Homepage'?A: You can useindexParameters to easily modify the home display text of the breadcrumb navigation. Just inbreadcrumbthe tag withindex="你的自定义文字"That's it, for example:{% breadcrumb crumbs with index="网站主页" %}. This way, the starting point of your breadcrumb navigation will display the custom text you have set.