In website operation, clear navigation paths are crucial for user experience.Auto breadcrumbs navigation (Breadcrumb Navigation) is like a clue in real life, it clearly shows the user's current position in the website, allowing users to see where they are at a glance and quickly return to the previous level or higher-level page.This not only helps users quickly understand the structure of the website and improve the user experience, but also is very beneficial for search engine optimization (SEO), because it helps search engines better understand the hierarchical structure of the website.

AnQiCMS as a powerful and user-friendly content management system, built-in simple and easy-to-use template tags, allowing us to easily integrate breadcrumb navigation in the page without complex programming.

How to display breadcrumb navigation in AnQiCMS template?

The core of implementing breadcrumb navigation in AnQiCMS template isbreadcrumbLabel. This label will intelligently parse the complete path of the current page and generate a list of data, which can be displayed in the template.

Basic Usage

UsebreadcrumbWhen labeling, you need to specify a variable name to receive the generated path data. For example, we can name itcrumbs. Then, you can useforLoop through thiscrumbsvariable, get the name of each path item (",Name) and link (",Link) and display it.

Here is a basic breadcrumb navigation implementation example:

<nav class="breadcrumb-nav">
    <ol class="breadcrumb">
        {% breadcrumb crumbs %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {% 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 %}：Declare and generate breadcrumb path data, stored incrumbsthe variable.
  • {% for item in crumbs %}: Iterate overcrumbsArray, each path item is stored initemthe variable.
  • {{item.Link}}：Get the link address of the current path item.
  • {{item.Name}}：Get the display name of the current path item.
  • {% if forloop.Last %}This is a built-in loop variable used to determine if it is the last element in the loop.The last element of the breadcrumb (i.e., the current page) is usually plain text without a link.

Through the above code, AnQiCMS will automatically generate a complete navigation path from the homepage to the current page according to the current page type (article detail page, category list page, single page, etc.) and the website's hierarchical structure.

Customize your breadcrumb navigation

breadcrumbTags also provide some parameters, allowing you to have finer control according to your actual needs.

  1. Customize the home page name (}indexParameter)By default, the starting point of the breadcrumb navigation will display as “Home Page”. If you want to change this text, such as displaying “My Blog”, “Website Homepage” or other brand names, you canindexThe parameter is used to set.

    <nav class="breadcrumb-nav">
    <ol class="breadcrumb">
        {% breadcrumb crumbs with index="我的专属博客" %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {% if forloop.Last %}
                        {{item.Name}}
                    {% else %}
                        <a href="{{item.Link}}">{{item.Name}}</a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

    The above code will display the starting point of the breadcrumb navigation as "My Exclusive Blog".

  2. Control the display of the current page title (titleParameter)Another commonly used feature is to control whether the current page title is displayed at the end of the breadcrumb. AnQiCMS defaults to displaying the full title of the current page.

    • title=true：Display the full title of the current page (this is the default behavior and usually no explicit setting is required).
    • title=false: Do not display the title of the current page.
    • title="自定义文字"：Display the custom text you specify as the name of the current page instead of the actual title.

    For example, if you do not want to display the article title in the breadcrumbs of the article detail page, you can set it like this:

    <nav class="breadcrumb-nav">
    <ol class="breadcrumb">
        {% breadcrumb crumbs with title=false %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {% if forloop.Last %}
                        {{item.Name}}
                    {% else %}
                        <a href="{{item.Link}}">{{item.Name}}</a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

  3. Multi-site support (siteIdParameter)For users managing multiple sites,siteIdThe parameter allows you to specify from which site to retrieve the breadcrumb data.通常，如果您没有多站点需求或只在当前站点调用，这个参数无需设置，系统会自动识别当前站点的上下文。

    For example, to get the breadcrumb path of the site with ID 2:

    {% breadcrumb crumbs with siteId="2" %}

    This parameter is mainly used for advanced scenarios of cross-site data calls, and you usually do not need to use it.

Integrate breadcrumbs into the template **practice**

To maintain the cleanliness and reusability of template code, we usually keep the breadcrumb navigation code in a separate public segment file, for examplepartial/breadcrumb.html.

Firstly, in your template theme directory.partialcreate a file namedbreadcrumb.htmlThe file, and paste the breadcrumb code mentioned above.

Then, in your.base.htmlor any other page template where you need to display breadcrumbs.includeTranslate the content of the JSON array from [auto] to [English], and return the result in the strict format of the original JSON array.

{# 您的页面顶部内容 #}

{% include "partial/breadcrumb.html" %}

{# 您的页面主体内容 #}

This way, no matter which page is accessed, as long as this segment is included, the corresponding breadcrumb navigation will be automatically displayed. Of course, in order to make the breadcrumb navigation look nice on the front-end, you also need to add the corresponding CSS styles, which usually involves adjusting the font size, color, spacing, and how to use separators (such as>or/）to distinguish between the various parts of the path.

AnQiCMSbreadcrumbLabels provide a very convenient way to integrate clear, feature-rich breadcrumb navigation into your website.Whether it is to enhance user experience, optimize website structure, or better support SEO, this feature can help your website reach new heights.

Common Questions (FAQ)

1. Why is my breadcrumb navigation path incorrect or not displayed in full?

This usually has to do with the configuration of your website's pseudo-static rules.Please check the "Static Rules" setting under "Function Management" in the AnQiCMS backend, and ensure that the URL rules for modules such as documents, categories, and single pages are correctly configured and effective.Incorrect rewrite rules may cause AnQiCMS to fail to correctly parse the complete hierarchy of the current page, thereby affecting the generation of breadcrumbs.

2. I want to add a custom separator between each item in the breadcrumb path (for example>)，how should I do it?

You can check if the content is empty byforCheck if the current item is the last one in the loop to add a separator.