How to combine `split` filter with `urlencode` filter to handle multi-value strings in URL parameters?

In the powerful template system of Anqi CMS, flexibly handling and displaying website data is the key to improving user experience and SEO effectiveness.Among them, converting a specific format string stored in the database into a secure and usable multivalue string in the URL parameters is a common requirement.splitandurlencodeFilter, solve this practical problem.

Understanding core tools:splitandurlencodeFilter

In AnQiCMS template language, filters are powerful assistants for data processing.They allow us to format, convert, or clean data directly at the template level without modifying the backend code.

splitFilter: A tool for turning whole numbers into zeros

Imagine that you might be in the background content management, to facilitate batch entry or management, storing multiple tags of an article (such as:When you want to generate a separate search link for each tag on the front-end page, it is obviously not feasible to use this string containing multiple values.

At this time,splitThe filter comes into play. Its function is to split a string into an array (or list) according to the delimiter you specify.

Basic usage example:If you have a string"TagA, TagB,TagC"and you want to split it:

{% set tagString = "TagA, TagB,TagC" %}
{% set tagArray = tagString|split:"," %} {# 注意，这里我们用逗号作为分隔符 #}

{# 此时 tagArray 的内容大致是 ["TagA", " TagB", "TagC"] #}

BysplitFilter, we successfully transformed a string containing multiple values into individual elements that can be independently operated on.

urlencodeFilter: Ensure the completeness and safety of the link

Once you split the string into individual elements, the next step is to embed them as parameters in the URL.However, URLs have strict restrictions on characters.&/?/=If it appears directly in the URL, it may disrupt the structure of the URL, causing the link to fail and even trigger security issues.

urlencodeThe filter's role is to perform URL encoding on strings, converting all unsafe characters to percent encoding (such as spaces becoming%20Ensure the validity and security of the URL. This is an essential step when constructing dynamic URLs.

Basic usage example:If you have a string that may contain spaces or special characters, you need to put it in the URL parameters:

{% set keyword = "安企CMS 教程" %}
{% set encodedKeyword = keyword|urlencode %} {# 此时 encodedKeyword 的内容大致是 "安企CMS%20教程" #}

{# 如果直接使用：<a href="/search?q=安企CMS 教程">...</a> 链接会出问题 #}
{# 编码后使用：<a href="/search?q={{ encodedKeyword }}">...</a> 链接是安全的 #}

Combine cleverly: handle multiple-value strings in URL parameters:

Now, we have the ability to split multi-value stringssplitand ensure URL safetyurlencode. Let's demonstrate how they work together in a real-world scenario.

Assuming your AnQiCMS website has a custom field calledarticle_keywordsWhere it stores multiple keywords of the article, separated by commas, for example: 'website optimization, SEO skills, traffic increase'.You hope to generate a separate search link for each keyword below the article detail page, clicking on which can search for all articles within the site that contain the keyword.

Here is the template code to implement this feature:

{# 假设当前在文章详情页，并且文章有一个名为 'article_keywords' 的自定义字段 #}
{% archiveDetail keywordsString with name="article_keywords" %}

{% if keywordsString %}
    <div class="article-tags-section">
        <span class="section-label">相关搜索:</span>
        {# 将逗号分隔的关键词字符串切割成数组 #}
        {% set keywordList = keywordsString|split:"," %}
        
        {% for keyword in keywordList %}
            {# 对每个关键词进行前后空格去除，因为用户输入时可能有多余空格 #}
            {% set cleanKeyword = keyword|trim %}
            
            {# 确保关键词不为空（例如，如果有",,"这样的输入，split后可能会产生空字符串） #}
            {% if cleanKeyword %}
                {# 对清理后的关键词进行 URL 编码，然后构建搜索链接 #}
                <a href="/search?q={{ cleanKeyword|urlencode }}" class="tag-link">
                    {{ cleanKeyword }}
                </a>
            {% endif %}
        {% endfor %}
    </div>
{% endif %}

Code analysis:

1. {% archiveDetail keywordsString with name="article_keywords" %}: This line of code retrieves the field namedarticle_keywordsCustom field value and store it inkeywordsStringthe variable.
2. {% set keywordList = keywordsString|split:"," %}:splitFilter appears. It willkeywordsString(For example: "Website optimization,SEO skills,traffic increase") split by comma,Split to generate an arraykeywordListincluding["网站优化", " SEO技巧", "流量提升"].
3. {% for keyword in keywordList %}we traverse this array, processing each keyword.
4. {% set cleanKeyword = keyword|trim %}introducingtrimA filter that removes extra spaces from both ends of a string. This is an important step because users may getsplitafter entering" SEO技巧"Such a string with leading spaces, direct encoding will make the search results inaccurate.trimEnsures the purity of the keywords.
5. {% if cleanKeyword %}This is a simple conditional judgment, used to skip empty keywords that may be caused by consecutive commas (such as
6. <a href="/search?q={{ cleanKeyword|urlencode }}" class="tag-link"> {{ cleanKeyword }} </a>Finally, we useurlencodeThe filter has cleaned upcleanKeywordEncoded, then add it as aqparameter to/searchthe path, building a complete, secure and usable search link.

By combining the above, the originally difficult-to-directly-utilize stringThis handling method not only makes the display of dynamic content more flexible, but also greatly improves the user experience and robustness of internal links on the website.

Summary

In AnQiCMS template,splitandurlencodeThe filter is a golden combination for handling multi-value strings and safely constructing URL parameters.splitResponsible for decomposing complex data,trimEnsure data purity,urlencodeThen clothe the data with a URL-safe 'disguise'. Mastering their combination can make your website content more dynamic and interaction more smooth,