In modern web design, user experience (UX) and search engine optimization (SEO) are the two cornerstones of success.An intuitive navigation system not only guides users to find the required information easily, but also helps search engines better understand the structure of the website.Among them, Breadcrumb Navigation is an effective tool to enhance these two aspects.For AnQiCMS users, making good use of its powerful template tag features can easily integrate high-quality breadcrumb navigation into the website.

What is breadcrumb navigation and why is it important?

Imagine you are exploring a vast forest, occasionally glancing back at the path you've taken, which always brings you a sense of comfort.Breadcrumbs navigation is like a landmark in your website, showing the user's current page position within the entire site hierarchy.首页 > 产品中心 > 电子设备 > 智能手机.

Its importance is reflected in:

  1. Enhance user experience:Users can clearly understand where they are and quickly navigate back to the upper-level page, reducing the feeling of being lost and improving navigation efficiency.Especially for websites with deep hierarchies or rich content, the breadcrumb navigation plays a more prominent role.
  2. Optimize SEO:The search engine understands the hierarchical structure of the website through breadcrumb navigation, which helps to crawl and index the website content.At the same time, the internal links within the breadcrumbs also build natural internal links, which are helpful for weight transmission and keyword ranking.AnQiCMS was designed with SEO-friendliness in mind, and the breadcrumb navigation is an important part of it.

Breadcrumbs navigation tag in AnQiCMS

AnQiCMS provides a dedicated template tagbreadcrumbEnglish translation: Let you easily call and render breadcrumb navigation in the template.This tag can automatically generate an array containing path information based on the current page URL and content level, for you to display on the front end.

The basic usage is very simple and clear, and it is usually defined in a variable, for examplecrumbs:

