In website operations, user experience (UX) and search engine optimization (SEO) are always the core concerns.Breadcrumbs navigation plays an indispensable role as an important part of the website structure in both aspects.It not only helps visitors quickly understand their location on the website and effectively prevent getting lost, but also provides a clear guide to the website's hierarchical structure for search engines.

As an experienced website operations expert, I know that even the seemingly minor details can have a significant impact on the overall website effect.AnQiCMS (AnQi Content Management System) is a product that also provides powerful customization capabilities in detail.Today, let's delve into a common issue in website design and operation: how to flexibly control whether the AnQiCMS breadcrumb navigation displays the title of the current page.

Mastering Breadcrumbs: Display Strategy for the Current Page Title

The key to realizing this function lies in the AnQiCMS providedbreadcrumbtemplate tags. This tag is specifically used for generating breadcrumb navigation and comes with a core parameter --title. Thistitle参数正是我们用来控制当前页面标题显示行为的“指挥棒”。

title参数的精妙用法详解：

titleThe flexibility of the parameter is reflected in its ability to accept three different types of values to meet various display needs:

  1. title=true: Display the title of the current page in full.This istitleThe default behavior of the parameter. When you set it totrueWhen, AnQiCMS will fully display the actual title of the current page at the end of the breadcrumb navigation.This is very suitable for content detail pages, such as article, product, or service detail pages, where it is necessary to clearly inform the user of the specific content they are browsing.For example, when browsing an article titled "AnQi CMS Efficient Deployment Guide

    {% breadcrumb crumbs with index="首页" title=true %}
    <ol class="breadcrumb">
        {% for item in crumbs %}
            <li{% if forloop.last %} class="active"{% endif %}>
                {% if forloop.last %}{{ item.Name }}{% else %}<a href="{{ item.Link }}">{{ item.Name }}</a>{% endif %}
            </li>
        {% endfor %}
    </ol>
{% endbreadcrumb %}

    In the above code,{{ item.Name }}It will directly output the complete title of the current page.

  2. title=false: Hide the title of the current page.If you want the breadcrumb navigation to be extremely concise and not display the title of the current page at all, just need totitleparameter settingsfalseEnglish.In this case, the breadcrumb navigation will stop at the direct parent category or parent page of the current page, and the current page itself will not appear as a clickable or displayed item in the breadcrumb.This can make the page look cleaner and less redundant in some websites that pursue minimalist design styles.For example, when visiting the product detail page, the breadcrumb may only display up to "Home > Product Category", without showing the specific product name.

    {% breadcrumb crumbs with index="首页" title=false %}
    <ol class="breadcrumb">
        {% for item in crumbs %}
            <li{% if forloop.last %} class="active"{% endif %}>
                {% if forloop.last %}{{ item.Name }}{% else %}<a href="{{ item.Link }}">{{ item.Name }}</a>{% endif %}
            </li>
        {% endfor %}
    </ol>
{% endbreadcrumb %}

    It is worth noting that even if it is set tofalse, in the loop,forloop.lastit can still help you determine if it is the last item in the breadcrumb trail, but at this point,item.NameOutput is the parent page name of the current page, not the title of the current page.

  3. title="自定义文本"Replace the current page title with specific text.Except for boolean valuestrueandfalse,titleThe parameter also accepts a string value.This means you can display a custom, unified text in the breadcrumbs for the current page instead of its original title.