How to dynamically add language parameters in the `add` filter of the `languages` tag that returns multilingual site links?

Under the flexible multi-language support of AnQiCMS, it has become very convenient to provide content to users worldwide. The built-in filter can be put to good use.languagesThe tag can easily list all language versions supported by your website and their corresponding links.However, in certain scenarios, we may not only want to provide language switching functionality, but also need to dynamically add additional parameters to these multilingual links, such as for marketing tracking, A/B testing, or loading personalized content in specific languages.addfilter can be put to good use.

Understanding the basic multi-language link foundation of AnQiCMS

First, let's reviewlanguagesBasic usage of the tag. This tag is mainly used to retrieve all language versions configured on your website, and it will return a list ofitemAn array of objects, eachitemrepresents a language site and provides such asLink(the complete URL of the language site),LanguageName(language name),Language(language code) and other information.

This is a typicallanguagesTag usage example, used to display language switching options on the page:

{%- languages websites %}
{%- if websites %}
<div>
    <span>切换语言：</span>
    {%- for item in websites %}
    <a href="{{item.Link}}">
        {%- if item.LanguageIcon %}
        <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}图标" />
        {%- else %}
        {{item.LanguageEmoji}}
        {% endif %}
        {{item.LanguageName}}
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endLanguages %}

This code will traverse all configured language sites and generate a standard link for each site<a>.

The wonder of the 'add' language parameter filter for dynamic addition

Now, assume we have a requirement: when the user switches languages, in addition to jumping to the corresponding language page, we also want to append one to the URL?source=language_switcherThe parameter, in order to track whether the user jumps through the language switcher. Or, we hope to explicitly add the language code to the link, such as?lang=enor?lang=zh-cn.

At this time,addThe filter is particularly important.addThe filter, as its name suggests, is mainly used to 'add' two values. In the context of strings, it will concatenate the two strings.

For example,{{ "Hello "|add:"World!" }}It will output.Hello World!.

To dynamically add the language parameter toitem.Link, we can takeitem.Linkas the first operand, and the string parameter to be added as the second operand, throughaddthe filter for concatenation.

Example 1: Add a fixed tracking parameter

If you want to add a fixed tracking parameter to the link switch for all languages, you can do this:

{%- languages websites %}
{%- if websites %}
<div>
    <span>切换语言：</span>
    {%- for item in websites %}
    <a href="{{ item.Link|add:"?source=language_switcher" }}">
        {%- if item.LanguageIcon %}
        <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}图标" />
        {%- else %}
        {{item.LanguageEmoji}}
        {% endif %}
        {{item.LanguageName}}
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endLanguages %}

In the above example,item.Link|add:"?source=language_switcher"Concatenate the original link of each language site with the subsequent tracking parameter string.

Example two: Add dynamic language code parameters.

If you want the current language code to be included in the link, for example?lang=zh-cnor?lang=en, then we need to concatenate the parameter name withitem.Language(the code of the current language). This can be achieved by chainingaddfilters:

{%- languages websites %}
{%- if websites %}
<div>
    <span>切换语言：</span>
    {%- for item in websites %}
    <a href="{{ item.Link|add:"?lang="|add:item.Language }}">
        {%- if item.LanguageIcon %}
        <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}图标" />
        {%- else %}
        {{item.LanguageEmoji}}
        {% endif %}
        {{item.LanguageName}}
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endLanguages %}

Here, we first concatenateitem.Linkwith"?lang="then concatenate the result withitem.Language(for example, "en", "zh-cn") and finally formhttps://example.com/en/?lang=ensuch a dynamic link.

More applications in actual scenarios

This ability to dynamically add parameters is very practical in many scenarios:

• A/B testing:You can use it to|add:"?test_variant=A"or|add:"?test_variant=B"To distinguish between different language versions of test groups.
• Personalized content loading:If your frontend logic needs to load specific components or content based on URL parameters, this approach provides great flexibility.
• Marketing in specific regions or channels:Add identification parameters to language pages entering from specific channels (such as social media, email marketing), which helps to analyze traffic sources and user behavior more accurately.

While usingaddWhen concatenating URL parameters with a filter, you need to pay attention to URL encoding and existing parameters issues. Ifitem.Linkit may already contain a question mark (?) and other parameters, use them directly?It will result in a URL format error. In this case, you need a more complex logic to determine whether to use?Or&. AnQiCMS's template engine also provides judgment and conditional statements, for exampleifTags andcontainA filter that can help you build a more robust URL. But for most simple direct parameter addition requirements,addThe filter is enough to quickly and efficiently achieve your purpose.

By flexible applicationlanguagesTags andaddThe filter can provide a richer, more intelligent user experience for multilingual websites and better meet the needs of marketing and data analysis.

Frequently Asked Questions (FAQ)

1. Why do I need to dynamically add language parameters instead of using them directly?item.Link?Answer:item.LinkThe URL provided is typically the base URL of the language site, without additional dynamic information. Adding dynamic parameters can help you achieve various advanced features, such as:

   • Traffic tracking and analysis:Mark the user's entry through which language switcher or specific entry point for convenient marketing attribution.
   • A/B testing:Test different design or content variants simultaneously across different language versions, distinguishing test groups through URL parameters.
   • Personalized content:Indicate that the front-end script loads personalized content or features corresponding to specific parameters.
   • SEO Optimization:Coordinate with some tools that require the explicit display of language codes in the URL.

2. Question: Ifitem.LinkAlready contains a question mark (?Use parameters such as|add:"?param=value"What problems might there be?Answer: Use directly|add:"?param=value"This will cause two question marks to appear in the URL, for examplehttps://example.com/en/?key=val?param=valueThis will disrupt the structure of the URL, which may cause the page to load incorrectly or the parameters to be unparseable.The recommended approach is:Before adding parameters, it is advisable to judge first.item.LinkDoes the question mark already exist. If it does, then use&Connect the new parameter; if it does not exist, then use?Connect. This usually requires more complex template logic, such as combiningifTags andcontainUse a filter to build a URL. An example is as follows:

   {% set separator = "?" %}
   {% if item.Link|contain:"?" %}{% set separator = "&" %}{% endif %}
   <a href="{{ item.Link|add:separator|add:"param=value" }}">...</a>
   

3. Q: Can IaddAdd multiple parameters in the filter?A: Yes. You can use chaining calls.addA filter to add multiple parameters. Make sure to use subsequent parameters.&Symbolic connection, while the first parameter is used according to the rules mentioned above.?or&。“For example:“`twig {% set separator = “?” %} {% if item.