AnQiCMS provides a powerful and easy-to-use template tag to handle breadcrumb navigation, allowing you to easily implement it in the front-end template without writing complex backend logic. This core tag isbreadcrumb.

Understand the breadcrumb navigation tags of AnQiCMS

In the AnQiCMS template system, you can{% breadcrumb %}Create breadcrumbs navigation with labels.This label can intelligently recognize the type of the current page (whether it is an article detail page, category list page, single page, or tag page) and automatically build a complete navigation path.crumbs.

The most basic usage is like this:

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

In this code,{% breadcrumb crumbs %}The breadcrumb data will be generated and assigned tocrumbsVariable. Then, we use{% for item in crumbs %}to iterate over this array,item.Linkrepresent the link address of each navigation item,item.NameThis indicates the displayed name. In this way, AnQiCMS will automatically present the complete path from the homepage to the current page for you.

To maintain consistency of breadcrumb navigation throughout the entire website, we usually place this code in a public template file (for example)partial/breadcrumb.html), and then through each page template{% include "partial/breadcrumb.html" %}.

Customize the display logic and hierarchy of breadcrumb navigation

AnQiCMSbreadcrumbTags are not only smart but also provide several parameters, allowing you to fine-tune the display logic according to your actual needs.

1. Adjust the display name of the home page

By default, the first link of the breadcrumb navigation is “Home”. If you want to change this name, you can useindexParameters. For example, change it to "My Blog":

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

2. Control the display of the current page title

In some pages, especially in article detail pages or product detail pages, the main title of the page (usually<h1>The label may already be sufficiently prominent, at this point, the last item of the breadcrumb navigation (i.e., the title of the current page) may seem redundant.titleThe parameter can help you control this.

  • title=true(Default Value):Display the full current page title.
  • title=false:Do not display the current page title. This is very useful when the H1 title of the page is already clear, as it can avoid redundancy of information.
  • title="自定义名称":Display the current page title as custom text. For example, on article detail pages, it is unifiedly displayed as “Article Detail”.

Here is an example of not displaying the article title on the detail page:

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

And if you want to display the unified text 'Article Details' at the end of all article detail pages, you can set it like this:

<div>
    {% breadcrumb crumbs with title="文章详情" %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</div>

3. Understanding the Hierarchical Structure of AnQiCMS Automatically Built

AnQiCMSbreadcrumbThe label is powerful because it can automatically deduce the hierarchy based on the current URL and content data.

  • Home:The navigation only has one item, 'Home'.
  • Category list page:Navigation will automatically display "Home" -> "Parent Category (if any)" -> "Current Category". AnQiCMS will trace up to the top-level category.
  • Article/Product Details Page:Navigation will show "Home" -u003e "Category" -u003e "Article/Product Title".If the category of the article has multiple levels, AnQiCMS will also automatically build the complete category path.
  • Single Page:Navigation is usually “Home” -> “Current Single Page Title”.
  • Tag Page:Navigation will display “Home” -> “Tag List” (or other related pages) -> “Current Tag Name”.

This means that you usually just need to simply call{% breadcrumb crumbs %}Label, AnQiCMS will intelligently handle most of the hierarchical construction work. The flexibility of the system is reflected in the content model, categories, and the association of documents.breadcrumbThe label is dynamically generated for navigation based on these data.

Some suggestions in practice

  • Keep it simple:The breadcrumb navigation should be as concise as possible, only containing key hierarchical information. Avoid adding too many unnecessary elements or complex styles.
  • Semantic HTML: It is recommended to use ordered lists.<ol>and list items<li>To build breadcrumb navigation, which helps improve the accessibility and SEO-friendliness of the website. For example:
    
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb crumbs with index="首页" title=true %}
        {% for item in crumbs %}
            <li class="breadcrumb-item{% if forloop.Last %} active{% endif %}">
                {% if forloop.Last %}
                    {{item.Name}}
                {% else %}
                    <a href="{{item.Link}}">{{item.Name}}</a>
                {% endif %}
            </li>
        {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>
    Here, an additional usage has been applied.forloop.LastTo determine whether it is the last navigation item, so that it can be specially handled (for example, not adding a link, or addingactivea class to highlight).
  • Unified style:No matter which display logic you choose, it should be consistent throughout the entire website to avoid confusing the user.

Through the services provided by AnQiCMS,breadcrumbThe label and its parameters, you can easily and efficiently set up and manage the display logic and hierarchy of breadcrumb navigation in website templates, thus providing your visitors with a clear navigation path and optimizing the overall structure of the website.

Common Questions and Answers (FAQ)

  1. 问：Why is the breadcrumb navigation not displaying the parent category but only the homepage and article title on my article detail page?Answer: This is usually because the article in the background is not correctly associated with the category, or the category itself is not properly set up with parent relationships.Please check if you have selected the category for your article, and ensure that the category and its parent categories have been correctly created and configured in the "Content Management" -> "Document Categories".AnQiCMS's breadcrumb tags will automatically generate paths based on the actual classification level of the content.

  2. 问：我能否在面包屑导航中插入一些自定义的静态链接，而不是完全由AnQiCMS自动生成？Answer: AnQiCMS'sbreadcrumbThe tag is dynamically generated based on the current page path and does not directly support inserting static links in the generated results. If you have such a need, you may need to call{% breadcrumb %}After the tag,crumbsPerform front-end JavaScript operations on the array, or manually concatenate some static links in templates, for example,{% for item in crumbs %}Add custom ones before or after the loop<li>Elements. However, for most standard hierarchical structures,breadcrumbthe automatic generation feature of tags is sufficient.

  3. 问：In a multi-site or multi-language AnQiCMS website, how will the breadcrumb navigation adapt?答：AnQiCMS itself supports multi-site and multi-language management. When your site is configured with multi-language content,breadcrumbTags will be based on