How to correctly generate and display breadcrumb navigation on a page?

As a senior CMS website operator, I am very clear about the importance of breadcrumb navigation in improving user experience and website SEO.It not only helps visitors clearly understand their position on the website, but also guides search engines to better understand the website's hierarchy structure.In AnQi CMS, correctly generating and displaying breadcrumb navigation is a fundamental and important content management task.

Generating and displaying breadcrumb navigation in Anqi CMS

In 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 display of breadcrumbs according to different page requirements.Using this tag correctly ensures 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 it in the template filebreadcrumbThe tag returns an array object containing all the stages in the navigation path, which we usually namecrumbsThen, by traversing thiscrumbsAn array 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 usesola list to present the hierarchical structure.breadcrumbthe tag to assign the generated navigation path tocrumbsthe variable, then throughforLoop throughcrumbseachitem. EachitemContainsName(link name) andLinkTwo fields such as (link address). We judgeforloop.LastTo determine whether the current item is the last one (i.e., the current page) so as to provide different styles andaria-currentAttribute, this helps to improve accessibility.

In most cases, in order to keep the code tidy and reusable, we will store this breadcrumb navigation code snippet inpartial/in the directory, for examplepartial/breadcrumb.htmlThen proceed in the page template where breadcrumbs need to be displayed{% include "partial/breadcrumb.html" %}to refer to.

Customize the display options of breadcrumb navigation

breadcrumbTags provide several parameters to further customize the behavior and display content of breadcrumb navigation.

Customizing the homepage name is a common requirement. By default, the first link name in the breadcrumb is 'Home'.If we need to change it to 'My Blog' or 'Homepage', we can useindexSet the parameters.

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

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

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

If you want the breadcrumbs not to display the title of the current page, you can settitlethe parameter tofalse:

{% 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 make it possible for breadcrumb navigation to adapt to the needs of different page types and design styles, whether it is 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 Recommendations and Optimization**

When implementing breadcrumb navigation in Anqi CMS, it is recommended to always place 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 quickly identify the hierarchy of the page.

From a code perspective, using semantic HTML elements like<nav>and<ol>Build breadcrumb navigation and配合 appropriate CSS styles, it can ensure that it is visually beautiful 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 to ensure consistency of global content and localization.If you need to call data from other sites,siteIdParameters can be useful, but are usually not a concern in single-site operations.

By following these practices, the operation staff of Anqi CMS can easily create breadcrumbs that are beneficial for user navigation and friendly to search engines, thus improving the overall performance of the website.

Frequently Asked Questions

What are the aspects in which breadcrumb navigation is important for a website?

Breadcrumbs navigation is crucial for the operation of a website. It can significantly improve user experience, allowing visitors to clearly know their position in the website structure at any time, and conveniently return to the upper-level page, reducing a sense of confusion.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.breadcrumbTags are only responsible for outputting structured navigation data, you can use HTML and CSS to design its appearance around this data. In the above example, we used<nav>and<ol>element was addedbreadcrumbandbreadcrumb-itemClass names, you can define the styles of these classes according to your design needs in the CSS file, such as adjusting the font, color, background, spacing, and separators.

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

In AnQi CMS, you canbreadcrumblabel'stitleParameters to control the display of the current page title. If you do not want to display the full title of the current page, you cantitlethe parameter tofalseSuch that the last item of the breadcrumb will not include the title text of the current page. You can also set it to a short custom string, such astitle="详情页"In order to represent the current page more concisely.