In website operation, a clear navigation path is crucial for improving user experience and search engine optimization (SEO).When we are browsing websites, a concise and clear path can help us quickly locate and understand where we are currently.This navigation form is usually called 'Breadcrumb Navigation', which is like the breadcrumbs you leave on your way home, clearly showing your current page's position in the website structure, such as 'Home > Product Category > Electronic Products > Smartphones'.
AnQiCMS provides a powerful and easy-to-usebreadcrumbTags, allowing you to easily generate and display these layered navigation on web pages.It can intelligently recognize and construct a complete hierarchy path based on the context of the current page, such as the category, document detail page, even a custom page, thus saving the trouble of manually maintaining complex navigation.
use cleverlybreadcrumblabel building navigation
breadcrumbThe core function of the label is to return an array object containing information about each link in the path.This array represents each node in the navigation path, containing the display name and the corresponding link address of the node.crumbs, and then display this information on the page through a loop.
a very basicbreadcrumbLabel usage may be like this:.
{% breadcrumb crumbs %}
<nav class="breadcrumb-nav">
{% for item in crumbs %}
{% if not forloop.Last %}
<a href="{{ item.Link }}">{{ item.Name }}</a> >
{% else %}
<span>{{ item.Name }}</span>
{% endif %}
{% endfor %}
</nav>
{% endbreadcrumb %}
In this code,{% breadcrumb crumbs %}Defined a namedcrumbsvariable to receive breadcrumb path data. Next,.{% for item in crumbs %}to iteratecrumbseach item in the array. We use.forloop.Last
to customize your breadcrumb navigation.
AnQiCMSbreadcrumbLabels also provide some parameters to help you customize more finely according to your actual needs.
FirstlyHome name。You may not want the breadcrumb starting point to always display "Home" but "Website Homepage" or other more brand-specific names. At this time, you can useindexThe parameter is used to specify the display text on the homepage, for example:index="我的主页".
ThenThe display title of the current page.For the last element of the breadcrumb navigation, which is the current page itself, you may want it to display as the full title of the document, or a simpler description, or even not display at all.titleThe parameter provides such flexibility:
- By default,
title=trueIt will display the full title of the current page. For example, on an article detail page, it will display the title of the article. - If you find the document title too long, or do not want it to appear in the breadcrumbs on some pages, you can set it to
title=falseto hide. - If you want to give the current page a unified description, such as displaying 'Product Details' on all product detail pages, you can pass a specific string, for example:
title="产品详情".
There is also anothersiteIdParameter, it is mainly used for multi-site management scenarios.If you are using the multi-site feature of AnQiCMS and need to call data from specific sites to generate breadcrumbs, you may use it.In most cases, for a single site or the default site, this parameter does not need to be set.
Combining these parameters, we can build a more customizable breadcrumb navigation. For example, the following example shows how to set the home page text to "Website Home" and disable the display of the current page title.
{% breadcrumb pathItems with index="网站首页" title=false %}
<ol class="breadcrumb">
{% for item in pathItems %}
<li{% if forloop.Last %} class="active"{% endif %}>
{% if not forloop.Last %}
<a href="{{ item.Link }}">{{ item.Name }}</a>
{% else %}
{{ item.Name }}
{% endif %}
</li>
{% endfor %}
</ol>
{% endbreadcrumb %}
In this example, we will change the variable name fromcrumbstopathItemsThis means you can name it according to your preference.title=falseThe title of the current page will not appear at the end of the breadcrumb, making the navigation path more concise.forloop.LastThe judgment ensures that the last element of the path is not added with a link, and can be highlighted withactivea style class to highlight the current position.
AnQiCMSbreadcrumbLabels with its intelligent path generation and flexible customization options greatly simplify the implementation of website navigation.Whether it is to enhance user experience or optimize SEO, it is an indispensable tool that makes your website structure clear at a glance.
Common Questions (FAQ)
Q1: Why does my breadcrumb navigation not display the title of the current page, or does it display a title that I do not want?A: This is likely becausetitleThe setting of parameters. By default,title=truethe full title of the current page (such as articles or products) will be displayed. If you want to hide it, you can settitle=falseIf you want to display a unified description, such as "News Details", you can settitle="新闻详情"Please check yourbreadcrumbtagstitleparameter configuration.
Q2: How to adjust the breadcrumb navigation style to make it more consistent with my website design?A:breadcrumbThe label is responsible for generating the HTML structure and content of the breadcrumb navigation, and the specific visual style needs to be controlled through CSS. You can define the breadcrumb navigation in your template.nav/ol/li/a/spanAdd custom CSS classes to HTML elements (such as the examples above)breadcrumb-navorbreadcrumb），Then define the styles for these classes in your website's stylesheet (CSS file), including font, color, spacing, and separator styles.
Q3: I want to change the starting text of the breadcrumb navigation from "HomeA: You can useindexParameters to easily modify the home display text of the breadcrumb navigation. Simply inbreadcrumbtag.index="你的自定义文字"That's it, for example:{% breadcrumb crumbs with index="网站主页" %}. As a result, the starting point of your breadcrumb navigation will display the custom text you set.