How to use breadcrumb navigation tags in AnQiCMS templates to enhance user experience?

In modern web design, user experience (UX) and search engine optimization (SEO) are the two pillars of success.A clear and intuitive navigation system not only guides users to find the information they need easily, but also helps search engines better understand the structure of the website.Among them, Breadcrumb Navigation is an effective tool to improve these two aspects.For AnQiCMS users, it is easy to integrate high-quality breadcrumb navigation into the website by reasonably utilizing its powerful template tag features.

What is breadcrumb navigation and why is it important?

Imagine exploring a vast forest, occasionally looking back at the path you've taken, it always brings you a sense of peace.Breadcrumbs navigation is like a roadmap in your website, showing the user's current page position in the entire website hierarchy. For example:首页 > 产品中心 > 电子设备 > 智能手机.

The importance is reflected in:

1. Improve user experience:The user can clearly understand where they are and quickly navigate back to the parent 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 in crawling and indexing the website content.At the same time, the internal links within the breadcrumb also build natural internal links, which help in weight transfer and keyword ranking.AnQiCMS has taken full consideration of SEO-friendliness in its design, breadcrumb navigation is an important part of it.

Breadcrumbs navigation label in AnQiCMS

AnQiCMS provides a dedicated template tagbreadcrumbAllow you to easily call and render breadcrumb navigation in the template.This tag can automatically generate an array containing path information based on the current page's URL and content hierarchy for display on the front end.

The basic usage is very concise and clear, 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 address.

Core parameter details

breadcrumbThe tag built-in some practical parameters, allowing you to flexibly configure according to the specific needs of the website to further improve the user experience:

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

   • Default usage: {% breadcrumb crumbs %}(Home page is displayed at the start)
   • 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, 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=true. 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 breadcrumb 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, and you can provide a custom string as the display content of the last element:

     
     {% breadcrumb crumbs with title="详情页" %}
     {# 渲染面包屑，最后一个元素显示“详情页” #}
     {% endbreadcrumb %}
     

3. siteIdParameter: Data call under multiple sites (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 required.

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

How to integrate breadcrumbs into your template?

In actual practice, you usually find the common header file of the website template (such asbash.htmlorheader.htmlIf you have usedextendsorinclude) or place a breadcrumb navigation at the top of the content area. The typical HTML structure uses an unordered list<ul>or an ordered list<ol>combinedforto loop throughcrumbsEach path element in the variable.

The following is a complete example of integrating breadcrumb navigation into the 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 listolIt indicates the order of the navigation path and adds a CSS classbreadcrumbfor styling.
• {% breadcrumb crumbs with index="网站首页" title=true %}: Call the breadcrumb tag, and store the returned path incrumbsVariable within, and set the homepage name to "website homepage", the current page title is displayed automatically.
• {% for item in crumbs %}：TraversecrumbsEach breadcrumb item in the array.
• loop.lastThis is a special loop variable used to determine whether 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 }}：Output the link address and display name of the breadcrumb item separately.
• {% else %}{{ item.Name }}{% endif %}：If it is the last element (i.e., the current page), only the name is displayed without adding a link.
• {% endif %}: End condition judgment.
• </li>：End the list item.
• {% endfor %}Loop ends.
• {% endbreadcrumb %}Breadcrumb tag call ends.

After rendering, this code may output something similar.网站首页 > 产品中心 > 电子设备 > 智能手机This structure, and all levels except 'Smartphone' are clickable.You can combine CSS styles to make it look beautiful and consistent with your website theme.

Summary

In AnQiCMS, by utilizingbreadcrumbTo create breadcrumb navigation with template tags is a simple and efficient process. Through reasonable configurationindexandtitleParameters, you can easily provide a clear navigation path for the website, which not only greatly improves the user's browsing experience, but also builds a friendly website structure for search engines, thus achieving better results in both user experience and SEO.Integrating this feature into your website template is undoubtedly an important step to optimizing website quality.

Frequently Asked Questions (FAQ)

Q1: Why doesn't my breadcrumb navigation show the title of the current page?

A1: This is usually because you arebreadcrumbThe tag is set.title=falseortitleThe value is an empty string. Please check your template code, make suretitlethe parameter totrue, or set it to the custom title string you want to display, such as{% breadcrumb crumbs with title=true %}or{% breadcrumb crumbs with title="阅读正文" %}.

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

A2: Breadcrumb navigation style is usually controlled by CSS. AnQiCMS'sbreadcrumbTags generate standard HTML structures (such asolandli），You can add CSS classes to these HTML elements (such as in the example shown)，then define the corresponding styles in your CSS file. For example，You can usebreadcrumbandbreadcrumb-item），Then define the corresponding styles in your CSS file. For example，You can use::afterThe pseudo-element 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 breadcrumb navigation automatically identify all types of pages? Such as tabs or search result pages?

A3: breadcrumbThe tag is mainly generated automatically 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 tab pages, the hierarchy may not be as clear as that of conventional content pages.AnQiCMS will strive to provide a path based on URL structure or built-in logic.If the breadcrumb display of a specific page does not meet expectations, you may need to manually adjust according to the specific URL rules of that page