How to dynamically generate the breadcrumb navigation path of the current page?

As an expert who is deeply familiar with the operation of AnQiCMS, I know that a clear and easy-to-use navigation system is crucial for website visitors and search engines.Breadcrumb Navigation is a highly effective tool for improving user experience and website SEO performance.It can directly show the user's current position in the website structure, helping them easily backtrack, while also providing clues for the website hierarchy to search engines.

In AnQi CMS, dynamically generating the breadcrumb navigation path of the current page is a simple and efficient process, mainly thanks to the powerful template tag function built into the system. We do not need to write complex code logic to parse the URL or database, just by using the specialbreadcrumbLabel, you can realize this function on the website front-end.

Understand the breadcrumb navigation label of AnQi CMS.

AnQi CMS provides namedbreadcrumbThe dedicated tag, designed to help template developers easily build dynamic breadcrumb navigation.This label can intelligently identify the type of the current page (whether it is an article detail page, a category list page, a 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 to storebreadcrumbThe data list generated by the tag. Usually, we would name itcrumbs(meaning breadcrumbs).fora loop is used to traverse this list, each iteration will get oneiteman object that contains the names and links of each step in the breadcrumb path.

Implementation of dynamically generating breadcrumb navigation paths

To dynamically display breadcrumb navigation on your Anqi CMS website, you can do so in the website template (usually bash.html/header.htmlOr add the following code in the specific breadcrumb display page template:

<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 an array namedcrumbswhich contains all the hierarchical data required to build the breadcrumb navigation.
• {% for item in crumbs %}Loop through thiscrumbsarray.
• item.NameRepresents the display name of the current breadcrumb item (for example, "Home", "News Center", "Article Title").
• item.LinkRepresents the URL address corresponding to the current breadcrumb item.
• {% if forloop.Last %}It is a judgment to check if the current loop is the last item. Usually, the last item of the breadcrumb navigation is the current page, it does not have a link, or it may have oneactiveThe CSS class to indicate the current position.

Customize the display of the breadcrumb navigation.

Of Security CMSbreadcrumbThe tag also provides some parameters to customize the display behavior of the breadcrumb navigation according to actual needs.

• Customize Home Page Name (indexparameters)By default, the first item of the breadcrumb navigation will display as "Home". If you want to change this name, you can useindexSet the parameters. For example, set the homepage to display "My Blog":

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

• Control the display of the current page title (titleparameters)On the detail page of an article or product and other terminal pages, 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=falseDo 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 item 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 under multi-site environment (siteIdparameters)For users who manage multiple sites in the same AnQi CMS instance, if they need to call data from other sites in the template of a site, they can usesiteIdParameter. However, 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 identify the context of the current site.

Advantages of Dynamic Breadcrumb Navigation

Passing through the Aanqi CMS'sbreadcrumbLabel dynamically generates breadcrumb navigation, not only can you save a lot of time manually maintaining navigation links, but more importantly, it ensures the accuracy and consistency of the website navigation.When the website structure changes, the breadcrumb navigation will be updated automatically, avoiding dead links and outdated information.This has a significant positive effect on improving user experience, reducing bounce rate, improving website crawlability and SEO ranking.

The design philosophy 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 entrusting the cumbersome technical details to the system's intelligent processing.

Frequently Asked Questions

Why is my Breadcrumb Navigation not displaying the current page title?This is usually becausebreadcrumblabel'stitlethe parameter is set tofalseOr it has been set to a custom fixed string, instead of displaying the dynamic title of the current page. Please check your template.{% breadcrumb crumbs with title=... %}this line of code to ensuretitleThe value of the parameter meets your expectations. If you wish to display the title of the current page, it can be omittedtitleParameters (default totrue), or explicitly set astitle=true.

How do I fix the incorrect level display of the breadcrumb navigation or the missing intermediate links?The breadcrumb navigation levels are automatically generated based on the categories or URL structures associated with the content in Anqi CMS (such as articles, products, pages).If the display is incorrect, the first thing to check is whether your content category settings are reasonable, for example, whether the articles are correctly associated with their respective categories, and whether there are correct parent-child relationships between the categories.Next, please check the website's pseudo-static rule configuration (under "Function Management" in the background "Pseudo-static Rule"), incorrect URL rules may cause the system to fail to accurately parse the hierarchical path of the page.Ensure that your 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>Label. All visual styles (such as color, font, layout, etc.) are controlled by CSS. In the above example code, I used<nav>/<ol>and<li>labels and added them.breadcrumbandbreadcrumb-itemCSS classes. You can write custom styles for these class names in the website's CSS file to maintain consistency with your overall website design.