In website operation, a clear navigation path is crucial for user experience.Breadcrumb Navigation is like a clue in real life, clearly showing the user's current position on the website, allowing them to quickly see where they are and return to a higher-level page.This not only helps users quickly understand the website structure and improve user experience, but it is also of great benefit to Search Engine Optimization (SEO), because it helps search engines better understand the hierarchical structure of the website.

AnQiCMS as a powerful content management system that focuses on user experience, built-in simple and easy-to-use template tags, allowing us to easily integrate breadcrumb navigation on 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 for us to loop through 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, extract the name of each path item (Name) and link (Link) and display it.

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

<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 %}：TraversecrumbsArray, 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.

By 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 hierarchy structure.

Customize your breadcrumb navigation

breadcrumbTags also provide some parameters that allow you to have more fine-grained control according to your actual needs.

  1. Customize the home page name (indexparameters)By default, the starting point of the breadcrumb navigation is displayed as "Home". If you want to change this text, for example, to display "My Blog", "Website Homepage", or other brand names, you can do so byindexParameters 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 (titleparameters)Another commonly used feature is to control whether the title of the current page is displayed at the end of the breadcrumb. AnQiCMS defaults to displaying the full title of the current page.

    • title=true: Show the full title of the current page (this is the default behavior, usually no explicit setting is required).
    • title=false: Do not display the title of the current page.
    • title="自定义文字": Display the custom text you specified 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 breadcrumb 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 (siteIdparameters)For users who operate multiple sites,siteIdThe parameter allows you to specify from which site to retrieve the breadcrumb data. Usually, if you do not have multi-site requirements or are only calling the current site, this parameter does not need to be set, the system will automatically recognize the context of the current site.

    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 is generally not needed in most cases.

Integrate breadcrumbs into the template practice**

In order to maintain the cleanliness and reusability of template code, we usually put the breadcrumb navigation code in a separate public segment file, such aspartial/breadcrumb.html.

First, in the directory under your template theme,partialcreate a file named,breadcrumb.htmland paste the breadcrumb code mentioned above into it.

Then, in yourbase.htmlOr use it in breadcrumbs of the page template whereincludethe tag is introduced:

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

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

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

This, no matter which page is visited, as long as this segment is included, it can automatically display the corresponding breadcrumb navigation. Of course, in order to make the breadcrumb navigation look beautiful on the front end, you 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 the various parts of the path.

AnQiCMS'breadcrumbTags provide a very convenient way to integrate clear and feature-rich breadcrumb navigation for your website.In order to enhance user experience, optimize website structure, or better support SEO, this feature can help your website reach new heights.

Frequently Asked Questions (FAQ)

1. Why is my breadcrumb navigation path incorrect or incomplete?

This usually relates to the static rule configuration of your website. Please check the "Function Management" under the AnQiCMS backend "Static Rule" settings to ensure that the URL rules for modules such as documents, categories, and single pages are configured correctly and are in effect.Incorrect static 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>), what should I do?

You can specify only the top-level categories by using theforIn the loop, determine whether the current item is the last one to add a separator.In the example code above, we have already used `{% if not forloop.Last %}`