How to accurately distinguish and display the path of different content models (such as articles, products) in the AnQiCMS breadcrumb navigation?

The website is in operation, user experience and search engine optimization (SEO) are always the two core concerns.And a well-designed, hierarchical breadcrumb navigation (Breadcrumb Navigation) undoubtedly plays a key role in both aspects.It not only helps users clearly understand their position on the website, quickly return to the upper page, but also provides website structure clues for search engines to improve crawling efficiency.

As an experienced website operation expert, I know the flexibility of AnQiCMS (AnQi CMS) in content management.The powerful "content model" customization feature allows us to create various content types such as articles, products, events, and more according to business needs.However, this flexibility also brings an interesting question for the display of breadcrumb navigation: how can we accurately differentiate and display the paths corresponding to different content models in the AnQiCMS breadcrumb navigation?

Today, let's delve into this issue and provide practical solutions.

Understand the content model and breadcrumb navigation of AnQiCMS.

The unique feature of AnQiCMS lies in its flexible content model management.This means that your website can have different content types with different structures and business logic.For example, you might have a 'News Information' model for publishing articles, a 'Product Display' model for listing products, and even a 'Solution' model to introduce services.Each content model has its own classification system and detail page.

Breadcrumbs navigation is an indispensable element of a website, its responsibility is to depict the user's access path from the homepage to the current page. In AnQiCMS, we make use of the powerful template engine and built-inbreadcrumbLabel to construct this path. This label will automatically analyze the URL structure and content type of the current page, and generate a series of path nodes for rendering in the template.

For example, a user may access an article on the path "Homepage > News Information > Industry Dynamics > CMS Development Trends" or a product page "Homepage > Product Display > Smart Hardware > Some Phone".The task of breadcrumb navigation is to accurately present these level information.

The core principle: how the content model affects the breadcrumb path

AnQiCMS handles breadcrumb navigation intelligently, with its smartness manifested in the deep recognition of content models.When you visit a specific piece of content, whether it is an article, a product, or an entry under a custom model, the system will automatically identify the content model it belongs to.

There is a key point:Each content model in the AnQiCMS backend has a unique 'model name'(For example: article, product, solution), this name has been set when you defined the content model.This 'model name' will be cleverly integrated into the breadcrumb navigation hierarchy by AnQiCMS, serving as a path identifier at the model level.

This means that when a user accesses a detail page or list page under a content model,breadcrumbthe path node generated by the tag will naturally include the name of the content model. For example:

• If you are accessing the category page under the "Article" model, the breadcrumbs may be: Home u003e Article u003e Category Name.
• If you visit the detail page under the "Product" model, the breadcrumb may be: Home > Product > Category Name > Product Title.

AnQiCMS'breadcrumbThe tag will return an array object containing path nodes (crumbs) with each node containingName(link name) andLink(link address) and other information. By traversing thiscrumbsArrays, we can display the paths one by one in the template.

Practical operation: Use breadcrumb tags to accurately display the path.

UsebreadcrumbThe tags are actually very intuitive. In your template file (usuallybash.htmlIn the main layout file, you can call it like this:

<nav class="breadcrumb">
    {% breadcrumb crumbs with index="首页" title=true %}
    <ul>
        {% for item in crumbs %}
            <li>
                <a href="{{ item.Link }}">{{ item.Name }}</a>
            </li>
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</nav>

This code snippet shows a basic and complete usage. Let's break it down:

1. {% breadcrumb crumbs with index="首页" title=true %}This is the core of calling the breadcrumb tag.

   • crumbsThis is a custom variable name used to receive all nodes of the breadcrumb path.
   • index="首页": This parameter allows you to customize the display text of the leftmost "home" or "homepage" in the breadcrumb, the default is "Home".You can modify it according to the brand or website positioning to 'My Blog', 'Company Website', etc.
   • title=true: This parameter determines whether the last node of the breadcrumb navigation displays the title of the current page. When set totrueIf the current page is a detail page, its title will be the last node of the breadcrumb; set it tofalseit will not be displayed. You can also set it to a custom string, such astitle="当前详情".

2. <ul>...{% for item in crumbs %}...</ul>: This is the traversalcrumbsarray, rendering the loop structure of each path node. Eachitemrepresents a path node, which has two main properties:

   • item.Name: The display name of the node, such as 'Home', 'News Information', 'CMS Development Trend.'
   • item.Link: The URL address corresponding to the node, which can be clicked to jump.

usually, we would like the last path node (the current page) to be linkless or have a different style. You can do this byforloop.LastThis built-in loop variable is used to determine whether it is the last element in the loop:

<nav class="breadcrumb">
    {% breadcrumb crumbs with index="首页" title=true %}
    <ul>
        {% for item in crumbs %}
            <li>
                {% if forloop.Last %}
                    <span>{{ item.Name }}</span> {# 最后一个节点通常不带链接 #}
                {% else %}
                    <a href="{{ item.Link }}">{{ item.Name }}</a>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</nav>

Detailed display: Differentiate the performance of different content models in the breadcrumb

Because AnQiCMS integrates the 'model name' of the content model into the breadcrumb path (manifested initem.NameIn Chinese, we do not need to encode extra 'determine' what kind of content model is currently. The system has automatically completed this 'distinguish' work.

If you wish to visually distinguish different content model paths, for example, adding a shopping bag icon to the product path and a pen icon to the article path, then you can traversecrumbsAt that time, through the checkitem.NameTo achieve this dynamic display:

`twig