Elegantly configure breadcrumb navigation in AnQiCMS: Enhance user experience and SEO performance
When you visit a website, breadcrumb navigation acts like a helpful guide, clearly indicating the current page's position in the website structure.From the homepage all the way to the page you are browsing, it not only helps users quickly understand the website hierarchy but also makes it convenient for them to navigate back to the parent page.For the website's search engine optimization (SEO), a reasonable breadcrumb navigation can also help search engines better understand the website structure, thereby possibly bringing better crawling and ranking effects.
AnQiCMS as a system focusing on enterprise content management, fully understands the importance of breadcrumb navigation, and therefore built-in very convenient and intelligent tags to help us easily achieve this function.
The core of breadcrumb navigation:breadcrumbtags
The key to displaying breadcrumb navigation in AnQiCMS is to usebreadcrumbTemplate tag.This label is designed to be very intelligent, it will automatically build a complete navigation path based on the current page type you are on (whether it is an article detail page, a category list page, or any other page), and you do not need to manually obtain the parent category or parent page.
This label is usually used in conjunction with a variable to receive navigation path data, for example, we can define it like this:
{% breadcrumb crumbs %}
{# 接着在这里使用 crumbs 变量来循环输出导航路径 #}
{% endbreadcrumb %}
Here,crumbsis a list containing multiple navigation items. Each navigation item has its own name (Name) and the corresponding link address (Link), making it convenient for us to display them using a loop.
Parameter details, making navigation more thoughtful
To make the breadcrumb navigation more in line with our website design and content strategy,breadcrumbThe tags provide some practical parameters for us to adjust:
indexEnglish: Custom home page nameBy default, the first link of the breadcrumb navigation will display as “Home”. But if you want it to display as another name, such as “My Website Homepage” or your brand name, you can useindexParameter is set. For example：{% breadcrumb crumbs with index="我的网站主页" %}title: Controls the display of the page titleOn the article detail page or single page, the last link of the breadcrumb navigation usually displays the title of the current page.titleThe parameter allows you to flexibly control this:title=true(Default value): It will display the full title of the current page as the last item in the breadcrumb.title=falseIf so, the title of the current page will not be displayed, and the breadcrumb will end at the parent page or category.title="文章详情"：You can also pass a custom string to display the text you specify instead of the actual page title. For example：{% breadcrumb crumbs with index="首页" title="阅读详情" %}
siteId：Data call in multi-site scenariosIf you are using the multi-site management feature of AnQiCMS and need to call data from other sites to display breadcrumbs,siteIdThe parameter is specified. However, in most single-site scenarios, this parameter usually does not need to be manually set.
Practice makes perfect: Applying breadcrumb navigation in the template
UnderstoodbreadcrumbAfter the label and its parameters, let's see how to apply it in the template in practice. Usually, we would place the breadcrumb navigation in the top area of the website, such as below the main navigation bar.
This is a standard example code that demonstrates how to correctly display breadcrumb navigation in HTML structure:
<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>
In this code block:
- We use
<nav>and<ul>The label provides a structure for breadcrumb navigation. {% breadcrumb crumbs with index="主页" title=true %}Called the breadcrumb tag and stored the generated path incrumbsthe variable. At the same time, we specify the home page to display as "Home" and the current page title will be displayed on the detail page.{% for item in crumbs %}to iteratecrumbseach navigation item in the array.<li><a href="{{ item.Link }}">{{ item.Name }}</a></li>Then a list item and a clickable link were created for each navigation item,item.LinkIs the navigation URL,item.NameIs the display text.
Place the breadcrumb navigation:**Practice
In order to maintain code cleanliness and reusability, I suggest you store the breadcrumb navigation code snippet in a separate public template file, for examplepartial/breadcrumb.html.
Then, in your main website template file (likebase.html, or any other page template that needs to display breadcrumbs), throughincludelabel reference it:
{# 在你的主模板文件（如 base.html）中，选择合适的位置插入 #}
<header>
{# ... 其他头部内容，如网站Logo、主导航等 ... #}
{% include "partial/breadcrumb.html" %}
</header>
The benefit of doing this is that, no matter how many pages on your website need breadcrumb navigation, you only need to modify the code once, which can take effect across the entire site and greatly improve development and maintenance efficiency.partial/breadcrumb.htmlBy modifying the code once in this section, it can take effect across the entire site and greatly improve development and maintenance efficiency.
Some practical tips
- Style CustomizationThe default style of breadcrumb navigation may be quite simple, you can beautify it with CSS. For example, you can define
.breadcrumb-nav ul liand.breadcrumb-nav ul li aThe style, to change the font, color, size, and how to display separators (usually with::afterpseudo-element creation). - tests for different page typesEnsure testing on various types of pages after configuring the breadcrumb navigation, including the homepage, article list page, article detail page, product detail page, and single-page, to ensure correct and elegant display on all pages.
- Static pages and URL：AnQiCMS provides a comprehensive pseudo-static rule management feature, which can generate SEO-friendly URLs.Breadcrumbs navigation will automatically adapt these URL structures. Please make sure that your website's pseudo-static settings are correct to ensure the effectiveness of the breadcrumbs link.
By following these steps, you can correctly and efficiently display the breadcrumb navigation path on the website pages built with AnQiCMS. This not only optimizes the user experience but also plays a vital role in improving the website's SEO performance.
Common Questions (FAQ)
Q1: My breadcrumb navigation is not displayed, what should I do?
A1:Firstly, please check if your template file uses{% breadcrumb crumbs %}tags correctly, and wraps{% for item in crumbs %}Loop to output content. Next, confirm whether you are using the page template through{% include "partial/breadcrumb.html" %}etc. introduced fragments containing breadcrumb code. Finally, try to clear the system cache of AnQiCMS, sometimes outdated cache can cause the page content to be displayed in time.
Q2: How to modify the style of the separator between breadcrumb navigation paths?
A2:AnQiCMSbreadcrumbThe label is responsible for generating navigation path data, the style of separators usually needs to be controlled through CSS. You can add pseudo-elements to breadcrumbs in the CSS file.<li>Add pseudo-elements to elements::afterDefine a delimiter, for example:
.breadcrumb-nav ul li::after {
content: " > "; /* 或者其他你喜欢的分隔符，如 "/" */
margin: 0 5px;
color: #999;
}
.breadcrumb-nav ul li:last-child::after {
content: none; /* 最后一项后面不需要分隔符 */
}
Q3: Why are breadcrumbs not displayed on my homepage or some root-level pages?
A3:The homepage is usually the starting point of a website, without a "parenttitle=falseThe setting that does not display the current page name.This is a logical design, not an error.If you really need to display more information on these pages, you can check the content model and category settings of the pages to ensure they have a clear hierarchy.