What are the typical applications of the `split` filter when processing form data submitted by users (such as the values of checkboxes)?

AnQi CMS, with its flexible content model and powerful template system, provides great convenience for us to manage website content.In daily operations, we often encounter the need to process form data submitted by users, especially those fields that allow for multiple selections, such as product specifications, article tags, or user interests.These data are usually stored in the background as a string, such as “red, blue, green” or “sports, travel, reading”.How can we beautifully and independently display these collective data in front-end templates, which has become a problem that content operators need to face.

It is fortunate that the AnQi CMS built-in template engine provides many practical filters, wheresplitThe filter is exactly the tool to solve such problems.It can easily split a string in a specific format into an array with a specified delimiter, allowing us to individually handle and display each element in the template.

splitFilter: The key to break down collective data into individual units

Imagine that we have defined a multi-select field for 'Color' in the product model, and the user has checked 'Red', 'Blue', and 'Green' while submitting the form.This information is likely to be saved in the database as a comma-separated string of 'red, blue, green'.If we directly output this string in the template, it will display

This is,splitThe filter comes into play. Its basic function is to receive a string and a delimiter, and then return an array containing multiple substrings. For example,{{ product.colors|split:"," }}This line of code can convert the string 'red, blue, green' into an array containing["红色", "蓝色", "绿色"]Once the data becomes an array, we can use loop labels (such asforTraverse each element and display independently according to the design requirements.

Typical application scenarios

1. Handling values for Checkbox and Multi-select Dropdown

This issplitThe most common application scenarios of filters.When a custom field of the 'Multiple Choice' type is set for the content model or comment form, no matter how many items the user selects, the final string received by the backend may be a concatenation of specific characters (such as commas, semicolons, or pipes).

For example, a product detail page may need to display various features of the product, such as 'waterproof, dustproof, fast charging'. If these features are stored inproduct.featuresIn the field, separated by commas, we can display them in the template like this:

<div class="product-features">
    <strong>产品特性：</strong>
    {% set features = product.features|split:"," %}
    {% if features %}
        <ul>
            {% for item in features %}
                {% if item|trim %} {# 确保不显示空元素 #}
                    <li>{{ item|trim }}</li>
                {% endif %}
            {% endfor %}
        </ul>
    {% else %}
        <span>暂无特性信息</span>
    {% endif %}
</div>

Each feature is wrapped independently in this way:<li>In tags, it is convenient for us to style the list items, such as adding icons, borders, or different background colors.

2.精细化展示文章标签（Tags）

Although AnQi CMS provides built-in Tag management functionality, we may also store additional, closely related keyword lists in custom fields sometimes.For example, a technical article may have system-level tags as well as a 'related technology stack' field, which includes 'Go language, Vue.js, MySQL', etc.

To display these technology stacks as independent tags rather than a long string, we can also usesplit:

<div class="tech-stack-list">
    <strong>相关技术栈：</strong>
    {% set tech_tags = archive.techStack|split:"、" %} {# 假设用顿号分隔 #}
    {% if tech_tags %}
        {% for tag in tech_tags %}
            {% if tag|trim %}
                <span class="tech-tag">{{ tag|trim }}</span>
            {% endif %}
        {% endfor %}
    {% else %}
        <span>暂无相关技术信息</span>
    {% endif %}
</div>

Here we assume a custom fieldtechStackThe value is 'Go language, Vue.js, MySQL', throughsplit:"、"split it, and then combinespantags and CSS styles, you can present independent and beautiful tag effects.

3. User-defined list information processing

Sometimes, we may want users to enter a series of custom items in a single line text field, such as a 'participant list' for an event or an 'ingredient list' for a recipe, using a specific symbol (such as a semicolon);）separated.splitThe filter can also handle such non-standardized list data very well.

Suppose we have a single-page namedingredientsThe custom field, the user entered 'flour; egg; milk; sugar', and we can display it like this:

<div class="recipe-ingredients">
    <h3>所需配料：</h3>
    {% set ingredients_list = page.ingredients|split:";" %}
    {% if ingredients_list %}
        <ol>
            {% for item in ingredients_list %}
                {% if item|trim %}
                    <li>{{ item|trim }}</li>
                {% endif %}
            {% endfor %}
        </ol>
    {% else %}
        <p>暂无配料信息。</p>
    {% endif %}
</div>

This processing method makes long strings easy to read and format, greatly enhancing the user experience.

splitIn conjunction with other filters and tags

splitFilters are often not used in isolation, they are often combined with other template tags and filters to achieve more powerful functionality:

• forLoop tags：This issplitThe golden partner of filters, used for iterationsplitThe array generated later, rendering each element individually.
• ifLogical Judgment Tag: When traversing an array, we often use{% if item %}To determine if the current element is empty, to avoid rendering unnecessary blank items, especially when there are consecutive delimiters in the original string (such as"A,,B") or delimiters at the beginning and end (such as",A,B,").
• trimFilter: InsplitAfter that, each element of the array may contain leading or trailing spaces (for example, " red ").{{ item|trim }}You can remove these unnecessary spaces to make the display cleaner.
• lengthFilter: can be used to judgesplitWhether the array at the end is empty, thus deciding whether to display a certain block, or display a prompt such as 'No data available'.
• joinFilter: withsplitOn the contrary,joinThe array elements can be reassembled into a string.This is very useful in some scenarios, such as converting multiple user selections from an array format back to a string, which is convenient for displaying as a default value in another form.

Summary

splitThe filter is a powerful tool used in the development of AnQi CMS templates for processing users' submission of multi-value form data.It breaks down complex string data into manageable arrays, allowing for precise control and flexible display of each independent data item.