How to generate breadcrumb navigation using the `breadcrumb` tag to enhance the user's understanding of the page hierarchy?

In a complex website content structure, users sometimes feel lost, not knowing the location of the current page.At this time, an auxiliary navigation method called "Breadcrumb Navigation" is particularly important.It can clearly show the user's path from the homepage to the current page, and it can also help users quickly understand the hierarchical structure of the website, thereby improving the browsing experience.breadcrumbTags are exactly the tools for generating this efficient navigation.

Make the page structure clear at a glance: AnQiCMSbreadcrumbPractical guide to generating breadcrumb navigation with tags

AnQiCMS'breadcrumbThe tag is powerful because it can automatically identify the hierarchical relationship of the content on your website and present it intuitively to the user. Whether it's articles, products, or category pages under custom models,breadcrumbCan build a complete path from the homepage based on the current page category, module, and even specific documents intelligently.For example, when a user visits an article belonging to the "Technical Articles" category under the "AnQiCMS Template Development" article, the breadcrumb navigation may display as "Home > Technical Articles > AnQiCMS Template Development".This makes it clear to the user where the current page comes from and also provides a convenient and quick way to return to the parent page.

breadcrumbUsage method of the tag

In the AnQiCMS template, usebreadcrumbtags are very simple and intuitive. You just need to insert the following basic code structure at the location where you want to display the breadcrumb navigation:{% breadcrumb crumbs %} ... {% endbreadcrumb %}.

HerecrumbsIt is a variable automatically generated by AnQiCMS, which contains each link and name of the breadcrumb navigation. You can use it like traversing a list, usingforLoop to output these navigation items one by one. Each navigation item includesName(link text) andLink(link address) two key properties. A typical usage might be:

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb crumbs %}
            {% 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 %}
        {% endbreadcrumb %}
    </ol>
</nav>

This code will render a breadcrumb navigation that conforms to standard HTML semanticforloop.lastDetermine whether it is the current page so that styles can be distinguished.

Flexible customization: Enhance user experience parameters

AnQiCMS'breadcrumbTags provide several practical parameters, allowing you to customize flexibly according to the design requirements of the website:

FirstlyindexParameterIt allows you to customize the display text of the 'Home' in breadcrumb navigation.By default, it will display as 'Home'.{% breadcrumb crumbs with index="我的网站主页" %}.

Next istitleParameterThis parameter determines whether the current page title will be displayed at the end of the breadcrumb navigation. The default value istrueIt shows the complete title of the current page. But sometimes, the H1 title of the current page is already very prominent, and you may not want to repeat it in the breadcrumbs. In this case, you can set it tofalse:{% breadcrumb crumbs with title=false %}. You can even specify a string as the display text for the current page in the breadcrumb, for example:{% breadcrumb crumbs with title="文章详情页" %}.

In addition, there is another.siteIdParameterIt is mainly used in a multi-site management environment, if you need to call data from a specific site to generate breadcrumbs.For single-site users, it is usually not necessary to pay attention to this parameter, the system will automatically identify the current site.

Master these parameters and you can easily adjust the breadcrumb