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 enhance website usability, clearly showing the user's current position on the website and providing links to easily return to the previous level page.breadcrumbLabel.

Understanding the importance of breadcrumb navigation

From the perspective of SEO, breadcrumb navigation also has an indispensable value.It creates a rich internal link structure, which helps search engines better understand the hierarchy and relationships between pages on the website, thereby improving the page crawling efficiency and ranking.At the same time, each level in the breadcrumb navigation typically contains relevant keywords, further reinforcing the thematic relevance of the page.

Anqi CMS'sbreadcrumbTag: Easily Build Navigation

Anqi CMS'sbreadcrumbLabels are designed to solve these problems.It greatly simplifies the generation process of breadcrumb navigation, allowing website developers and operators to avoid manually writing complex logic to determine 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 the tag is very intuitive. You can use it in template files just like other built-in tags,{% breadcrumb ... %}Call it using syntax. For example, we would typically do it like this to get the breadcrumb list:

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

Here,crumbsis the variable name we specify for the breadcrumb list. AnQi CMS will assign all breadcrumb level data in the form of an array object (where each element containsNameandLinkthe attribute)crumbsVariable, we only need to pass through a simpleforloop to render them on the page.

This design concept makes the breadcrumb navigation of the Anqi CMS not only easy to integrate, but also lies in its 'automated' feature.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 single-page path settings you make in the backend.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

Anqi CMS'sbreadcrumb

  1. Customize the home page name (indexparameter)By default, the starting point of breadcrumb navigation is usually displayed as "HomeindexParameters are easily implemented. For example:

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

    In this way, the first link of the navigation path will be displayed as "My Site" instead of the default "Home Page."

  2. Control the display of article/page titles (titleparameter)In 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 throughtitleparameters:

    • title=true(Default): Display the full article/page title.
    • title=falseDo not display the article/page title; the breadcrumb navigation will end at the parent category.
    • title="自定义文本"Display the custom text you specified instead of the title of the article/page itself.This is very useful in certain scenarios, for example, when you want to统一 display the breadcrumb at the end of all article detail pages as 'Article Detail' instead of the specific title.

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

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

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

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

  3. Multi-site support (siteIdparameter)For those users who have set up multiple sites using the multi-site management function of Anqi CMS,siteIdParameters provide advanced options. Although the system usually automatically retrieves data based on the current visited site, if you need to explicitly call data from other sites in a specific template, you can specifysiteIdTo implement. This can be 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.

Practical Exercise: Applying Breadcrumbs in Templates

tobreadcrumbApply tags to your CMS template usually requires just a few simple steps. To maintain code cleanliness and maintainability, we usually place the breadcrumb code snippet in a separate template file (for example,partial/breadcrumb.htmlIn 【en】, then include it in the pages that need to display the breadcrumb navigation.

Here is a complete example of breadcrumb navigation code, which you can place in your template file: 【en】

<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 anavelement and an ordered listol, assigning 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.crumbsAt the same time, it specifies the home page to be displayed as "Website Homepage" and shows the title of the detail page.

In{% for item in crumbs %}In the loop, we traversecrumbsArray,item.NameIt will output the level name (such as “Home”, “Product Category”),item.LinkIt will output the corresponding URL. Here is also a little trick: usingforloop.LastTo determine whether the current element is the last breadcrumb, usually the last element is the current page, which does not need to have a clickable link. It should only display text.

Summary

Anqi CMS'sbreadcrumbTags are a highlight feature in a content management system, providing powerful and highly flexible breadcrumb navigation generation capabilities with a concise syntax. From automatically recognizing page hierarchy to supporting custom home page names and detail page titles display, to providing support for multi-site management.breadcrumbTags all reflect the deep consideration of AnQi CMS in user experience and operational efficiency. Making good use of this tag will help you build a website with greater user-friendliness and SEO advantages.

Common Questions (FAQ)

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

2. How to add styles (CSS) to my breadcrumb navigation?Anqi CMS'sbreadcrumbThe label is 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..breadcrumb-list/.breadcrumb-itemUse the class name style to customize the breadcrumb font, color, size, spacing, background color, and separator style, to perfectly integrate with your website theme.

3. Does breadcrumb navigation support the depth display of multi-level categories? If my categories have 5 levels or more, can it display automatically?Yes, it is supported by Anqi CMSbreadcrumbTags will intelligently match the actual URL path of the page and your settings in the backend