As an expert who deeply understands the operation of AnQiCMS, I know that a clear and easy-to-use navigation system is crucial for both website visitors and search engines.Breadcrumbs navigation is such an effective tool for enhancing user experience and website SEO performance.It can intuitively display the user's current position in the website structure, helping them easily backtrack, while also providing clues to the website's hierarchy for search engines.

In AnQi CMS, dynamically generating the breadcrumb navigation path for the current page is a simple and efficient process, mainly due to the powerful template tag features built into the system. We do not need to write complex code logic to parse URLs or databases; we simply utilize the dedicatedbreadcrumbLabel, you can realize this function on the front end of the website.

Understand the breadcrumb navigation label of Anqi CMS

Anqi CMS provides a namedbreadcrumbThe dedicated tag, designed to help template developers easily build dynamic breadcrumb navigation.This tag can intelligently identify the type of the current page (whether it is an article detail page, category list page, single page, or others) and automatically generate a complete path from the homepage to the current page.

UsebreadcrumbThe basic syntax structure of the label is concise and clear:

{% breadcrumb 变量名称 with 参数 %}
    {% for item in 变量名称 %}
        {# 在这里渲染面包屑的每个项目 #}
    {% endfor %}
{% endbreadcrumb %}

Here,变量名称is a temporary variable used for storingbreadcrumba data list generated by tags. Usually, we would name itcrumbs(meaning breadcrumbs).forThe loop is used to traverse this list, with each iteration yielding aitemobject that includes the names and links of each stage in the breadcrumb path.

The implementation of dynamically generating breadcrumb navigation paths

To dynamically display breadcrumb navigation on your corporate CMS website, you can do so in the website template (usually)bash.html/header.htmlOr add the following code in the specific breadcrumb page template that needs to be displayed)

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

In this code block:

  • {% breadcrumb crumbs %}It will generate a namedcrumbsarray that contains all the hierarchical data required for building the breadcrumb navigation
  • {% for item in crumbs %}Loop through thiscrumbsarray.
  • item.NameRepresents the display name of the current breadcrumb item (e.g., “Home”, “News Center”, “Article Title”).
  • item.LinkRepresents the URL address corresponding to the current breadcrumb item.
  • {% if forloop.Last %}is a judgment used to check if the current loop is the last item. Typically, the last item of the breadcrumb navigation is the current page, which does not have a link, or it may have aactiveThe CSS class to indicate the current position.

Customize the display of breadcrumb navigation.

Anqi CMS'sbreadcrumbThe tag also provides some parameters, allowing us to customize the display behavior of breadcrumb navigation according to actual needs.

  • Customize Home Page Name (indexParameter)By default, the first item of the breadcrumb navigation will be displayed as “Home”. If you wish to change this name, you can useindexSet the parameter. For example, set the homepage to display as “My Blog”：“

    {% breadcrumb crumbs with index="我的博客" %}
    {# ... 循环渲染代码 ... #}
{% endbreadcrumb %}

  • Control the display of the current page title (titleParameter)On the article detail page or product detail page, etc., the last item of the breadcrumb navigation usually displays the full title of the current page.titleThe parameter allows you to control this behavior:

    • title=true(Default): Show the full title of the current page.
    • title=false: Do not show the title of the current page, the breadcrumb will end at the parent category of the current page.
    • title="自定义标题"Display the current page's breadcrumb items as specified text instead of the actual page title.

    For example, if you want to hide the article title on the detail page and only display up to the category level:

    {% breadcrumb crumbs with title=false %}
    {# ... 循环渲染代码 ... #}
{% endbreadcrumb %}

    If you want to display the last breadcrumb item on the detail page as 'Read Details':

    {% breadcrumb crumbs with title="阅读详情" %}
    {# ... 循环渲染代码 ... #}
{% endbreadcrumb %}

  • Adaptation in a multi-site environment (siteIdParameter)For users managing multiple sites within the same APM CMS instance, if they need to call data from another site's template in a particular site, they can usesiteIdHowever, for generating the breadcrumb navigation for the current site itself, this parameter is usually not required to be manually set, as the system will automatically recognize the context of the current site.

The advantages of dynamic breadcrumb navigation

Through the AnQi CMSbreadcrumbLabel dynamic generation of breadcrumb navigation, you not only save a lot of time manually maintaining navigation links, but more importantly, it ensures the accuracy and consistency of website navigation.When the website structure changes, the breadcrumb navigation will automatically update, avoiding the appearance of dead links and outdated information.This has a significant positive effect on improving user experience, reducing bounce rate, enhancing the website's crawlability and SEO ranking.

The design concept of Anqi CMS is to simplify content management by providing efficient and customizable solutions.Dynamic breadcrumb navigation is the embodiment of this concept, allowing website operators to focus more on creating and distributing high-quality content, while leaving the cumbersome technical details to the system's intelligent processing.

Frequently Asked Questions

Why isn't the title of the current page displayed in my breadcrumb navigation?This is usually becausebreadcrumbTagstitleThe parameter has been set tofalseor a custom fixed string has been set instead of it displaying the dynamic title of the current page. Please check your template at{% breadcrumb crumbs with title=... %}this line of code, to ensuretitleThe value of the parameter meets your expectations. You can omit it if you want to display the title of the current page.titleThe parameter (default is)true), or set it explicitly totitle=true.

How to handle the incorrect level display of breadcrumb navigation or the lack of some intermediate links?The breadcrumb navigation hierarchy is automatically generated based on the category hierarchy or URL structure associated with the content (such as articles, products, pages) in the Anqi CMS.If the display is incorrect, you should first check whether your content category settings are reasonable, for example, whether the article is correctly associated with its category, and whether there is a correct parent-child relationship between categories.Secondly, please check the configuration of the website's pseudo-static rules (under 'Function Management' and 'Pseudo-static Rules' in the background), incorrect URL rules may cause the system to fail to accurately parse the hierarchical paths of the pages.Ensure that your pseudo-static rules clearly reflect the hierarchical structure of the website.

Can I customize the style of the breadcrumb navigation?Of course you can.Breadcrumb navigation tags are responsible for outputting HTML structures with links and names, such as<a>Tags and<li>Tags. All visual styles (such as color, font, layout, etc.) are controlled by CSS. In the above example code, I used<nav>/<ol>and<li>tags, and addedbreadcrumbandbreadcrumb-itemThese CSS classes. You can write custom styles for these class names in the website's CSS file to maintain consistency with your overall website design style.