Today, with the content of websites becoming increasingly rich, users often need to navigate between different pages on the website.To help visitors understand their current location and provide a convenient return path, Breadcrumb Navigation has emerged.It is like a path indicator on a map, making it clear for users to know where they came from and where they are going.

AnQiCMS Deeply understands the importance of breadcrumb navigation for user experience and website structure, and therefore has built-in special tags in the template.breadcrumbTags allow website developers and operators to easily generate dynamic and flexible breadcrumb navigation. Next, we will learn in detail how to use this convenient tag.

Generate breadcrumb navigation basics

In the AnQiCMS template, generating breadcrumb navigation is very intuitive. You can usebreadcrumbLabel to obtain the complete path information of the current page. It is usually used withforcombined with loops to traverse each link in the path.

For example, a basic breadcrumb navigation code snippet might look like this:

<div>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            {% breadcrumb crumbs %}
            {% for item in crumbs %}
                {% if forloop.Last %}
                    <li class="breadcrumb-item active" aria-current="page">{{item.Name}}</li>
                {% else %}
                    <li class="breadcrumb-item"><a href="{{item.Link}}">{{item.Name}}</a></li>
                {% endif %}
            {% endfor %}
            {% endbreadcrumb %}
        </ol>
    </nav>
</div>

In this code,{% breadcrumb crumbs %}and{% endbreadcrumb %}It wraps the logic for generating breadcrumbs.crumbsis an array object, representing all levels from the home page to the current page. We traverse this array,{% for item in crumbs %}to traverse this array,item.NameRepresents the display name of each level (such as “Home page”, “Product Center”, “Some Product Name” ),item.Linkthen represents the corresponding link address of the level. By judgingforloop.LastCan distinguish whether the current page is the last item in the breadcrumb path, thus assigning it different styles or behaviors (such as the last item is usually not clickable plain text).

Flexible configuration of breadcrumb navigation parameters

breadcrumbTags are not only simple to use, but also provide several practical parameters to help you customize according to the specific needs of the website.

  1. title参数：控制末尾标题的显示 title参数用于控制面包屑导航最后一项（通常是当前页面的标题）的显示方式。

    • When you settitle=trueWhen it is set to (This is the default value), the breadcrumb will display the full document or page title as the last item.
    • If you wish not to display the current page title, you can set it totitle=false.
    • Further, you can also settitleTo a custom string, for exampletitle="文章详情", so that the last item of the breadcrumb will be displayed with the text you specify, rather than the specific title of the page.

  2. indexParameter: Customize the name of the home pageThe starting point of breadcrumb navigation is usually “Home”, but sometimes you may want to display it as “My Blog”, “Company Website” and other custom names.indexThe parameter can meet this requirement.

    • For example, usingindex="我的博客"you can change the starting item of the breadcrumbs from the default “Home” to “My Blog”.

  3. siteIdParameters: Data calling in a multi-site environmentFor users who use the AnQiCMS multi-site management function,siteIdthe parameter allows you to specify which site to get the breadcrumb data from.

    • Most of the time, if you are running only one site or want the breadcrumbs to reflect the path of the current site, you do not need to fill in this parameter. It will automatically obtain the path information of the current site.

English: Comprehensive example: Building a diverse breadcrumb navigation.

After understanding the parameters, we can try to build a more flexible breadcrumb navigation.

Assuming we want:

  • The home page displays as 'My Homepage'.
  • In the article detail page, the last breadcrumb item is unified displayed as "Detail Content", rather than the specific article title.
  • Other category pages display the category names normally.
<div>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            {% breadcrumb crumbs with index="我的主页" title="详情内容" %}
            {% for item in crumbs %}
                {% if forloop.Last %}
                    <li class="breadcrumb-item active" aria-current="page">{{item.Name}}</li>
                {% else %}
                    <li class="breadcrumb-item"><a href="{{item.Link}}">{{item.Name}}</a></li>
                {% endif %}
            {% endfor %}
            {% endbreadcrumb %}
        </ol>
    </nav>
</div>

Through such settings, AnQiCMS will intelligently generate breadcrumb paths based on the current page type, and display 'Detail Content' at the end of the article detail page, while displaying 'My Homepage' on the homepage.

Some suggestions in practice

In the actual template creation, in order to improve code reusability and maintainability, we usually place the breadcrumb navigation code snippet separately inpartialin the directory, for examplepartial/breadcrumb.htmlThen on the pages where breadcrumbs need to be displayed, refer to{% include "partial/breadcrumb.html" %}. This way, when the logic or style of breadcrumbs needs to be adjusted, you only need to modify one file.

Breadcrumbs navigation not only helps improve user experience, from the perspective of SEO, it can also clearly show the website structure hierarchy to search engines, which is helpful to improve the crawling and ranking of the website. Through AnQiCMS'sbreadcrumbTags, you can easily implement a beautiful and practical breadcrumb navigation system.

Common Questions (FAQ)

Q1: Why is the article title not displayed in the last item of the breadcrumb navigation on my article detail page, but other text or not displayed instead?A1: This is likely because...breadcrumbTagstitleThe parameter has been set to a specific value orfalse. Please check the template code you are using{% breadcrumb crumbs %}on this line, if it containstitle="自定义文字"ortitle=falseit will override the default behavior of displaying the article title. To display the article title, you can removetitlethe parameter or set it totitle=true.

Q2: How to change the display text of 'Home' in breadcrumb navigation?A2: You can do this throughbreadcrumbTagsindexparameters to modify the display text of 'Home'. For example, add a tag inindex="我的主页"orindex="网站首页"即可将默认的“首页”替换为你指定的文字。

Q3: The style of the breadcrumb navigation looks not beautiful, does AnQiCMS provide style settings?A3: AnQiCMS'sbreadcrumbLabel is responsible for generating the data structure of breadcrumb navigation (i.e., path name and link), and outputs it as an HTML skeleton.As for aesthetics, this usually falls under the design scope of the frontend (CSS).<ol class="breadcrumb">and<li class="breadcrumb-item">Write the corresponding style rules to achieve the expected visual effect. You can place the breadcrumb code snippet inpartial/the directory for easy management of styles and structure.