In website construction and operation, user experience (UX) is always the core.When visitors delve into your website, a clear navigation path can effectively prevent them from getting lost and quickly understand their current position.This is the value of Breadcrumb Navigation.It not only enhances the user experience, but is also an important part of Search Engine Optimization (SEO), helping search engines understand the hierarchical structure of your website.

autobreadcrumbauto

auto

breadcrumbLabels will automatically identify the user's current page and generate a series of clickable links based on the website's hierarchy structure (for example: Home > Category > Article).You do not need to manually write the navigation path for each page, Anqi CMS will intelligently complete this task.

UsebreadcrumbThe basic syntax of the label is very intuitive:

{% breadcrumb crumbs %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
{% endbreadcrumb %}

In this code block:

  • {% breadcrumb crumbs %}: This is the start of the label,crumbsIt is the variable name you specify for the breadcrumb navigation list.
  • {% for item in crumbs %}:crumbsA variable is a container that includes multiple navigation items(item）'s array. You can useforto iterate over these navigation items.
  • {{item.Link}}Eachitemall haveLinka property that contains the URL addresses corresponding to the navigation items.
  • {{item.Name}}Eachitemalso haveNameProperty, it includes the text displayed by the navigation items.
  • {% endfor %}and{% endbreadcrumb %}: means loop andbreadcrumbThe end of the tag.

This way, the security CMS outputs a standard HTML list structure, where each list item is a link pointing to the parent page on the current user path.

Customize your breadcrumb navigation

breadcrumbTags also provide some parameters, allowing you to customize flexibly according to your actual needs.

  1. Customize the home page link text (indexParameter)By default, the first link in the breadcrumb navigation (i.e., the homepage) will display as "Home". If you want to change this text, you can useindexParameters:

    {% breadcrumb crumbs with index="我的主页" %}
{# ... 循环显示部分 ... #}
{% endbreadcrumb %}

    So, the starting point of the navigation path will be displayed as "My Homepage" instead of "Home Page".

  2. Control the display of the current page title (titleParameter)In the document detail page or single page and other end pages, breadcrumb navigation usually displays the title of the current page.titleThe parameter provides three control methods:

    • title=true(Default value): Display the full title of the current page.
    • title=falseThis does not display the title of the current page. This may be helpful in some designs to simplify the visual effects.
    • title="自定义文本"You can replace the title of the current page with custom text. For example, on the product details page, you may want to display 'Product Details' instead of the specific product name.
    {# 示例：不显示当前页面标题 #}
{% breadcrumb crumbs with title=false %}
{# ... 循环显示部分 ... #}
{% endbreadcrumb %}


{# 示例：将当前页面标题显示为“文章详情” #}
{% breadcrumb crumbs with title="文章详情" %}
{# ... 循环显示部分 ... #}
{% endbreadcrumb %}

  3. Multi-site scenariositeIdParameter)If you are using the multi-site management feature of AnQi CMS and want to reference or display data from other sites in the breadcrumb navigation, you can usesiteIdParameters are used to specify the site ID. This is typically used for more complex cross-site content integration needs.

Advanced examples and style suggestions

Using these parameters together can help build breadcrumbs that better fit the style of your website.In addition, don't forget to add styles for your breadcrumb navigation using CSS to make it more aesthetically pleasing and readable on the page.

For example, a separator (such as)>）and custom home page link breadcrumb navigation:

<nav class="breadcrumb-nav">
    {% breadcrumb crumbs with index="网站首页" title=true %}
        <ol class="breadcrumb-list">
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    <a href="{{item.Link}}">{{item.Name}}</a>
                    {% if not forloop.Last %} {# 判断是否是最后一个链接，不是则添加分隔符 #}
                        <span class="separator"> &gt; </span>
                    {% endif %}
                </li>
            {% endfor %}
        </ol>
    {% endbreadcrumb %}
</nav>

{# 简单的 CSS 样式示例，您可以根据需要进行扩展 #}
<style>
    .breadcrumb-nav {
        font-size: 0.9em;
        padding: 10px 0;
        color: #666;
    }
    .breadcrumb-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex; /* 让列表项横向排列 */
        align-items: center;
    }
    .breadcrumb-item a {
        text-decoration: none;
        color: #337ab7;
    }
    .breadcrumb-item a:hover {
        text-decoration: underline;
    }
    .breadcrumb-item .separator {
        margin: 0 5px;
        color: #999;
    }
</style>

In this example, we useforloop.LastTo determine whether it is the last element in the loop, so that a separator is only added after non-last links, thus avoiding redundancy.>add the symbol.

Summary

breadcrumbTags are a powerful and practical feature in AnQi CMS, which helps you build clear and intuitive navigation paths on your website through automation and customization.This tag can be used reasonably to significantly improve the user's browsing experience and lay a solid foundation for your website to perform better in search engines.Master its usage, and it will make your website operation more efficient and convenient.

Common Questions (FAQ)

1. How to modify the display text of the 'Home' link in the breadcrumb navigation?You can useindexParameters can be used to modify the display text of the "Home{% breadcrumb crumbs with index="网站主页" %}...{% endbreadcrumb %}.

2. In the article or product detail page, I want the breadcrumb navigation not to display the specific title of the current page, or to display a general title. How can it be achieved?You can usetitleControl the parameters.

  • To completely hide the current page title, settitle=false:{% breadcrumb crumbs with title=false %}...{% endbreadcrumb %}.
  • To display a generic title, such as “News Details”, settitle="新闻详情":{% breadcrumb crumbs with title="新闻详情" %}...{% endbreadcrumb %}.

3. My breadcrumb navigation is already implemented, but it looks pretty plain without any visual separators or styles, how can I beautify it? breadcrumbThe label mainly outputs the HTML structure (usually<ul><li><a>），it does not contain any style itself. You need to use CSS to add styles to these HTML elements. For example, you can add a space between each navigation item.<span> &gt; </span>As a separator, and set the color, font size, spacing, etc. for the links and separators through CSS, just like the style examples provided in the article.