In modern web design, breadcrumb navigation has become a standard element to enhance user experience and website usability.It acts as a guide for users to navigate forward, clearly showing the user's current position in the website's hierarchy structure and providing an easy way to return to the previous page.For websites built with AnQiCMS, integrating breadcrumb navigation can not only greatly facilitate visitors but also play a positive role in search engine optimization (SEO).

Why is breadcrumb navigation so important?

Imagine that the user has browsed multiple pages on your website, delving into a product detail page or a subcategory of an article.If there is no breadcrumb navigation, they may easily feel lost, not knowing how to return to the previous level of classification or the homepage, which will greatly increase the user's bounce rate.Breadcrumb navigation provides a direct hierarchical path to help users quickly locate their position, reduce cognitive load, and conveniently navigate between levels.

From an SEO perspective, breadcrumb navigation is also invaluable.It effectively communicates the hierarchical structure of the website to search engines by creating a series of internal links.This not only helps search engine spiders better crawl and understand your website content, but also passes page authority from the homepage or other high-authority pages to deep pages, thereby improving the overall SEO performance and keyword rankings of the website.

Breadcrumbs navigation tag in AnQiCMS

AnQiCMS Fully understands the importance of breadcrumb navigation, and built-in powerful and easy-to-use template tags to help you implement this feature. This core tag is{% breadcrumb %}It can intelligently generate the corresponding navigation path based on the type of the page the user is currently visiting (whether it is an article detail page, a category list page, or any other page).

Use{% breadcrumb %}The label is very direct. Usually, you would wrap it in aforIn a loop, because breadcrumb navigation is a list of links. AnQiCMS will take the generated path as an array (here we call itcrumbsVariables in the form of an array are provided to the template, you can iterate over this array to build the HTML structure.

Basic usage is as follows:

{% breadcrumb crumbs %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
{% endbreadcrumb %}

In this code,crumbsis a series generated by{% breadcrumb %}The variable generated by the tag, which includes information about each navigation node. Inside the loop,item.LinkThe URL link of the node will be provided,item.Nameand it is the text name displayed to the user. With this structure, you can easily build semantic HTML breadcrumb navigation.

Flexible configuration of breadcrumb navigation display

AnQiCMS{% breadcrumb %}Tags also provide some parameters for you to adjust the display mode of breadcrumb navigation according to your actual needs:

  1. Customize the home page name (indexparameter)Breadcrumbs navigation usually starts from the homepage and is displayed as “Home” by default. If you wish to change it to a different name, such as “My Homepage” or your brand name, you can useindexParameter settings.

    {% breadcrumb crumbs with index="我的主页" %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
{% endbreadcrumb %}

  2. Control the display of the current page title (titleparameter)By default, the breadcrumb navigation of AnQiCMS will automatically display the title of the current page at the end of the path. You can control this behavior through parameters.titleparameters to control this behavior.

    • If you do not want to display the title of the current page, you can set it tofalse:title=false.
    • If you want to use a fixed text to replace the current page title, for example, to display 'Article Details' uniformly on the article detail page, you can directly pass a string:title="文章详情".

  3. Multiple site data callsiteIdparameter)For websites that use the AnQiCMS multi-site management feature, if you need to display the breadcrumb path of another site on a specific site,siteIdParameter specifies the ID of the target site.However, in most cases, especially when building the current site page, it is usually unnecessary to manually set this parameter, AnQiCMS will automatically recognize and generate the breadcrumbs for the current site.

**Practice: Modularize Breadcrumb Code

To maintain the cleanliness and high reusability of template code, it is recommended that you encapsulate the breadcrumb navigation code snippet into an independent template file. AnQiCMS encourages storing such code snippets inpartial/The directory. For example, you can create a file namedpartial/breadcrumb.htmland place the above breadcrumb code inside it.

template/您的模板目录/partial/breadcrumb.htmlFile content example:

{# 假设这个文件名为 partial/breadcrumb.html #}
<nav class="breadcrumb-nav">
    <ul>
        {% breadcrumb crumbs with index="网站首页" title=true %}
            {% for item in crumbs %}
                <li>
                    <a href="{{item.Link}}">{{item.Name}}</a>
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ul>
</nav>

Then, in your websitebase.htmlIn other breadcrumb display template files, throughincludereference it by tag:

{# 在您的主模板文件（例如 base.html）中引用 #}
<body>
    <header>...</header>
    
    <main>
        {% include "partial/breadcrumb.html" %} {# 在这里引用面包屑导航 #}
        
        <div class="content">
            <!-- 页面具体内容 -->
        </div>
    </main>
    
    <footer>...</footer>
</body>

This way, no matter which page needs breadcrumb navigation, it can be easily integrated with a single line of code, and all the breadcrumb styles and logic are centralized in one place for management, greatly improving development efficiency and maintenance convenience.

Summary

Breadcrumbs navigation is a small but beautiful feature, which plays an important role in improving website usability, optimizing user experience, and enhancing SEO performance. With the built-in {% breadcrumb %}Tags and flexible parameter configuration, you can easily integrate this feature into your website, providing clear navigation guidance for your visitors, and also laying a solid SEO foundation for the long-term development of your website.

Common Questions (FAQ)

1. Breadcrumbs navigation is suitable for all page types?Breadcrumbs navigation is most suitable for pages with a clear hierarchical structure, such as article detail pages, product detail pages, category list pages, etc.For some flat or functional pages, such as Contact Us, search results pages, etc., their function may not be significant, and sometimes they can be omitted for simplicity.{% breadcrumb %}The label will be intelligently generated based on the context of the current page, but you can also optionally choose not to include it in some page templates as needed.

2. How to change the breadcrumb navigation style?The style of breadcrumb navigation is usually controlled by CSS. Since we recommend outputting it as semantic<ul><li><a>structure, you can change it by setting the<nav>/<ul>or<li>Add custom CSS class to element (e.g.,breadcrumb-nav), then write the corresponding CSS rules to beautify its appearance, including font, color, spacing, separator styles, etc.

3. How are the separators in the breadcrumb navigation (such as “>“) generated? Can they be customized?AnQiCMS{% breadcrumb %}The label itself is responsible for providing the name and link of each navigation node, and the style of separators is usually implemented in the HTML and CSS you write. For example, you can in<li>Elements using CSS::afterpseudo-elements to add separators, or inforthe loop to manually add separators (e.g.{{item.Name}} &gt;），但这会增加代码的复杂性。推荐使用CSS pseudo-element来实现，这样更灵活且易于维护。