How can the breadcrumb navigation tag be used correctly in AnQiCMS?

As an experienced website operations expert, I know that every detail of a website is crucial in terms of user experience and search engine optimization (SEO).Breadcrumb Navigation is just such an element that seems small but can have a significant impact on the overall performance of a website.It not only helps users clearly understand their position on the website, but also provides important clues for the website structure to search engines.

AnQiCMS as an efficient and customizable enterprise-level content management system naturally provides strong and flexible support for this key feature.Today, I will delve into how to correctly use the breadcrumb navigation tags in AnQiCMS, helping you create a clear and user-friendly website.

Understand the role of breadcrumb navigation in AnQiCMS

AnQiCMS provides a breadcrumb navigation label designed to help you easily display the hierarchical path of the current page on each page of the website.It is not just a few lines of text links at the top of the page, but rather a complete path dynamically generated from the root directory of the website to the current page after AnQiCMS intelligently identifies the page type (such as home page, category page, article detail page, single page, tag page).This greatly enhances the user's browsing experience, allowing them to always know 'where I am', and it is also very beneficial for the crawling and understanding of the website structure by search engine spiders, thereby indirectly optimizing the website's SEO performance.

The core advantage lies in high automation and flexible customization.AnQiCMS's breadcrumb tags can automatically construct the correct navigation path based on the classification, articles, tags, and other hierarchical relationships set in your content management backend, greatly reducing the burden of manual maintenance.

The core function and parameters of AnQiCMS breadcrumb navigation tag

In the AnQiCMS template system, the implementation of breadcrumb navigation mainly relies on a simple yet powerful tag -breadcrumb.

The basic usage method is as follows:{% breadcrumb 变量名称 with index="首页" title=true %}...{% endbreadcrumb %}

We will analyze the various components and parameters of this label:

1. {% breadcrumb 变量名称 %}: This is the starting part of the tag,变量名称It is a local variable you define for the breadcrumb path list, usually we are accustomed to naming it ascrumbsThis variable will contain an array object, where each element represents a link in the path, including the link name and address.

2. with index="首页"This parameter is used to specify the starting point of the breadcrumb path, which is the "home" of the website - the display name of the homepage.By default, if this parameter is omitted, AnQiCMS will display it as 'Home'.You can customize the name of the homepage according to the brand or website location, for example, set it to"我的博客"or"品牌官网".

3. title=true:titleThe parameter controls the last element of the breadcrumb path, which is the display method of the current page title.

   • When set totitle=trueWhen set to the default value, AnQiCMS will automatically display the full title of the current page at the end of the breadcrumb path. For example, on the article detail page, it will display the title of the article.
   • If set totitle=falseIf the breadcrumb path does not include the title of the current page, it will terminate at the previous category or page.
   • You can also directly assigntitlea string value to the parameter, for exampletitle="文章详情". No matter what the actual title of the current page is, the last element of the breadcrumb will be displayed as the string you set.

4. siteIdThis is an optional parameter, mainly used for AnQiCMS multi-site management scenarios. If you have created multiple sites in the background and want to call breadcrumb data from other sites in the current site's template, you can specifysiteIdTo implement parameters accurately. Generally, if your website is operated as a single site, you can ignore this parameter.

5. ...{% endbreadcrumb %}: This is the end part of the tag. Inbreadcrumbandendbreadcrumbyou need to use oneforto loop throughcrumbsEach breadcrumb item in the variable, and render it to the HTML structure.crumbsEach variable containsitemContainsName(link name) andLinkTwo fields such as (link address).

Deploy the breadcrumb navigation in the template in actuality.

Generally, breadcrumb navigation is placed below the page header, above the content area, or integrated into the common part of the page, so that it can be uniformly displayed on all related pages. To maximize its reusability, I strongly recommend that you store it as a code snippet (fragment) in/template/your-template-name/partial/Under the directory, for example namedbreadcrumb.htmlthen in yourbase.htmlor in a template file that needs to display breadcrumbs through{% include "partial/breadcrumb.html" %}to refer to.

The following are two common code examples:

Example one: default usage, displays 'Home' and the current page title

<nav class="breadcrumb-nav">
    {% breadcrumb crumbs %}
    <ol class="breadcrumb">
        {% 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 %}
    </ol>
    {% endbreadcrumb %}
</nav>

In this example,forloop.LastIs a built-in loop variable used to determine whether the current iteration element is the last one in the loop.In this way, we can add different styles or remove links to the last element to comply with the common design specifications of breadcrumb navigation.

Example two: Customize the home page name and display "Article Details" as the end title

<nav class="breadcrumb-nav">
    {% breadcrumb crumbs with index="我的网站主页" title="文章详情" %}
    <ul class="breadcrumb-list">
        {% for item in crumbs %}
            {# 判断是否是最后一个元素，以便决定是否添加链接 #}
            {% if forloop.Last %}
                <li>{{item.Name}}</li>
            {% else %}
                <li><a href="{{item.Link}}">{{item.Name}}</a> <span class="separator">></span></li>
            {% endif %}
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</nav>

This example shows how to change the home page name to "My Website Homepage" and that the last element of the breadcrumb in any detail page will be unifiedly displayed as "Article Details", rather than the actual title of the page. At the same time, an additional<span>Comma, making the visual effect clearer.

Practical suggestions for optimizing breadcrumb navigation

Although the AnQiCMS breadcrumb navigation tag feature is powerful and easy to use, but in order to achieve **effect, the following are some additional optimization suggestions:

1. Keep it concise and clearThe purpose of breadcrumb navigation is to provide a concise path, avoiding long or complex path names, ensuring that each segment of the name can directly reflect its content.
2. Visual distinctionUtilize CSS styles to differentiate the breadcrumb navigation from other elements on the page, for example, by using smaller fonts, grayscale colors, or special icons as separators.The last element is usually not linked and is highlighted in bold or a different color.
3. Do not replace the main navigation: Breadcrumb navigation is an auxiliary navigation tool that should not replace the main navigation menu of the website. They serve different user needs.
4. Ensure crawlabilityThe link generated by AnQiCMS is a standard HTML link, friendly to search engines.Make sure your CSS or JavaScript does not hinder search engines from crawling these links.
5. Consider mobile adaptationOn mobile devices, screen space is limited. You can consider a responsive design for breadcrumb navigation, such as displaying only the key levels when the path is too long, or scrolling to show the complete path.

Summary

Breadcrumbs navigation is an indispensable element in building user-friendly and SEO-friendly websites. AnQiCMS offers flexiblebreadcrumbThe tag allows website operators to easily implement this feature and customize it according to specific needs.Using and optimizing breadcrumbs navigation correctly will bring clearer structure, better user experience, and superior search engine rankings to your website.

Frequently Asked Questions (FAQ)

Q1: Does AnQiCMS's breadcrumb navigation automatically recognize all page types? A1:Yes, AnQiCMS's breadcrumb navigation tags can intelligently recognize.