As an experienced CMS website operation person, I am very clear about the important role of breadcrumb navigation in improving user experience and website SEO.It not only helps visitors clearly understand their location on the website, but also guides search engines to better understand the website's hierarchy.In the AnQi CMS, correctly generating and displaying breadcrumb navigation is a basic and important content management task.

Anqi CMS breadcrumb navigation generation and display

In the AnQi CMS, generating and displaying breadcrumb navigation mainly relies on built-inbreadcrumbTemplate tag.This tag is designed to be very flexible, allowing us to customize the way breadcrumbs are displayed according to different page requirements.Correctly using this tag can ensure that every page of the website has clear and consistent navigation paths.

basic breadcrumb navigation implementation

To generate a basic breadcrumb navigation, we first need to include the template filebreadcrumbLabel. This label will return an array object containing all the stages in the navigation path, which we usually namecrumbs. Then, by traversing thiscrumbsAn array, and it can sequentially display each navigation link and its name.

For example, in a common page template, we can organize the breadcrumb navigation code like this:

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb crumbs %}
        {% for item in crumbs %}
            {% if forloop.Last %}
                <li class="breadcrumb-item active" aria-current="page">{{item.Name}}</li>
            {% else %}
                <li class="breadcrumb-item"><a href="{{item.Link}}">{{item.Name}}</a></li>
            {% endif %}
        {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

This code first defines anavElement to wrap the breadcrumbs, and useolList to present the hierarchical structure.breadcrumbLabel to assign the generated navigation path tocrumbsthe variable, and then pass throughforto iteratecrumbseach of themitemEachitemincludesName(link name) andLink(link address) two fields. We judge throughforloop.LastTo distinguish whether the current item is the last one (i.e., the current page), so that different styles can be applied.aria-currentThis attribute helps to enhance accessibility.

In most cases, to maintain code cleanliness and reusability, we would store this breadcrumb navigation code snippetpartial/in the directory, for examplepartial/breadcrumb.htmlThen, in the page template where breadcrumbs need to be displayed{% include "partial/breadcrumb.html" %}to use.

Customize the display options for breadcrumbs navigation

breadcrumbThe label provides several parameters that allow us to further customize the behavior and display content of the breadcrumb navigation.

Custom home page name is a common requirement.By default, the first link name of the breadcrumb is "Home".indexParameter settings.

For example, change the name of the home page to “My Website”:

{% breadcrumb crumbs with index="我的网站" %}
    {# ... 循环遍历 crumbs 的代码 ... #}
{% endbreadcrumb %}

It is also an important feature to control the display of the current page title.In some cases, we may not want the last item of the breadcrumb (i.e., the title of the current page) to be too long, or even not displayed at all.titleThe parameter can help us achieve this goal.

If you want the breadcrumbs not to display the title of the current page, you cantitleparameter settingsfalse:

{% breadcrumb crumbs with index="我的网站" title=false %}
    {# ... 循环遍历 crumbs 的代码，注意最后一项的 item.Name 将会是空或上级分类名 ... #}
{% endbreadcrumb %}

or, if you need to display the title of the current page as specific text, you can directly settitlethe parameter to this text, for example, 'Article Details':

{% breadcrumb crumbs with index="我的网站" title="文章详情" %}
    {# ... 循环遍历 crumbs 的代码，此时最后一项的 item.Name 将会是“文章详情” ... #}
{% endbreadcrumb %}

These flexible parameters enable breadcrumb navigation to adapt to the needs of different page types and design styles, whether it's an article detail page, a product list page, or a single page, it can present the navigation path that best meets the user's expectations.

**Practical Suggestions and Optimization**

In implementing breadcrumb navigation in the Anqi CMS, we recommend always placing it at the top of the page content, just below the main navigation.This not only conforms to the user's visual habits, but also allows search engines to identify the page hierarchy more quickly.

In terms of code, using semantic HTML elements such as<nav>and<ol>Build breadcrumbs navigation and pair it with appropriate CSS styles to ensure it is visually appealing and structurally clear.The multi-site management feature of AnQi CMS also means that we can specify specific breadcrumb configurations for different sites or different language versions, ensuring consistency of global content and localization.siteIdparameters can come in handy, but are usually not necessary in single-site operations.

By following these practices, CMS operators can easily create breadcrumb navigation that is user-friendly and SEO-friendly, thereby enhancing the overall performance of the website.

Frequently Asked Questions

What are the aspects of the importance of breadcrumb navigation for a website?

Breadcrumbs navigation is crucial for website operation.It can significantly improve the user experience, allowing visitors to clearly know their position in the website structure at any time and easily return to the upper page, reducing the feeling of being lost.From an SEO perspective, breadcrumbs provide an additional internal link structure, which helps search engine spiders understand the hierarchy and content relevance of a website, thereby improving the page crawling efficiency and ranking.

Can I customize the style of the breadcrumb navigation?

AnQi CMS allows you to fully customize the style of the breadcrumb navigation.breadcrumbThe tag is responsible for outputting structured navigation data, and you can use HTML and CSS to design its appearance around this data. In the above example, we used<nav>and<ol>Element, and addedbreadcrumbandbreadcrumb-itemThe class names, you can define the styles of these classes according to your design requirements in the CSS file, for example, adjusting font, color, background, spacing, and separators.

How can I prevent the full title of the current page from being displayed in the breadcrumbs?

In AnQi CMS, you can go throughbreadcrumbTagstitleParameters to control the display of the current page title. If you do not want to display the full title of the current page,titleparameter settingsfalsesuch that the last item in the breadcrumb will not include the title text of the current page. You can also set it to a short custom string, such astitle="详情页"To make it more concise to express the current page.