When building a website, breadcrumb navigation not only effectively improves user experience and helps visitors understand their current location, but is also an indispensable part of search engine optimization (SEO) because it clearly displays the hierarchical structure of the website.For websites that use AnQiCMS to manage content, it is an important task in template creation to flexibly set the display logic and hierarchy of breadcrumb navigation.
AnQiCMS provides a powerful and easy-to-use template tag for handling breadcrumb navigation, allowing you to easily implement it in the frontend template without writing complex backend logic. This core tag isbreadcrumb.
Get to know the breadcrumb navigation label of AnQiCMS
In AnQiCMS template system, you can go through{% breadcrumb %}Labels to generate breadcrumb navigation. This label can intelligently identify the type of the current page (whether it is an article detail page, category list page, single page, or label page), and automatically build a complete navigation path.It returns an array object containing navigation links and names, which we usually callcrumbs.
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 block,{% breadcrumb crumbs %}The breadcrumb data will be generated and assigned tocrumbsthe variable. Next, we use{% for item in crumbs %}loop through the arrayitem.Linkthe link address representing each navigation item,item.NameIt represents the displayed name. In this way, AnQiCMS will automatically present the complete path from the homepage to the current page.
To maintain consistency of breadcrumb navigation throughout the website, we usually place this code in a common template file (such aspartial/breadcrumb.html), and then pass it through in each page template.{% include "partial/breadcrumb.html" %}to refer to it.
Customize the breadcrumb navigation display logic and hierarchy
AnQiCMS'breadcrumbThe tag is not only intelligent but also provides several parameters, allowing you to refine 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.
On some pages, especially on article detail pages or product detail pages, the main title of the page (usually<h1>Label may already be sufficiently prominent, at this point the last item in the breadcrumb navigation (i.e., the current page title) may seem redundant.titleParameters can help you control this.
title=true(default):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 information redundancy.title="自定义名称":Display the current page title as custom text. For example, on the article detail page, it should be unified 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>
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. Understand the level structure automatically built by AnQiCMS
AnQiCMS'breadcrumbTags are powerful because they can automatically infer the hierarchical relationship based on the current URL and content data.
- Home: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 category.
- Article/Product Details Page:Navigation will display "Home" -> "Category" -> "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 call{% breadcrumb crumbs %}Tags, 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 based on these data.
Some suggestions in practice.
- Keep it concise:Breadcrumb navigation should be as concise as possible, only containing key level information. Avoid adding too many unnecessary elements or complex styles.
- Semantic HTML:Recommended to use ordered lists
<ol>and list item<li>To build breadcrumbs navigation, which helps improve the accessibility and SEO friendliness of the website. For example:
It also uses an additional:<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>forloop.LastTo determine if it is the last navigation item, so that it can be specially handled (for example, do not add a link, or addactiveclass to highlight). - Uniform style:No matter which display logic you choose, it should be consistent throughout the website to avoid confusing the user.
Provided by AnQiCMSbreadcrumbThe 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.
Frequently Asked Questions (FAQ)
Ask: Why isn't the parent category displayed in the breadcrumb navigation of my article detail page, only the home page and article title?Answer: This is usually because the article has not been correctly associated with a category in the background, or the category itself has not been set up with the parent relationship properly.Please check if your article has selected the correct category, and ensure that this category and its parent categories have been correctly created and configured in the "Content Management" -> "Document Categories" level.AnQiCMS breadcrumbs will automatically generate paths based on the actual classification level of the content.
Ask: Can I insert some custom static links in the breadcrumb navigation instead of being completely generated by AnQiCMS?Answer: AnQiCMS'
breadcrumbThe label is dynamically generated for the current page path, and it does not directly support inserting static links in the generated results. If you have such a need, you may need to call{% breadcrumb %}the label, docrumbsArray performs front-end JavaScript operations, or manually assembles some static links in templates, such as in{% for item in crumbs %}Add custom before or after the loop<li>elements. However, for most standard hierarchical structures,breadcrumbthe automatic generation feature of tags is sufficient.Ask: How will the breadcrumb navigation adapt in a multi-site or multi-language AnQiCMS website?Answer: AnQiCMS itself supports multi-site and multi-language management. When your site is configured with multi-language content,
breadcrumbThe label will be based on