How to create a dynamic breadcrumb navigation using the `breadcrumb` tag and customize the home page name and title display?

In website operation, a clear navigation path is crucial for user experience and search engine optimization (SEO).Breadcrumb Navigation is like a small map of a website, allowing visitors to always understand their own location and easily return to the previous page.Today, let's delve into how to make full use of the powerful features in Anqi CMS.breadcrumbLabel, create dynamic breadcrumb navigation, and customize the home page name and title display according to our needs.

Know about AnQi CMSbreadcrumbTag

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

The usage of this tag is very consistent with the Anqi CMS template engine style, which is based on the 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, crumbsThis is the variable name we give to the breadcrumb navigation list, you can name it freely.{% for item in crumbs %}In the loop, eachitemContainsName(link name) andLinkTwo fields, (link address), for convenience in building visual navigation elements.

Create dynamic breadcrumb navigation

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

A basic breadcrumb navigation structure may 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 traversecrumbsEach breadcrumb item in the array generates a link.forloop.LastIt is 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>)。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 Anqi CMS breadcrumb navigation is "Home page". If you want to modify it to a more characteristic name according to the brand style or target user group of the website, such as "My Blog", "Company Homepage", or a specific brand name,breadcrumblabel'sindexParameters can be put to good use.

Just inbreadcrumbthe tag withindexParameters and specify the name you want:

<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', consistent with the overall style of the website.

Control title display: Flexible to meet different page needs

On 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 providedtitleParameters, allowing you to control the display of this section more flexibly.

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 want the title of the current page to be displayed in the breadcrumbs, 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 you need to simplify display or unify style, for example, at the end of the breadcrumb of all article detail pages, it displays "Article Details" instead of the specific article title.

Here 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 effects 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>

On the article detail page, it will only display “My site > Category name”, and 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>

On the article detail page, it 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 flexible applicationindexandtitleParameters, you can create a breadcrumb navigation that is both practical and beautiful based on the brand strategy of the website and the user experience goals. Here is an example that combines customized home page 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