{% breadcrumb crumbs %}
    {# 在这里通过循环渲染面包屑路径 #}
{% endbreadcrumb %}

crumbsThe variable will be an array object, where each element represents a link in the navigation path, including the link name and link address.

Details of core parameters

breadcrumbLabels are built with some practical parameters, allowing you to flexibly configure according to the specific needs of the website to further improve the user experience:

  1. indexParameters: Custom starting pointBreadcrumbs navigation usually starts from the homepage of the website.indexParameters allow you to customize the display name of this starting point. By default, it is displayed as 'Home'.

    • Default usage: {% breadcrumb crumbs %}（Start point shows "Home Page"）
    • Custom name：If you want to display "Website Home Page" or "My Blog", you can set it like this：“
      
{% breadcrumb crumbs with index="网站首页" %}
{# 渲染面包屑 #}
{% endbreadcrumb %}

  2. titleParameter: Controls the display of the current page titleThe last element of the breadcrumb navigation is usually the title of the current page, and it should not contain a link (because the user is already on this page).titleThe parameter is used to control the display of this element.

    • Default usage: title=trueEnglish.AnQiCMS will try to get the title of the current page and display it as the last element.
    • Do not display the title:If you do not want the breadcrumbs to display the title of the current page, you can set it totitle=false:
      
{% breadcrumb crumbs with title=false %}
{# 渲染面包屑，不包含当前页标题 #}
{% endbreadcrumb %}
    • Custom title:Sometimes, the current page title may be too long or not suitable for direct display in the breadcrumb, you can provide a custom string as the display content of the last element:
      
{% breadcrumb crumbs with title="详情页" %}
{# 渲染面包屑，最后一个元素显示“详情页” #}
{% endbreadcrumb %}

  3. siteId参数：Multi-site data calls (Advanced Usage)AnQiCMS supports multi-site management, if you have created multiple sites in the background and need to call the breadcrumb data of another site in the template of a site, you can usesiteIdThe parameter specifies the target site ID. For single-site users, this parameter is usually not needed.

    • Example: {% breadcrumb crumbs with siteId="2" %}

How to integrate breadcrumbs into your template?

In practice, you usually find the common header file of the website template (for examplebash.htmlorheader.htmlIf you have usedextendsorinclude）or place breadcrumbs navigation above the content area. The typical HTML structure is to use an unordered list<ul>or an ordered list<ol>withforin a loop to iterate overcrumbseach path element in the variable.

The following is a complete example of integrating breadcrumb navigation into AnQiCMS template:

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb crumbs with index="网站首页" title=true %}
            {% for item in crumbs %}
                <li class="breadcrumb-item {% if loop.last %}active{% endif %}">
                    {# 如果不是最后一个元素，则添加链接 #}
                    {% if not loop.last %}
                        <a href="{{ item.Link }}">{{ item.Name }}</a>
                    {% else %}
                        {# 最后一个元素只显示文本，不带链接 #}
                        {{ item.Name }}
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

Code analysis:

  • <nav aria-label="breadcrumb">using HTML5'snavTags andaria-labelattribute to enhance semantics and accessibility.
  • <ol class="breadcrumb">：Use an ordered list.olIt indicates the sequence of navigation paths and adds a CSS class name.breadcrumbIt is convenient for styling.
  • {% breadcrumb crumbs with index="网站首页" title=true %}：Invoke the breadcrumb tag, and store the returned path incrumbsVariables are used, and the home page name is set to "Website Home", and the current page title is displayed automatically.
  • {% for item in crumbs %}: Iterate overcrumbsEach breadcrumb item in the array.
  • loop.lastThis is a special loop variable used to determine if the current loop is the last element.
  • {% if not loop.last %}If it is not the last element, render a<a>tag to make it clickable.
  • {{ item.Link }}and{{ item.Name }}：The link address and display name of the breadcrumb item are output separately.
  • {% else %}{{ item.Name }}{% endif %}：If it is the last element (i.e., the current page), only its name is displayed without adding a link.
  • {% endif %}End condition judgment.
  • </li>：End of list item.
  • {% endfor %}：End loop.
  • {% endbreadcrumb %}：End the call to breadcrumb tags.

After rendering, this code may output something like网站首页 > 产品中心 > 电子设备 > 智能手机Such structure, and all levels except 'smartphone' are clickable.You can combine CSS styles to make it aesthetically pleasing and in line with the theme of your website.

Summary

In AnQiCMS, utilizebreadcrumbTemplate tags create breadcrumb navigation is a simple and efficient process. Through reasonable configurationindexandtitle参数，您可以轻松地为网站提供清晰的导航路径，不仅大大提升了用户的浏览体验，也为搜索引擎构建了友好的网站结构，从而在用户和SEO两方面都取得了更好的效果。Integrate this feature into your website template, it is undoubtedly an important step to optimize the quality of your website.

Common Questions (FAQ)

Q1: Why is the title of the current page not displayed in my breadcrumb navigation?

A1：This is usually because you havebreadcrumbset in the tagtitle=falseortitleto an empty string. Please check your template code, make suretitleparameter settingstrueOr set it to the custom title string you want to display, for example{% breadcrumb crumbs with title=true %}or{% breadcrumb crumbs with title="阅读正文" %}.

Q2: How to customize the breadcrumb navigation style? For example, modify the separator style or text color?

A2：Breadcrumbs navigation style is usually controlled by CSS. AnQiCMS'sbreadcrumbTags generate standard HTML structure (such asolandli），You can add CSS classes to these HTML elements (for example, as shown in the example)。“breadcrumbandbreadcrumb-item），Then define the corresponding styles in your CSS file. For example, you can use“::afterThe pseudo-element is used to add a custom separator:

.breadcrumb-item + .breadcrumb-item::before {
    content: ">"; /* 可以是任意字符或图标 */
    padding: 0 5px;
    color: #6c757d;
}
.breadcrumb-item a {
    color: #007bff;
    text-decoration: none;
}
.breadcrumb-item.active {
    color: #6c757d;
}

Q3: Can the breadcrumb navigation automatically identify all types of pages? Such as tab pages or search result pages?

A3:breadcrumbTags are automatically generated based on the content hierarchy of the website (such as categories, documents, single pages, etc.).For some special dynamic pages, such as search result pages or some highly customized tabs, their hierarchy may not be as clear as conventional content pages.AnQiCMS will strive to provide paths based on URL structure or built-in logic.