Breadcrumb Navigation is a very common and practical navigation method on websites, which can clearly display the current position of the user in the website's hierarchy structure, just like breadcrumbs scattered in the forest guiding the way home.For users, breadcrumb navigation not only helps them quickly understand the hierarchical relationship of the current page within the entire website, but also makes it convenient for them to backtrack to the previous level or higher-level pages, greatly enhancing the website user experience.At the same time, for Search Engine Optimization (SEO), a clear breadcrumb path also helps search engines better understand the website structure, which may result in better crawling and ranking effects.

AnQi CMS, as an efficient content management system, fully considers the importance of this feature and built-in convenient breadcrumb navigation tags, allowing website operators to easily display and manage these navigation paths on content pages.

Add breadcrumb navigation to the content page

To display the breadcrumb navigation correctly on the content page of AnQi CMS, we first need to use its built-in template filebreadcrumbTags. Usually, to maintain the tidiness and reusability of the template, we will place the breadcrumb navigation code snippet in a separate template file (e.g.,partial/breadcrumb.html), and then throughincludeLabel it to be included in the common header file of the website (such asbash.html) or the specific content page template.

The following is an example of a basic breadcrumb navigation implementation:

Firstly, in your template directory,partialcreate a file namedbreadcrumb.html(if it does not already exist).

