What are the application scenarios of the `replace` filter in the `navList` navigation list of AnQiCMS?

In the daily operation of AnQiCMS, we often encounter scenarios where we need to make minor adjustments to the website front-end display, especially in areas where users frequently interact with, such as navigation.【en】The AnQi CMS offers flexible template tags and filters, making these detailed adjustments easy.navListNavigation list inreplaceA practical application of filters, which can help us control the presentation of navigation content more finely.

KnowreplaceFilter

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

navListTags andreplaceCombination point

navListTags are the core tools used by AnQi CMS to generate website navigation lists. It can retrieve our meticulously configured navigation data from the backend, including the navigation titles (Title), subheadings (SubTitle), description (Description) as well as the link (Link) and other information, and present it on the website frontend.

In actual content operation, the navigation data on the back-end may not always be completely consistent with the front-end display due to management or historical reasons.This might affect other features or lead to unnecessary complexity if you directly modify the background data at this point.replaceThe filter becomes a powerful tool for optimizing the frontend navigation display without affecting the backend logic.

The following are some specific application scenarios:

1. Optimize navigation text display to enhance user experience

We may encounter a situation where, for the convenience of management, the navigation title is set to be more detailed or includes some internal identifiers. However, this content appears to be lengthy or unfriendly when directly displayed to users.

For example, the title of a back-end navigation item may be “Company Profile & Culture”, but we would prefer it to be displayed more succinctly as “About Us” in the website navigation bar. 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 accidentally include extra symbols or spaces. To keep the navigation bar tidy,replaceFilter removes it:

{% 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 data on the backend.

2. Dynamically add or modify navigation link parameters for easy 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 entry point users use to access the website.replaceFilter, 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 %}

This way, every time a user clicks on the navigation link, it automatically carries the tracking parameters we preset, greatly facilitating the measurement of marketing effectiveness.

3. Display format of unified brand terms or specific keywords

In environments with collaboration across multiple sites or editors, the spelling and capitalization of brand names or certain professional terms may not be consistent.Although Anqi CMS provides content replacement functionality, it is more flexible and efficient to perform standardized processing directly at the template layer for high-frequency display areas such as navigation.

For example, we hope all navigation titles containing 'AnQiCMS' are displayed strictly in the 'AnQiCMS' uppercase lowercase format, and 'Go language' is standardized to 'GoLang':

【en】Display `twig {% navList navs %}`

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