In website operation, clear navigation is the key to improving user experience.When visitors delve into the inner pages of a website, a well-designed, easy-to-understand breadcrumb navigation (Breadcrumb Navigation) can effectively help them understand their current location and provide a quick way to return to the upper-level page.This not only makes the website structure clear at a glance, but also helps search engines better understand the website hierarchy, indirectly optimizing SEO.

AutoCMS (AutoCMS) fully understands the importance of navigation and built-in very practical breadcrumb navigation feature.It makes creating and displaying breadcrumbs simple and intuitive, without the need for complex secondary development.

Understanding the breadcrumb navigation feature in AnQi CMS

AnQiCMS provides dedicated template tags for generating breadcrumb navigation.This means, you only need to call a tag in the template file, and the system will automatically generate a complete navigation path based on the current page's URL path and content hierarchy.This path usually starts with "Home" and gradually lists all the parent categories or pages, ultimately pointing to the current page.

How to create and display breadcrumb navigation in the template

To display breadcrumb navigation in AnQiCMS, we mainly use a template tag namedbreadcrumb.

English, you would typically place this code in the public header of the website (for example,partial/header.htmlorbash.html）or you want to display in any specific breadcrumb page template. This way, it can be uniformly displayed on all pages that need to show breadcrumbs.

Core tag usage method

The most basic usage is like this:

{% breadcrumb crumbs %}
    <nav class="breadcrumb-nav">
        <ul>
            {% for item in crumbs %}
                <li>
                    {% if not forloop.Last %}
                        <a href="{{ item.Link }}">{{ item.Name }}</a>
                        <span class="separator">/</span>
                    {% else %}
                        <span>{{ item.Name }}</span>
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    </nav>
{% endbreadcrumb %}

In this code block:

  • {% breadcrumb crumbs %}It is a tag for calling the breadcrumb function, which will store the generated navigation path data incrumbsthis variable.
  • crumbsIt is an array containing multiple navigation items, each representing a link in the path.
  • {% for item in crumbs %}to iteratecrumbseach navigation item in the array.
  • item.LinkGet the link address of the current navigation item.
  • item.NameGet the display name of the current navigation item.
  • forloop.Lastis a built-in loop variable used to determine if the current loop is the last element. This is useful for handling delimiters (such as/or>）Very useful, we usually do not want to display a separator after the last navigation item.
  • separatoris a class we customized, you can use CSS to beautify the style of the separator.

Customized Parameter Details

breadcrumbTags also provide some parameters that allow you to make more flexible settings according to your needs:

  • index: Used to customize the display text of 'Home' in the breadcrumb navigation.

    • The default value is"首页".
    • If you want to display other text, such as"我的博客"you can set it like this:{% breadcrumb crumbs with index="我的博客" %}.

  • title: Control whether to display the current page title at the end of the breadcrumb, or customize the display text of the current page.

    • The default value istrue，represents displaying the full title of the current page.
    • If you set it tofalse，the last navigation item in the breadcrumb will not display the title of the current page.
    • You can also pass a string directly, for exampletitle="文章详情"Then the last navigation item will be displayed as the string you define.

  • siteId: This parameter is used in multi-site management scenarios.

    • If you manage multiple sites and need to call the breadcrumb data for a specific site,siteId="站点ID"Specify it.
    • For most single-site users, it is usually not necessary to set this parameter.

An example with custom parameters

Suppose you want to change the home page text to "Website Home" and the current page name to "Details Content":

{% breadcrumb crumbs with index="网站主页" title="详情内容" %}
    <nav class="breadcrumb-nav">
        <ul>
            {% for item in crumbs %}
                <li>
                    {% if not forloop.Last %}
                        <a href="{{ item.Link }}">{{ item.Name }}</a>
                        <span class="separator"> > </span>
                    {% else %}
                        <span>{{ item.Name }}</span>
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    </nav>
{% endbreadcrumb %}

Deployment and Style Optimization

In AnQiCMS, template files are usually stored in/templatedirectory, and it is encouraged to place common code fragments (such as breadcrumbs) inpartial/directory. So, you can create apartial/breadcrumb.htmlFile, put the above breadcrumb navigation code into it.

Then, in yourbash.html(or any page template you want to display breadcrumbs in), use{% include "partial/breadcrumb.html" %}Label it to refer to it. This can keep the code tidy and maintainable.

Style optimization:The visual effect of the breadcrumb navigation completely depends on your CSS style. By adjusting.breadcrumb-nav/ul/li/aand.separatorStyles for elements like this, you can implement various design styles. For example:

  • Color and font: Coordinate the text color with the overall style of the website.
  • Separator: You can use//>Separate with arrow icons even CSS pseudo-elements.
  • Spacing and paddingEnsure there is enough visual space between each navigation item to improve readability.
  • Responsive DesignConsider how to display breadcrumbs on small screen devices, such as by omitting the middle part or reducing the font size.

By following these simple steps, you can easily create and display a feature-rich, visually appealing breadcrumb navigation on the AnQiCMS website, thereby greatly enhancing the navigation experience and structural visibility of the website.

Common Questions (FAQ)

1. Bread crumb navigation will be automatically generated, or do we need to manually configure it for each page?AnQiCMS's breadcrumb navigation is automatically generated. As long as you have correctly called it in the template.{% breadcrumb %}The system will automatically build a complete navigation path based on the current page's URL path and its hierarchical relationship in content management (for example, the category of the article or the parent-child relationship of a single page).You do not need to manually configure each page separately.

2. I want to modify the display text of the "Home" in the breadcrumb navigation, how should I operate?To modify the display text of the "Home" in the breadcrumb navigation, you can{% breadcrumb %}the label useindexParameters. For example, if you want to display 'Home Page' as 'Website Homepage', you can write it like this: {% breadcrumb crumbs with index="网站主页" %}.

3. If my website's page hierarchy is very deep, will the breadcrumb navigation become too long and affect the aesthetics?Breadcrumbs navigation truly reflects the hierarchical structure of the website, and if the hierarchy is deep, the navigation chain will become longer accordingly. On the tag level of AnQiCMS, you can settitle=falseSimplify the current page title (if it makes the breadcrumb too long). You can optimize it with frontend styles, such as:

  • Set smaller font size or line height for long breadcrumbs.
  • Hide some middle levels on mobile devices and only show the key path (such as “Home > … > Current Page”).
  • or set text overflow hidden and display an ellipsis in CSS, while retaining the full link for clicking.