{# partial/breadcrumb.html #}
<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <ol class="breadcrumb-list">
        {% breadcrumb crumbs %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {% if forloop.Last %} {# 判断是否为最后一个面包屑项 #}
                        <span aria-current="page">{{item.Name}}</span>
                    {% else %}
                        <a href="{{item.Link}}">{{item.Name}}</a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

In this code block:

  • {% breadcrumb crumbs %}It is a core tag provided by AnQin CMS, which automatically generates an array containing path information based on the current page's URL and the structure of the website.crumbsa variable.
  • {% for item in crumbs %}to iteratecrumbsEach path segment in the array.
  • item.NameRepresents the display name of the path segment (e.g., “Home”, “Article Category”, “Article Title”).
  • item.LinkRepresents the URL address corresponding to the path segment.
  • forloop.Lastis a built-in loop variable used to determine if the current loop item is the last one. Typically, the last breadcrumb item (i.e., the current page) should not be a link but just plain text, and witharia-current="page"Properties are enhanced for accessibility.

Next, you can use it in your website's common template file (such as)bash.html) in the<body>Introduce this breadcrumb navigation snippet at an appropriate location (usually the top content area of the page, below the main navigation):

{# bash.html 或您希望显示面包屑导航的任何模板文件 #}
...
<body>
    {# 网站头部内容，如Logo、主导航等 #}
    {% include "partial/header.html" %}

    <main>
        {# 引入面包屑导航 #}
        {% include "partial/breadcrumb.html" %}

        {# 当前页面主要内容区域 #}
        {% block content %}{% endblock %}
    </main>

    {# 网站底部内容 #}
    {% include "partial/footer.html" %}
</body>
...

After completing these steps, whenever you visit any content page on the website, such as article details page, product details page, category list page, or a single page, the system will automatically generate and display the corresponding breadcrumb navigation path based on the current page's position.

Customize the display of breadcrumb navigation.

Anqi CMS'sbreadcrumbTags also provide some parameters that allow you to have more fine-grained control over the display of breadcrumbs navigation:

  1. Customize the home page name (}index)By default, the first item of the breadcrumb navigation is “Home Page”. If you want to display it as another name, such as “My Blog” or “Website Homepage”, you can useindexParameter settings.

    {% breadcrumb crumbs with index="我的博客" %}
    {# ... 循环显示 crumbs ... #}
{% endbreadcrumb %}

  2. Control document title display (title)In the document detail page (such as articles, product pages), the last item in the breadcrumb navigation is usually the title of the document. You cantitleParameters to control its display mode:

    • title=true(Default): Show the full document title.
    • title=false: Do not show the document title, breadcrumb path stops at the current category.
    • title="自定义标题"Show the custom string you specified as the last bread item.
    {# 在文章详情页，如果不想显示具体文章标题，只到分类层级 #}
{% breadcrumb crumbs with title=false %}
    {# ... 循环显示 crumbs ... #}
{% endbreadcrumb %}


{# 或者，将文章标题统一显示为“文章详情” #}
{% breadcrumb crumbs with title="文章详情" %}
    {# ... 循环显示 crumbs ... #}
{% endbreadcrumb %}

Combine these parameters and you can flexibly adjust the display effect of breadcrumb navigation according to the design of the website and the needs of user experience.

Practical suggestions for breadcrumb navigation

  • Semantic HTML: Use<nav>/<ol>/<li>and<a>Use semantic tags to build breadcrumb navigation, which helps to improve the accessibility and SEO-friendliness of the website.
  • Clear styles: Although the functionality of breadcrumb navigation is stronger than its visual appeal, it still requires appropriate CSS styling to maintain consistency with the overall website style and to make it easily identifiable and clickable for users.Ensure there is enough click area for the link, and the current page (the last item) can be clearly identified by style.
  • Responsive design: On mobile devices, breadcrumb navigation may appear lengthy due to space limitations.Consider using a responsive design, such as displaying only the recent few levels, or collapsing the breadcrumbs into a clickable 'back' button.
  • Hierarchical logic: Breadcrumb navigation should strictly follow the actual hierarchical structure of the website, do not skip levels or create logically inconsistent paths, as this will confuse users.

Through the CMS provided by AnQibreadcrumbTags and their flexible parameters allow you to easily build user-friendly and SEO-optimized breadcrumb navigation for your website, enhancing the overall quality of your site.

Common Questions (FAQ)

1. Why isn't my breadcrumb navigation showing up?

If the breadcrumb navigation is not showing, please check the following points first:

  • Did you correctly import it in the template?breadcrumb.html?Confirm that your main template file (such asbash.htmlor page detail template) is used{% include "partial/breadcrumb.html" %}Label.
  • breadcrumb.htmlIs the file located in the correct path?Ensure that the file is indeed intemplatethe directory.partialIn the folder.
  • Does the current page have a clear hierarchy?Breadcrumbs navigation is automatically generated based on the page classification, model, or parent-child relationship of a single page.If the current page is the website's homepage, or does not have a clear category, the breadcrumb may only show "Homepage" or be empty.Please check if the classification settings of the content are correct.
  • Is the website cache cleared?After modifying the template file, sometimes you need to clear the website cache to see the latest effect. You can find the "Update Cache" feature in the Anqi CMS backend to perform the operation.

How to exclude a certain level from breadcrumb navigation, such as not displaying the intermediate level 'Product Category'?

Anqi CMS'sbreadcrumbThe label itself does not provide a direct function to exclude specific levels. However, you can achieve this by using a loop{% for item in crumbs %}Add conditional judgment to implement custom filtering logic. For example, if you want to exclude the level named "Product Category", you can modify it in this waybreadcrumb.html:

<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <ol class="breadcrumb-list">
        {% breadcrumb crumbs %}
            {% for item in crumbs %}
                {# 假设 item.Name 不会是空字符串 #}
                {% if item.Name != "产品分类" %}
                    <li class="breadcrumb-item">
                        {% if forloop.Last %}
                            <span aria-current="page">{{item.Name}}</span>
                        {% else %}
                            <a href="{{item.Link}}">{{item.Name}}</a>
                        {% endif %}
                    </li>
                {% endif %}
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

Please note that this method is based on the name of the breadcrumb item, and if the name may change or there are multiple similar names, you need to adjust the judgment logic.

How to change the breadcrumb navigation style?

The visual style of the breadcrumb navigation is entirely dependent on your website's CSS file. It is provided by the AnqiCMSbreadcrumbThe tag is mainly responsible for outputting the HTML structure of the navigation path. As for the color, font, size, spacing, and background, you need to implement them by writing or modifying CSS code.

You can use similarbreadcrumb-nav/breadcrumb-list/breadcrumb-itemandbreadcrumb-item aCSS selectors to set styles specifically. For example:

`css