How to correctly display the breadcrumb navigation path on a web page?

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 showing you the position of the current page in the site structure.From the homepage all the way to the page you are browsing, it not only helps users quickly understand the hierarchy of the website, but also makes it convenient for them to backtrack 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 is a system focused on enterprise content management, fully aware of the importance of breadcrumb navigation, therefore built-in very convenient and intelligent tags, helping us easily achieve this function.

The core of breadcrumb navigation:breadcrumbTag

The key to displaying breadcrumb navigation in AnQiCMS is to usebreadcrumbTemplate tag. This tag is designed to be very intelligent, it will automatically build a complete navigation path based on the type of page you are currently on (whether it is an article detail page, category list page, or other page), and you do not need to manually get the parent category or parent page.

This tag 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, crumbsIt is a list containing multiple navigation items. Each navigation item has its own name (Name) and its corresponding link address (Link), making it convenient for us to display them using a loop.

Parameter details, make navigation more intimate

In order to make the breadcrumb navigation conform to our website design and content strategy,breadcrumbTags provide some practical parameters for adjustment:

• indexCustom home page nameBy default, the first link of the breadcrumb navigation is displayed as "Home". But if you want it to display another name, such as "My Website Homepage" or your brand name, you can useindexSet the parameter. For example:{% breadcrumb crumbs with index="我的网站主页" %}

• title: Controls the display of the page titleIn the article detail page or single page, the last link of the breadcrumb navigation usually displays the title of the current page.titleParameters allow you to flexibly control this:

  • title=true(Default): It will display the full title of the current page as the last item in the breadcrumb.
  • title=falseIt will not display the title of the current page, 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, you cansiteIdParameter specification. However, in most single-site cases, this parameter usually does not require manual setting.

Practice makes perfect: applying breadcrumb navigation in the template.

UnderstoodbreadcrumbAfter the tag and its parameters, let's see how to apply it in the template. Usually, we would place the breadcrumb navigation at 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 an 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:

1. We use<nav>and<ul>The tag provides a structure for breadcrumb navigation.
2. {% 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 display the title of the current page on the detail page.
3. {% for item in crumbs %}Loop throughcrumbsEach navigation item in the array.
4. <li><a href="{{ item.Link }}">{{ item.Name }}</a></li>An item and a clickable link were created for each navigation item, among them.item.LinkIs the navigation URL,item.NameIs the displayed text.

Place breadcrumb navigation: **Practice

To maintain code cleanliness and reusability, I suggest you place the breadcrumb navigation code snippet in a separate public template file, such aspartial/breadcrumb.html.

Then, in your main website template file (such asbase.htmlor any other page template that needs to display breadcrumbs), throughincludereference it with the tag:

{# 在你的主模板文件（如 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 throughout the site and greatly improve development and maintenance efficiency.partial/breadcrumb.htmlBy modifying the code once in this way, it can take effect throughout the site, greatly improving development and maintenance efficiency.

Some practical tips

• Style customization: The default breadcrumb navigation style may be simple, you can beautify it with CSS. For example, you can define.breadcrumb-nav ul liand.breadcrumb-nav ul li aUse the style to change the font, color, size, and how separators are displayed (usually with::afterpseudo-elements to create.
• Test for different page typesAfter completing the configuration of the breadcrumb navigation, be sure to test on different types of pages, including the homepage, article list page, article detail page, product detail page, and single-page, etc., to ensure that it can be displayed correctly and elegantly on all pages.
• Static and URL: AnQiCMS provides a complete pseudostatic rule management function, capable of generating SEO-friendly URLs.Breadcrumb navigation will automatically adapt to these URL structures, please ensure that your website's pseudo-static settings are correct to ensure the validity of the breadcrumb links.

By following these steps, you can correctly and efficiently display the breadcrumb navigation path on the website page built with AnQiCMS, which not only optimizes the user experience but also plays an important role in improving the website's SEO performance.

Frequently Asked Questions (FAQ)

Q1: How do I fix the issue with my breadcrumb navigation not displaying? A1:First, please check if you have used the template file correctly{% breadcrumb crumbs %}tags and wrapped them properly{% for item in crumbs %}Translate the content in a loop. Next, confirm whether you are passing through the page template.{% include "partial/breadcrumb.html" %}A fragment containing breadcrumb code was introduced. Finally, try to clear the AnQiCMS system cache, as sometimes outdated cache can cause page content to not be displayed in time.

Q2: How to modify the style of the separator between breadcrumb navigation paths? A2:AnQiCMS'breadcrumbThe tag is responsible for generating navigation path data, the style of the separator usually needs to be controlled through CSS. You can add pseudo-elements for the breadcrumb in the CSS file.<li>element.::afterDefine a separator, for example:

.breadcrumb-nav ul li::after {
    content: " > "; /* 或者其他你喜欢的分隔符，如 "/" */
    margin: 0 5px;
    color: #999;
}
.breadcrumb-nav ul li:last-child::after {
    content: none; /* 最后一项后面不需要分隔符 */
}

Q3: Why doesn't the breadcrumb navigation display on my homepage or some root-level pages? A3:The homepage is usually the starting point of a website, without an "upper" path to trace back, so it is often not displayed in standard practice. For some single pages directly under the website root directory without an explicit parent category, the breadcrumb navigation may only display the "homepage" item, or according totitle=falseThe setting to 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 to ensure they have a clear hierarchy.