How to create and display breadcrumb navigation to enhance user experience and page structure visibility?

In website operation, clear navigation is the key to improving user experience.When visitors delve into the internal pages of a website, a well-designed and 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 makes the website structure clear at a glance and also helps search engines better understand the website hierarchy, indirectly optimizing SEO.

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

Get to know the breadcrumb navigation feature in AnQi CMS

AnQiCMS provides dedicated template tags to generate breadcrumb navigation.This means that you just 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 level.This path usually starts with 'Home', gradually listing all parent categories or pages, and finally 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 name calledbreadcrumbThe template tag.

As a rule, you would place this code in the public header of the website (for examplepartial/header.htmlorbash.htmlOr the specific breadcrumb page template you want to display. 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 %}This is a label for calling the breadcrumb feature, it will store the generated navigation path data incrumbsthis variable.
• crumbsIs an array containing multiple navigation items, each representing a link in the path.
• {% for item in crumbs %}Loop throughcrumbsEach 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.LastIt is a built-in loop variable used to determine if the current loop is the last element. This is helpful for handling delimiters such as/or>)Very useful, usually we do not want to display a separator after the last navigation item.
• separatorIt is a class we customize, you can use CSS to beautify the style of the separator.

Customized parameter details

breadcrumbTags also provide some parameters to allow you to set up more flexibly 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: Controls 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 istrueIndicates that the full title of the current page is displayed.
  • If you set it tofalseThe last navigation item of 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, you cansiteId="站点ID"specify.
  • 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 Page" 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/templatethe directory, and it is encouraged to place common code snippets (such as breadcrumbs) inpartial/the directory. So, you can create apartial/breadcrumb.htmlFile, put the above breadcrumb navigation code in it.

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

Style optimization: The visual effect of breadcrumb navigation depends entirely on your CSS style. By adjusting.breadcrumb-nav/ul/li/aand.separatorStyle of elements, 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//>Arrows, icon even CSS pseudo-elements as separators.
• 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 user's navigation experience and the structural visibility of the website.

Frequently Asked Questions (FAQ)

1. Will breadcrumb navigation 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 %}Labels, the system will automatically build a complete navigation path based on the current page 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.

2. How do I modify the display text of the "Home" in the breadcrumb navigation?You can modify the display text of the "Home" in the breadcrumb navigation by{% breadcrumb %}Used in tagsindexParameters. 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 indeed faithfully reflects the hierarchical structure of the website, if the level is deep, the navigation chain will become longer accordingly. At the tag level of AnQiCMS, you can settitle=falseOmit the title of the current page (if it makes the breadcrumb too long). You can optimize it in front-end style, for example:

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