In the AnQiCMS `navList` navigation list, what are the application scenarios of the `replace` filter?

In the daily operation of AnQiCMS, we often encounter the need to make minor adjustments to the website front-end display, especially in areas such as navigation where users frequently interact.AnQi CMS provides flexible template tags and filters, making these detailed adjustments easy.Today, let's talk aboutnavListIn the navigation listreplaceA practical application of the filter, which helps us control the presentation of navigation content more finely.

Get to knowreplaceFilter

First, let's take a brief review.replaceThe filter. As the name implies in the CMS template, it can help us replace a specific part of a string with the new content we want. Its usage is very intuitive:{{ obj|replace:"旧内容,新内容" }}. Here,objThe string variable you want to operate on, and the 'old content' and 'new content' represent the text you want to be replaced and replaced with, respectively.It is worth noting that if you leave the "new content" blank, the "old content" will be directly removed.

navListwith the tag andreplacepoint of combination

navListTags are the core tool of AnQiCMS used to generate website navigation lists. It can obtain the carefully configured navigation data from the background, including the navigation title (Title), subtitle (SubTitle), description (Description) and link (Link) and other information, and display it on the website front end.

In the content operation, the navigation data on the back-end may not always be consistent with the front-end display due to management or historical reasons.At this point, directly modifying the background data may affect other features or cause unnecessary complexity.replaceThe filter has become a tool to optimize the front-end navigation display without disturbing the background logic.

Here are some specific application scenarios:

1. Optimize navigation text display to enhance user experience

We may encounter such a situation: for the convenience of management, the navigation title is set to be more detailed or contains some internal identifiers, but this content appears long-winded or not user-friendly when displayed directly to the user.

For example, the title of the background navigation item may be "Company Profile & Culture", but on the website navigation bar, we would prefer it to be displayed simply as "About Us". At this point,replaceThe filter can be put to use:

{% navList navs %}
<ul>
    {%- for item in navs %}
        <li>
            <a href="{{ item.Link }}">
                {{ item.Title|replace:"公司简介与文化,关于我们" }}
            </a>
            {# 如果有二级导航，也可以类似处理 #}
            {%- if item.NavList %}
            <dl>
                {%- for inner in item.NavList %}
                    <dd>
                        <a href="{{ inner.Link }}">
                            {{ inner.Title|replace:"产品详情页,产品展示" }}
                        </a>
                    </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

For example, some navigation titles may have accidentally included extra symbols or spaces. To keep the navigation bar tidy, we can utilizereplaceFilter it out:

{% navList navs %}
<ul>
    {%- for item in navs %}
        <li>
            <a href="{{ item.Link }}">
                {# 移除标题中的叹号和多余空格 #}
                {{ item.Title|replace:"!, "|replace:"  ," }}
            </a>
        </li>
    {% endfor %}
</ul>
{% endnavList %}

In this way, we can ensure that the user sees the most optimized and concise navigation text without changing the original background data.

2. Dynamically add or modify navigation link parameters for data tracking

When engaging in content marketing or traffic analysis, we may need to add specific tracking parameters (UTM parameters or other custom parameters) to navigation links to distinguish which navigation entry the user entered the website through. UsingreplaceFilter, we can easily achieve this goal.

Suppose we want all navigation links ending with.htmlto be automatically added.?source=navparameter:

{% navList navs %}
<ul>
    {%- for item in navs %}
        <li>
            {# 为链接添加追踪参数 #}
            <a href="{{ item.Link|replace:".html",".html?source=nav" }}">
                {{ item.Title }}
            </a>
            {%- if item.NavList %}
            <dl>
                {%- for inner in item.NavList %}
                    <dd>
                        <a href="{{ inner.Link|replace:".html",".html?source=subnav" }}">
                            {{ inner.Title }}
                        </a>
                    </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

In this way, every time the user clicks on the navigation link, it will automatically carry our preset tracking parameters, greatly facilitating the measurement of marketing effectiveness.

3. The display format of unified brand words or specific keywords

In an environment where collaboration occurs across multiple sites or among multiple editors, the spelling and capitalization of brand names or certain specialized terms may not be consistent.Although Anqi CMS provides content replacement functionality, it is more flexible and efficient to standardize processing directly at the template layer for high-frequency display areas like navigation.

For example, we hope that all navigation titles of "AnQiCMS" are displayed in strict accordance with the uppercase format "AnQiCMS", and "Go language" is standardized as "GoLang":

`twig\n{% navList navs %}

{%- for item in navs %}
    <li>
        <a href="{{ item.Link }}">
            {# 统一品牌词和技术术语的显示格式 #}
            {{ item.Title