How does AnQiCMS implement the dynamic display of breadcrumb navigation through template tags?

In web design, breadcrumb navigation is a seemingly minor feature, but it is actually crucial.It presents the user's current position on the website in a concise path format, clearly showing, which not only effectively improves user experience and helps visitors quickly understand the website structure and easily backtrack, but also greatly benefits search engine optimization (SEO), as it can provide clear hierarchical information for website crawling by search engine spiders, enhancing the internal link structure of the website.For AnQiCMS users, implementing dynamic breadcrumb navigation is a pleasant task, as it provides powerful and flexible support with built-in template tags.

AnQiCMS template tag: Smart Breadcrumb Navigation Assistant

AnQiCMS provides a named for website developers and operatorsbreadcrumbThe template tag, it is the core tool for implementing dynamic breadcrumb navigation.This label does not require complex logic judgment or manual path concatenation, AnQiCMS will intelligently construct the complete navigation path according to the type of page visited by the user (whether it is an article detail, product list, category page, or independent single page), and provide it to the front-end template for display.

To use this tag, we usually see such a structure:

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

In this code block,breadcrumbThe breadcrumb path generated by the tag is stored in a variable namedcrumbs.crumbsis an array containing multiple objects, each representing a level in the navigation path, and hasName(link name) andLink(link address) two key fields. ThroughforLoop throughcrumbsAn array, and we can display all dynamically generated navigation path items one by one on the page.

Flexible control:breadcrumbParameter parsing of tags

breadcrumbThe tag provides several practical parameters that allow us to adjust the display of breadcrumb navigation according to the specific needs of the website.

• indexParameterThis parameter is used to customize the display text of the 'Home' in the breadcrumb navigation.By default, it may be displayed as "Home" or "首页".index="我的博客".

• titleParameterThis parameter controls whether the breadcrumb navigation displays the title of the current page.

  • Whentitle=trueWhen (default), the last node of the breadcrumb will display the full title of the current page, such as the article title or category name.
  • If set totitle=falseIf it is not displayed, the current page title will not be displayed, and the breadcrumb will stop at the parent page of the current page.
  • You can even specify a string directly, for example,title="文章详情"This will always display the last node as "Article Details" regardless of the current page title.

• siteIdParameterThis parameter is usually not required to be filled in manually.It is mainly applied to the multi-site management scenario of AnQiCMS.siteIdTo implement. For single-site users, AnQiCMS will automatically recognize the context of the current site.

Practical Application: Build Your Dynamic Breadcrumb Navigation

Assuming we have a typical website structure:首页 > 产品中心 > 产品分类A > 产品详情B. When the user visits the "Product Details B" page, we expect the breadcrumb navigation to automatically display this path.

In your template file (for example, it is usually placed inpartial/header.htmlorbash.htmlsuch a public header file, and through{% include "partial/header.html" %}the introduction), you can write the breadcrumb navigation code like this:

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb crumbs with index="网站首页" title=true %}
            {% for item in crumbs %}
                <li class="breadcrumb-item {% if forloop.last %}active{% endif %}">
                    {% if forloop.last %}
                        {{ item.Name }}
                    {% else %}
                        <a href="{{ item.Link }}">{{ item.Name }}</a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

This code takes advantage offorin the loopforloop.lastAn attribute to determine if the current element is the last in the path.If it is, it will be marked as "active" without a link, indicating the current page; otherwise, it will be displayed as a clickable link.In this way, we can easily implement dynamic and interactive breadcrumb navigation.

AnQiCMS's intelligence and automation

AnQiCMS'breadcrumbThe tag can achieve 'dynamic display' because of the powerful content management system's deep integration with various content models (such as articles, products, categories, single pages, etc.)No matter which module the user visits, AnQiCMS can automatically parse the correct hierarchy based on the page URL and internal data structure, and convert it into structured breadcrumb data.This means you don't need to write separate logic for generating breadcrumbs for each page type, AnQiCMS will help you complete these tedious tasks.

Summary

AnQiCMS through its concise and efficient template tagsbreadcrumbMake the implementation of dynamic breadcrumb navigation unprecedentedly simple.Developers and operators only need to understand a few parameters to easily integrate powerful, user-friendly breadcrumb navigation on the website, which not only improves the website user experience but also lays a solid foundation for the website's SEO performance.

Frequently Asked Questions (FAQ)

1. Does the breadcrumb navigation support multilingual?AnQiCMS itself supports multilingual content management and display. If your website has enabled the multilingual function, and the content (such as category names, article titles) has been translated into the corresponding languages, thenbreadcrumbThe navigation path generated by the label will also automatically display the name in the corresponding language according to the language setting of the current website.This means that the dynamic nature of breadcrumbs is also reflected in language switching, without additional configuration.

2. How to customize the display name of a specific page in the breadcrumb navigation (for example, "About Us")? breadcrumbThe label is generated by prioritizing the title of the page, category, or article itself when creating the path.If you want the breadcrumb name of a specific page to be different, you can edit it in the backend editing interface of the page (such as a single page), by modifying the relevant fields such as 'SEO title' or 'custom URL'.titleSpecify a fixed display text for the last element of the breadcrumb using the parameter, for example,title="企业介绍".

3. If I customize the URL rewrite rules, can the breadcrumb navigation still work?Yes, it is AnQiCMS'sbreadcrumbTags are constructed based on the internal data structure and link generation logic of the system to build navigation paths, and they work协同 in conjunction with the static rules you set up in the background.Whether your URL rule is a numeric pattern, model naming pattern, or custom pattern, as long as the pseudo-static rule is configured correctly, AnQiCMS can identify the current page path and generate the corresponding breadcrumb link and name.