On a day when the content of websites becomes 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 (Breadcrumb Navigation) has emerged.It's like a path indicator on a map, making it clear for users to know 'Where I came from and where I'm going'.

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

The basic method for generating breadcrumb navigation

In the AnQiCMS template, generating breadcrumb navigation is very intuitive. You can usebreadcrumbTag to get the complete path information of the current page. It is usually used withforLoop to iterate over 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 block,{% breadcrumb crumbs %}and{% endbreadcrumb %}It encapsulates the logic to generate breadcrumbs.crumbsis an array object representing all levels from the homepage to the current page. We traverse this array,{% for item in crumbs %}traverse this array,item.NameIndicates the display name of each level (such as "Home", "Product Center", "Some Product Name"),item.LinkRepresents the corresponding link address of the level. Through judgmentforloop.LastCan distinguish whether the current page is the last item in the breadcrumb path, thereby giving it different styles or behaviors (such as the last item being non-clickable plain text).

Flexibly configure the breadcrumb navigation parameters

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

  1. titleParameter: Control the display of the end title titleParameter used to control the display style of the last item in the breadcrumb navigation (usually the title of the current page)

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

  2. indexParameter: Customize the home page nameThe starting point of breadcrumb navigation is usually "Home", but sometimes you may want to display it as a custom name like "My Blog", "Company Website", etc.indexThe parameter can meet this need.

    • For example, useindex="我的博客"You can change the starting item of the breadcrumb from the default "Home" to "My Blog".

  3. siteIdParameter: Data call in multi-site environmentFor users who use the AnQiCMS multi-site management feature,siteIdthe parameter allows you to specify from which site to obtain the breadcrumb data.

    • In most cases, if you are running a single site or want the breadcrumbs to reflect the current site path, you do not need to fill in this parameter. It will automatically retrieve the path information of the current site.

Example of a comprehensive: Building a diverse breadcrumb navigation

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

Assuming we want:

  • The homepage should display as "My Homepage".
  • On the article detail page, the last breadcrumb item is unifiedly displayed as
  • Other category pages display the category name 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>

By such settings, AnQiCMS will intelligently generate breadcrumb paths based on the current page type, display "Details content" uniformly at the end of the article detail page, and show "My homepage" on the homepage.

Some suggestions in practice.

In the process of template creation, in order to improve code reusability and maintainability, we usually store the breadcrumb navigation code snippet separately inpartialin the directory, for examplepartial/breadcrumb.html. Then, through the page where breadcrumbs need to be displayed,{% include "partial/breadcrumb.html" %}to refer to. In this way, when the logic or style of breadcrumbs needs to be adjusted, it is only necessary to modify one file.

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

Frequently Asked Questions (FAQ)

Q1: Why is the last item of the breadcrumb navigation on my article detail page not displaying the article title, but other text or not displaying at all?A1: This is likely becausebreadcrumblabel'stitleThe parameter is set to a specific value orfalse. Please check the line in your template code{% breadcrumb crumbs %}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 the breadcrumb navigation?A2: You can change the display text of 'Home' by usingbreadcrumblabel'sindexparameters. For example, you can add to the tag.index="我的主页"orindex="网站首页"You can replace the default 'Home' with the text you specify.

Q3: The style of the breadcrumb navigation does not look very beautiful, does AnQiCMS provide style settings?A3: AnQiCMS'breadcrumbThe tag is mainly responsible for generating the breadcrumb navigation data structure (i.e., path names and links), and outputs it as an HTML skeleton.As for aesthetic style, it usually belongs to the design scope of front-end (CSS).You need to be in the CSS file of the website, targeting the HTML elements of the breadcrumb navigation (such as<ol class="breadcrumb">and<li class="breadcrumb-item">Write the corresponding style rules to achieve the expected visual effects. You can put the breadcrumb code snippet inpartial/the directory for easy management of styles and structure.