When building a website, a clear and intuitive navigation system is crucial for user experience and search engine optimization (SEO).Breadcrumb navigation is a tool that can significantly improve the usability of a website, clearly showing the user's current position in the website and providing links to easily return to the previous level page.AnQi CMS knows this and provides powerful and flexible features for itbreadcrumb.

Understanding the importance of breadcrumb navigation

Imagine a user browsing a richly content website. If there is no breadcrumb navigation, it's like walking into a maze, and it's easy to get lost.After the user clicks on multi-level categories or delves into a specific article detail page, they may not know which entry point they came from, or how to quickly return to the upper-level list they are interested in.Breadcrumbs navigation is displayed at the top of the page, showing a path sequence such as "Home > Product Category > Electronic Products > Smartphones > Product Details", providing a clear path for users and greatly improving navigation efficiency and user satisfaction.

From an SEO perspective, breadcrumb navigation also has an indispensable value.It creates a rich internal link structure, helping search engines better understand the hierarchy and relationship between pages on a website, thereby helping to improve the page crawling efficiency and ranking.At the same time, each level of the breadcrumb navigation usually contains relevant keywords, further strengthening the thematic relevance of the page.

Of Security CMSbreadcrumbLabel: Easily build navigation

Of Security CMSbreadcrumbLabels are designed to solve these problems. They greatly simplify the generation process of breadcrumb navigation, allowing web developers and operators to avoid manually writing complex logic to judge the hierarchical relationship of the current page.Just call it in the template, and the system can intelligently identify the position of the current page in the website structure and automatically generate the corresponding breadcrumb path.

UsebreadcrumbThe basic structure of labels is very intuitive. You can use them in template files just like other built-in tags, by{% breadcrumb ... %}Syntax to invoke it. For example, we would usually do like this to get the breadcrumb list: 

