In website operation, breadcrumb navigation is one of the key elements to improve 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.AnQi CMS provides a powerful and flexible template tag system, wherebreadcrumbTags 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'saddThe filter can play its unique role.

breadcrumbThe tag can intelligently generate the navigation path of the current page. It usually outputs a list containing multiple navigation items, each of which hasName(display name) andLink(Link address) two basic attributes. For example, a basic breadcrumb navigation code might 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 at the current page.

AndaddA filter, as the name implies, is mainly used to add numbers or concatenate strings. Its usage is very intuitive, usually{{ 变量 | add:附加值 }}. When processing strings, it appends additional values to the content of the variable. It is this feature that makesaddfilters particularly useful when dynamically building breadcrumb path segments.

Flexible application in breadcrumb navigationaddFilter

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

Dynamically customize the "home" text of the breadcrumb.

breadcrumbTags support throughindexParameters to set the starting text of the breadcrumb navigation, usually "Home" or "Home". If we want to personalize the text more, for example, to display as "My website > Home", we can combineaddTo implement a filter:

{% 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 navigation item of the breadcrumb will dynamically display as "My website > Home", without writing the entire string in the template.

Add dynamic tracking parameters 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 links in the breadcrumb navigation to identify where the clicks come from:

{% 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 %}

By{{ 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 the breadcrumb display name to provide additional information

Sometimes, we may want to include some contextual information in the display name of the breadcrumb navigation. For example, on the article detail page, add a suffix to the last item of the breadcrumbs (i.e., the current article title) to indicate that this 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.

Useful tips and precautions

  • Combined with logical labels:addFilters are usually used withif/forloop.LastUse logical tags in combination to achieve more fine-grained dynamic control. For example, add link parameters only for non-current pages, or add special text only for the current page.
  • Pay attention to URL encoding.When the concatenated string contains special characters, such as those in URL parameters, such as&It usually does not require additional manual encoding because the Anqi CMS template engine handles most of the URL validity. However, in certain cases, if the content to be concatenated itself needs URL encoding, consider usingurlencodefilter preprocessing.
  • SEO impact: For links that add tracking parameters, modern search engines typically recognize and ignore these parameters, and do not consider them as duplicate content.But excessive or inappropriate link modifications may still pose SEO risks, and it is recommended to operate cautiously and conduct tests.
  • readability: AlthoughaddThe filter function is powerful, but overly complex concatenation logic can reduce the readability of the template. It is considered to preprocess the data at the controller layer when necessary, and then pass it to the template.

In summary, of 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, thus optimizing the user experience and data analysis effect.

Frequently Asked Questions (FAQ)

1.addCan the filter only be used for string concatenation?

Not at all.addThe filter can not only be used for string concatenation, but also for numeric addition operations. For example,{{ 5|add:2 }}will output7When adding a string with a mixed number, if the number can be converted to a string, it will try to concatenate the strings.If the conversion fails, it may only output the original string or ignore the parts that cannot be processed.

2. Used in breadcrumb linksaddWill adding parameters to the filter have a negative impact on the website's SEO?

Generally speaking, 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 and causing duplicate content issues.However, if the parameters added change the actual content of the page or lead to a large number of different URLs pointing to the same content, it may be necessary to perform additional SEO processing, such as usingrel="canonical"tags to specify standard URLs.

3. BesidesaddFilter, what are some filters in Anq CMS that can be used for dynamic string processing?

AnQi CMS provides a rich set of string processing filters, such as:

  • replace: Used to replace specific substrings in a string.
  • cut: Used to remove specified characters from a string.
  • upper/lower: Convert a string to uppercase or lowercase.
  • truncatechars/truncatewords: Truncate a string by character or word and add an ellipsis.
  • urlencodeEncode URL parameters. These filters can help you handle and display text content more flexibly in templates.