In website operation, breadcrumb navigation is one of the key elements to enhance user experience and website SEO performance.It clearly shows the user's position on the website and provides a convenient way to return to the previous level page.breadcrumbTags can help us easily implement breadcrumb navigation. But if we need to dynamically adjust the path text or links in the breadcrumb navigation, the Anqi CMS isaddThe filter can play its unique role.

breadcrumbThe label can intelligently generate the navigation path of the current page. It usually outputs a list containing multiple navigation items, each withName(Display Name) andLinkTwo basic attributes. For example, a basic breadcrumb navigation code may look like this:

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

This code will render a navigation path starting with 'Home' and ending with the current page.

whileaddThe filter, as the name suggests, is mainly used for adding numbers together or concatenating strings. Its usage is very intuitive, usually{{ 变量 | add:附加值 }}. When processing strings, it appends the additional value to the end of the variable content. It is this feature that makesaddthe filter particularly useful when dynamically building breadcrumb path segments.

In the breadcrumb navigation, use it flexiblyaddFilter

Imagine that we may need to dynamically add additional information to a certain part of the breadcrumb navigation or modify its link according to a specific scenario.addThe filter can be used here.

Customize the "Home" text of the breadcrumb dynamically.

breadcrumbTags support throughindex参数来设置面包屑导航的起始文本，通常是“首页”或“Home”。如果我们想让这个文本更加个性化，例如显示为“我的网站 > 首页”，就可以结合addFilter to implement:

{% breadcrumb crumbs with index="我的网站"|add:" > 首页" %}
<nav class="breadcrumb">
    <ol>
        {% for item in crumbs %}
            <li>
                {% if forloop.Last %}
                    <span>{{ item.Name }}</span>
                {% else %}
                    <a href="{{ item.Link }}">{{ item.Name }}</a>
                {% endif %}
            </li>
        {% endfor %}
    </ol>
</nav>
{% endbreadcrumb %}

In this way, the first breadcrumb navigation item will be dynamically displayed as “My website > Home”, without having to hardcode the entire string in the template.

Add tracking parameters dynamically to breadcrumb links

In website operation, we often need to track the source of user clicks to analyze traffic and optimize user paths. For example, we can dynamically add a UTM tracking parameter to all breadcrumb navigation links to identify that these clicks come from the breadcrumb navigation:

{% breadcrumb crumbs with index="首页" %}
<nav class="breadcrumb">
    <ol>
        {% for item in crumbs %}
            <li>
                {% if forloop.Last %}
                    <span>{{ item.Name }}</span>
                {% else %}
                    {# 为每个非当前页面的链接添加追踪参数 #}
                    <a href="{{ item.Link|add:"?utm_source=breadcrumb&utm_medium=nav" }}">{{ item.Name }}</a>
                {% endif %}
            </li>
        {% endfor %}
    </ol>
</nav>
{% endbreadcrumb %}

Pass{{ item.Link|add:"?utm_source=breadcrumb&utm_medium=nav" }}We successfully appended tracking parameters to each breadcrumb link dynamically without affecting the original link.This provides great convenience for data analysis without modifying the underlying URL structure.

Dynamically adjust breadcrumb display names to provide additional information

Sometimes, we may wish to include some contextual information in the display name of breadcrumb navigation. For example, on the article detail page, add a suffix to the last item in the breadcrumbs (i.e., the current article title) to indicate that it is the 'current article':

{% breadcrumb crumbs with index="首页" %}
<nav class="breadcrumb">
    <ol>
        {% for item in crumbs %}
            <li>
                {% if forloop.Last %}
                    {# 为当前页面的名称添加“（当前）”后缀 #}
                    <span>{{ item.Name|add:" (当前)" }}</span>
                {% else %}
                    <a href="{{ item.Link }}">{{ item.Name }}</a>
                {% endif %}
            </li>
        {% endfor %}
    </ol>
</nav>
{% endbreadcrumb %}

This will clearly tell the user which page they are browsing visually.

Tips and precautions for use

  • Combined with logical tags:addFilters are usually used withif/forloop.LastUse logic labels together to achieve more refined dynamic control. For example, only add link parameters for non-current pages, or only add special text for the current page.
  • Pay attention to URL encoding.When the concatenated string contains special characters, such as in URL parameters,&English, usually does not require additional manual coding, because the security CMS template engine handles most URL validity. But in specific situations, if the content to be concatenated itself needs URL encoding, consider usingurlencodeFilter performs preprocessing.
  • SEO impactFor links adding tracking parameters, modern search engines usually recognize and ignore these parameters, and do not consider them as duplicate content.But excessive or inappropriate link modifications may still pose SEO risks, it is recommended to operate cautiously and conduct tests.
  • ReadabilityAlthoughaddThe filter function is powerful, but overly complex concatenation logic will reduce the readability of the template. Consider preprocessing the data at the controller level if necessary, and then passing it to the template.

In summary, the Anqi CMS'saddThe filter provides a simple and effective means for us to implement dynamic content in breadcrumb navigation.Whether it is adjusting the display text or modifying the link, it can help website operators more flexibly control page elements, thereby optimizing user experience and data analysis effects.

Common Questions (FAQ)

1.add过滤器只能用于字符串拼接吗？

并非如此。add过滤器不仅可以用于字符串的拼接，也可以用于数字的相加运算。例如，“{{ 5|add:2 }}it will output:7.When adding a string and a number, if the number can be converted to a string, it will attempt to concatenate the strings; if it cannot be converted, it may only output the original string or ignore the parts that cannot be processed.

2. In the breadcrumb links usageaddWill adding parameters to the filter have a negative impact on the website's SEO?

Generally, adding tracking parameters (such as ?utm_source=...The negative impact on SEO is very small, even negligible.Mainstream search engines usually recognize and ignore tracking parameters in URLs to avoid treating them as different pages, which can lead to duplicate content issues.rel="canonical"Label to specify the standard URL.

3. BesidesaddFilter, what other filters can be used in Safe CMS for string dynamic processing?

Anqi CMS provides a variety of string processing filters, such as:

  • replace: Used to replace the specific substring in the string.
  • cut：Used to delete specified characters from a string.
  • upper/lower：Converts a string to uppercase or lowercase.
  • truncatechars/truncatewords：Truncates a string by characters or words and adds an ellipsis.
  • urlencodeEnglish translation: : URL parameters are encoded. These filters can help you handle and display text content more flexibly in the template.