How can I clearly display the multi-selected values (array) in the custom field of AnQiCMS backend through the `join` filter on the frontend page?

The AutoCMS provides great convenience for website operators with its flexible content model and powerful customization features.In daily content management, we often encounter situations where we need to add multiple choice attributes to articles or products, such as a product may have various colors, different sizes, etc.How can we present them clearly and beautifully on the front-end page when this information is stored in the background as a multi-select value through custom fields?

Understanding the Multi-select Custom Fields in AnQi CMS

In the AnQi CMS backend, we can manage content models to create custom fields for different content types (such as articles, products).The field of "Multiple Choice" type allows content editors to select multiple preset values for a content item.For example, define a 'Color' field for a product and set optional values 'Red', 'Blue', 'Green', and you can select 'Red' and 'Blue' at the same time during editing.

When these multiple-choice values are stored, the system usually saves them in the form of an array (or a string connected by a specific delimiter, but the front-end template engine will recognize it as an iterable list). Directly outputting this field in the front-end template will often show unprocessed raw data, such as["红色", "蓝色"]or红色,蓝色This is not very beautiful and user-friendly.

Access custom field data in the front-end template

To display these custom fields on the frontend page, we first need to retrieve them using the template tags provided by the Aqiyi CMS. The most common way to usearchiveParamsLabel to iterate over all custom parameters, or access directly through the field name.

For example, in the document detail page, we can get all custom fields like this:

{% archiveParams params %}
    {% for item in params %}
        <div>
            <span>{{item.Name}}：</span>
            <span>{{item.Value}}</span>
        </div>
    {% endfor %}
{% endarchiveParams %}

If your multiple choice field name isproductFeatures, you can also try to access it directly:

{% archiveDetail productFeatures with name="productFeatures" %}
{{ productFeatures }}

However, whether through looping or direct access, the output of the multiple choice fieldproductFeaturesofitem.ValueorproductFeaturesmay still be similar["特点A", "特点B", "特点C"]This is the original array string. This is the place we need to optimize.

ingeniously utilizejoinFilter to clearly display multiple selection values

In order to convert this array-shaped raw data into an easy-to-read string, the template engine of Anqi CMS provides a very practical filter: join.joinThe function of the filter is to concatenate all elements of an array (or any iterable object) into a single string with the connector you specify.

joinThe basic usage of the filter is{{ obj|join:"连接符" }}.objThis is the array or list you need to handle, while"连接符"is the string you want to insert between elements, such as commas, colons, slashes, or any custom text.

Now, let's see how to transformjoinFilter applied to the display of the multi-select custom field.

Scenario one: ThrougharchiveParamsTraverse to display all custom fields

Assuming you have a multi-select field named "Product Features

{% archiveParams params %}
    {% for item in params %}
        {% if item.FieldName == "productFeatures" %} {# 假设 productFeatures 是您的多选字段的调用字段名 #}
            <div>
                <span>{{item.Name}}：</span>
                {# 将多选值用中文顿号连接，使其更符合阅读习惯 #}
                <span>{{ item.Value|join:"、" }}</span>
            </div>
        {% else %}
            {# 其他非多选字段的正常显示逻辑 #}
            <div>
                <span>{{item.Name}}：</span>
                <span>{{item.Value}}</span>
            </div>
        {% endif %}
    {% endfor %}
{% endarchiveParams %}

In the above code, we first judge the current loop toitemwhether it is our multiple choice field. If it is, we thenitem.ValueApplyjoin:"、"Filter, connect its elements with “、”. This way, the front-end page can display “Product features: Waterproof, Shockproof, Smart Connection”, rather than the original array format.

Scenario two: Directly access and display a known multi-select custom field

If you know the name of a specific multi-select field (for example, its calling field isproductFeatures），You can obtain and display it more directly:

{% archiveDetail productFeatures with name="productFeatures" %}
    {% if productFeatures %} {# 检查字段是否有值，避免显示空行 #}
        <div>
            <span>产品特点：</span>
            {# 使用斜杠和空格作为连接符，适用于产品参数等场景 #}
            <span>{{ productFeatures|join:" / " }}</span>
        </div>
    {% endif %}

This code first retrieves the latest 5 articles byarchiveDetailtags to getproductFeaturesField value, then apply it directlyjoin:" / "Filter. So, if the field is selected with “Feature A” and “Feature B”, the product features will be displayed on the page as “Product Features: Feature A / Feature B”.

PassjoinFilter, we can convert the complex data structure of the back-end into clear and readable display content on the front-end.You can choose different connectors (such as commas, colons, slashes, or any text) according to your actual needs to make your website content more professional and beautiful.

---

Common Questions (FAQ)

1.joinWhat types of data can the filter handle? Is it effective for all fields? joinThe filter is mainly used to process array (slice) or data types that can be recognized as a list internally (for example, a string separated by commas). In Anqi CMS, the values of multiple-choice custom fields are usually recognized as iterable lists by the template engine, thereforejoinThe filter can be applied to them well. For fields of non-list types such as single-line text, numbers, etc.,joinThe filter may treat it as a list with a single element (for example{{ "hello"|join:"-" }}May outputh-e-l-l-o），therefore it is recommended to use it only on fields that are indeed of multiple-choice or list type.

2. If my multiple-choice field does not have any selected values in the background, the front-end applicationjoinAfter the filter, what will be displayed?When a multi-select field has no selected values, its value is typically an empty array or an empty list. Applying this to an empty listjoinFilter, by default it will return an empty string. If you do not want to display blank, you can use conditional judgment in the template ({% if productFeatures %}) to control, or combinedefaultThe filter sets a default display text, for example{{ productFeatures|join:"、"|default:"暂无" }}.

3.joinfilters andsplitWhat are the differences between filters? When would they be usedsplit? joinThe filter concatenates array elements into a string,splitThe filter works in the opposite way, it splits a string into an array according to the specified delimiter “”. If you store a plain text string (not a list generated by a multi-select field automatically) in the custom field on the backend, and this string is represented by multiple values using a specific delimiter (such as a comma), then you may need to usesplitThe filter splits this string into an array and then uses itjoinThe filter displays it in another way, for example:{{ "值1,值2,值3"|split:","|join:" / " }}It will output值1 / 值2 / 值3.