{% breadcrumb crumbs %}
    {# 接着在for循环中遍历 crumbs 变量来输出面包屑路径 #}
{% endbreadcrumb %}

Here, crumbsIt is the variable name we specify for the breadcrumb list. Anqie CMS will assign all breadcrumb level data in the form of an array object (where each element containsNameandLinkproperties) tocrumbsVariables, we just need to pass through a simpleforloop to render them on the page.

This design concept makes the breadcrumb navigation of Anqi CMS not only easy to integrate, but also lies in its 'automated' characteristics.You do not need to manually define the parent-child relationship for each category or article. The system will automatically build a complete and logically correct navigation path based on the category structure, content model, and even the single-page path you set in the background.This is undoubtedly a great efficiency improvement for managing websites with a large amount of content or complex hierarchies.

Flexible customization: meet your personalized needs

Of Security CMSbreadcrumbTags provide convenience while also fully considering the needs of website personalized display.It provides several key parameters, allowing you to flexibly adjust the display style of breadcrumbs according to the design style and specific scenarios of the website.

  1. Customize the home page name (indexparameters)By default, the starting point of the breadcrumb navigation is usually displayed as "Home Page". But if your website has a special brand name or user habits, you may want to display it as "My Blog", "Company Homepage" or other text, you canindexParameters can be easily implemented. For example:

    {% breadcrumb crumbs with index="我的站点" %}
    {# ...输出面包屑内容... #}
{% endbreadcrumb %}

    In this way, the first link in the navigation path will display as "My Site" instead of the default "Home".

  2. Control the display of article/page titles (titleparameters)On the article detail page or single page, the last element of the breadcrumb navigation is usually the title of the article or page. Anqi CMS allows you to control this behavior through parameters:titleparameter to control this behavior:

    • title=true(Default): Show the full article/page title.
    • title=falseDo not show the article/page title, breadcrumbs will end at the parent category.
    • title="自定义文本"Display the custom text you specified instead of the title of the article/page.This is very useful in some cases, for example, you want to display 'Article Details' at the end of all article detail pages instead of the specific title.

    For example, if you only want to display up to the category level and hide the article title:

    {% breadcrumb crumbs with title=false %}
    {# ...输出面包屑内容... #}
{% endbreadcrumb %}

    Or you want to uniformly display the "Details page":

    {% breadcrumb crumbs with title="详情页" %}
    {# ...输出面包屑内容... #}
{% endbreadcrumb %}

  3. Multi-site support (siteIdparameters)For those who use the AnQi CMS multi-site management feature to build multiple sites,siteIdA parameter provides an advanced option. Although in most cases, the system will automatically retrieve data based on the current site being visited, if you need to explicitly call data from other sites in a template, you can specifysiteIdTo implement. This is very useful in certain cross-site content display or unified navigation requirements, but for most single-site users, this parameter usually does not need to be manually set.

Practice: Applying Breadcrumbs in Templates

tobreadcrumbApply the label to your AnQi CMS template usually only requires a few simple steps. To maintain code cleanliness and maintainability, we usually place the breadcrumb code snippet in a separate template file (for examplepartial/breadcrumb.htmlIn it, then introduce it on the page where you need to display the breadcrumbs.

Here is a complete breadcrumb navigation code example that you can place in your template file:

<nav aria-label="breadcrumb">
    <ol class="breadcrumb-list">
        {% breadcrumb crumbs with index="网站主页" title=true %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {# 如果是最后一个面包屑项，通常不需要链接 #}
                    {% if forloop.Last %}
                        {{ item.Name }}
                    {% else %}
                        <a href="{{ item.Link }}">{{ item.Name }}</a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

<style>
    /* 以下是一些简单的CSS样式示例，您可以根据您的网站设计进行调整 */
    .breadcrumb-list {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        background-color: #f8f9fa;
        border-radius: .25rem;
        padding: .75rem 1rem;
    }
    .breadcrumb-item + .breadcrumb-item::before {
        content: ">"; /* 使用 > 作为分隔符 */
        display: inline-block;
        padding-right: .5rem;
        padding-left: .5rem;
        color: #6c757d;
    }
    .breadcrumb-item a {
        color: #007bff;
        text-decoration: none;
    }
    .breadcrumb-item a:hover {
        text-decoration: underline;
    }
    .breadcrumb-item:last-child {
        color: #6c757d;
    }
</style>

This code first defines anavelements and ordered listsolThis assigns appropriate ARIA labels and classes to enhance accessibility and facilitate CSS styling.{% breadcrumb crumbs with index="网站主页" title=true %}This line of code indicates that the Anqi CMS generates breadcrumb data and names it.crumbsAlso specify the home page to display as "website homepage", and show the title of the detail page.

In{% for item in crumbs %}In the loop, we iteratecrumbsarray,item.NameIt will output the level name (such as "home page", "product category"),item.LinkIt will output the corresponding URL. Here is a little trick: usingforloop.LastTo determine whether the current element is the last breadcrumb element, usually the last element is the current page, which does not need to have a clickable link, but only text should be displayed.

Summary

Of Security CMSbreadcrumbTags are a highlight feature of the content management system, providing strong and highly flexible breadcrumb navigation generation capabilities with concise syntax. From automatically identifying page hierarchy to supporting custom home page names and detailed page title display, and to providing support for multi-site management,breadcrumbThe label reflects the in-depth consideration of AnQi CMS in user experience and operational efficiency. Using this label will help you build a website with more user-friendliness and SEO advantages.

Frequently Asked Questions (FAQ)

1. Where should I place the breadcrumbs navigation code in the template?In most cases, breadcrumbs should be placed at the top of the page content, next to the main navigation bar or above the page title. It is recommended to save the above breadcrumb code snippet as a separate template file, for examplepartial/breadcrumb.htmlThen in your main layout file (such asbase.html), or on a specific page template, use{% include "partial/breadcrumb.html" %}tag to include.

2. How do I add styles (CSS) to my breadcrumb navigation?Of Security CMSbreadcrumbThe tag is mainly responsible for generating the breadcrumb data structure (links and names), and its visual style is completely controlled by the front-end CSS.In the above practical exercise, we have provided some basic CSS styles as examples.You can modify according to your website design, through.breadcrumb-list/.breadcrumb-itemUse class names to customize the font, color, size, spacing, background color, and separator style of breadcrumbs to perfectly integrate with your website theme.

3. Does breadcrumb navigation support the display of multi-level categories to a certain depth? If my categories have 5 levels or more, can it display automatically?Yes, the Anqi CMS'sbreadcrumbThe label will intelligently match the actual URL path of the page and the settings you have set in the background