In website operation, a clear navigation path is crucial for user experience and search engine optimization (SEO).Crumbs navigation (Breadcrumb Navigation) is like a small map of the website, allowing visitors to understand their location at any time and easily return to the previous level page.breadcrumbLabel, create dynamic breadcrumb navigation, and customize the homepage name and title display according to our needs.

Get to know the AnQi CMS.breadcrumbtags

The autoCMS is designed to simplify website development and content management by providing many intuitive and powerful template tags.breadcrumbLabels are one of them, they can automatically generate the complete path from the current page to the homepage, greatly reducing the workload of manually writing navigation code.

This tag's usage is very consistent with the style of AnQi CMS template engine, which is based on Django template engine syntax, allowing you to easily call and customize it in template files. The basic structure is:

{% breadcrumb crumbs with index="首页" title=true %}
    {# 在这里循环输出面包屑的每个项 #}
{% endbreadcrumb %}

Here,crumbsis the variable name we give to the breadcrumb navigation list, you can name it freely according to your preference.{% for item in crumbs %}in the loop, eachitemincludesName(link name) andLink(link address) two fields, convenient for us to build visual navigation elements.

Create Dynamic Breadcrumb Navigation

The most basic breadcrumb navigation, just call it simplybreadcrumbLabels will automatically detect the current page type (such as article details, category list, single page, etc.) and generate the corresponding path.

An English translation of the basic breadcrumb navigation structure might look like this:

<nav class="breadcrumb">
    {% breadcrumb crumbs %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{ item.Link }}">{{ item.Name }}</a></li>
            {% if not forloop.Last %}
                {# 如果不是最后一个元素，添加分隔符 #}
                <li class="separator"> &gt; </li>
            {% endif %}
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</nav>

This code will iteratecrumbsEach breadcrumb item in the array generates a link.forloop.Lastis a very useful auxiliary variable, which can determine whether the current loop is the last element, thus helping us correctly add or omit separators (such as &gt;）。Through simple CSS styles, you can make it present a beautiful visual effect.

Customize the homepage name: make your website more personalized

By default, the first element of the breadcrumb navigation of Safe CMS is “Home Page”. If you want to change it to a more distinctive name based on the brand style or target user group of the website, such as “My Blog”, “Company Homepage” or a specific brand name, breadcrumbTagsindexParameters can be put to good use.

Just need tobreadcrumbtag.indexSpecify the name you want by specifying the parameter:

<nav class="breadcrumb">
    {% breadcrumb crumbs with index="我的博客首页" %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{ item.Link }}">{{ item.Name }}</a></li>
            {% if not forloop.Last %}
                <li class="separator"> &gt; </li>
            {% endif %}
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</nav>

Now, your breadcrumb navigation will start with "My Blog Homepage" and maintain consistency with the overall style of the website.

Control Title Display: Flexible Response to Different Page Requirements

In the article detail page or product detail page, the last element of the breadcrumb navigation is usually the title of the current page. Anqi CMS'sbreadcrumbTags providetitleParameters, allowing you to more flexibly control the display of this section.

titleParameters support three settings:

  1. title=true(Default)This is the default behavior, the last element of the breadcrumb will display the full title of the current page.
  2. title=falseIf you do not wish to display the current page title in the breadcrumb, you can choose to turn it off.For example, under certain design styles, the title of the current page may already be very prominent in the page content, so there is no need to repeat it in the breadcrumbs.
  3. title="自定义标题"You can replace the title of the current page with a custom string.This is very useful when it is necessary to simplify display or unify style, for example, at the end of breadcrumbs on all article detail pages, it displays "Article Details" instead of the specific article title.

Below is the code example for these three cases:

1. Show full title (default behavior, or explicitly set)title=true):

<nav class="breadcrumb">
    {% breadcrumb crumbs with index="我的站点" title=true %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{ item.Link }}">{{ item.Name }}</a></li>
            {% if not forloop.Last %}
                <li class="separator"> &gt; </li>
            {% endif %}
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</nav>

This will display an effect similar to “My site > Category name > Article title”.

2. Do not display the current page title (title=false):

<nav class="breadcrumb">
    {% breadcrumb crumbs with index="我的站点" title=false %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{ item.Link }}">{{ item.Name }}</a></li>
            {% if not forloop.Last %}
                <li class="separator"> &gt; </li>
            {% endif %}
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</nav>

In the article detail page, it will only display “My site > Category name”, the article title will be omitted.

3. Use custom title (title="文章详情页"):

<nav class="breadcrumb">
    {% breadcrumb crumbs with index="我的站点" title="文章详情页" %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{ item.Link }}">{{ item.Name }}</a></li>
            {% if not forloop.Last %}
                <li class="separator"> &gt; </li>
            {% endif %}
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</nav>

In the article detail page, this will display “My site > Category name > Article detail page”, and replace the specific article title with “Article detail page”.

Combine practical application: Complete example code

By using flexibilityindexandtitleParameters, you can create a practical and beautiful breadcrumb navigation based on the brand strategy and user experience goals of the website. Here is an example that integrates customized homepage names and custom title display.

<style>
    .breadcrumb ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap; /* 适应小屏幕换行 */
    }
    .breadcrumb li {
        margin-right: 5px;
        font-size: 14px;
        color: #666;
    }
    .breadcrumb li a {
        color: #337ab7;
        text-decoration: none;
    }
    .breadcrumb li.separator {
        color: #999;
        margin: 0 5px;
    }
    .breadcrumb li:last-child a {
        color: #333; /* 最后一个元素通常颜色更深或不可点击 */
        cursor: default;
    }
    .breadcrumb li:last-child.separator {
        display: none; /* 隐藏最后一个分隔符 */
    }
</style>

<nav class="breadcrumb">
    {% breadcrumb pathItems with index="公司官网" title="当前页面" %}
    <ul>
        {% for item in pathItems %}
            <li>
                <a href="{{ item.Link }}" {% if forloop.Last %}aria-current="page"{% endif %}>
                    {{ item.Name }}
                </a>
            </li>
            {% if not forloop.Last %}
                <li class="separator"> &gt; </li>
            {% endif %}
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</nav>

This code not only demonstrates how to customize the homepage