How to customize fields in the AnQiCMS backend where a field stores multiple choices (an array), and clearly display them on the frontend page using the `join` filter?

AnQi CMS provides great convenience for website operators with its flexible content model and powerful custom 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.When this information is stored in the background through custom fields in the form of multiple-choice values, how to display them in a clear and beautiful way on the front-end page has become the problem we need to solve.

Understand the multiple custom fields of AnQi CMS

In the Anqi CMS backend, we can manage content models to create custom fields for different content types (such as articles, products).Among the 'multiple choice' type fields, the content editor is allowed 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 check “Red” and “Blue” at the same time when editing.

After these multi-select 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 recognizes it as an iterable list). If you output this field directly in the front-end template, you will often see the raw data without any processing, such as["红色", "蓝色"]or红色,蓝色This is obviously not aesthetically pleasing and user-friendly.

Accessing custom field data in the front-end template.

To display these custom fields on the front-end page, we first need to obtain them through the template tags provided by Anqi CMS. The most common way is to usearchiveParamsLabel to iterate over all custom parameters, or access them directly by field name.

For example, on the document detail page, we can retrieve all custom fields in this way:

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

If your multiple choice field is namedproductFeaturesyou can also try to access it directly:

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

However, whether through looping or direct access, for the multiple choice fieldproductFeaturesofitem.ValueorproductFeaturesthe output result may still be similar["特点A", "特点B", "特点C"]This is the original array string. This is exactly where we need to optimize.

Skillfully usejoinFilter, to clearly display multiple choices.

To convert this array-formatted original data into an easily readable string, the Anqi CMS template engine provides a very practical filter:join.joinThe filter's function is to concatenate all elements of an array (or any iterable object) into a single string with the specified separator.

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

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

Scenario one: ByarchiveParamsTraversal to display all custom fields

Assuming you have a multi-select field named "Product Features", you have entered multiple values such as "Waterproof", "Shockproof", "Smart Connectivity", etc. in the backend. In the frontend template, you can handle it like this:

{% 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 determine the current loopeditemwhether it is our multiple choice field. If it is, we proceed toitem.Valueapplyjoin:"、"The filter connects its elements with a comma. This way, on the front-end page, you will see 'Product features: Waterproof, Shockproof, Smart Connection' instead of the original array format.

Scenario two: Directly access and display a known name of a 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 goes througharchiveDetailtag to obtainproductFeaturesApply it directly to the value of the field，“join:" / "Filter. So, if the field is selected with 'FeatureA' and 'FeatureB', the page will display 'Product Features: FeatureA / FeatureB'.

ByjoinThe filter allows us to transform complex data structures in the backend 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.

Frequently Asked 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 the system can recognize as a list (for example, a comma-separated string). In AnQi CMS, the values of multiple-choice custom fields are usually recognized by the template engine as iterable lists, thereforejoinFilters can be applied to them well. For single-line text, numbers, and other non-list fields,joinFilters may treat them as a list with a single element (for example,{{ "hello"|join:"-" }}Possible outputh-e-l-l-oTherefore, it is recommended to use it only when it is indeed a multi-choice or list field.

2. If my multi-choice field has no selected value in the background, the frontend applicationjoinWhat will be displayed after the filter?When a multi-select field has no values selected, its value is typically an empty array or an empty list. Applying a function to an empty listjoinA filter, by default, will return an empty string. If you do not want to display whitespace, you can use conditional judgment in the template ({% if productFeatures %}) to control, or combinedefaultSet a default display text for the filter, for example{{ productFeatures|join:"、"|default:"暂无" }}.

3.joinFilters andsplitWhat are the differences between filters? When would you use themsplit? joinThe filter 'joins' array elements into a single string,splitThe filter works in the opposite way, it splits a string into an array using a specified delimiter. If you store a plain text string in the backend custom field (instead of a multi-select field automatically generated list), and this string is represented by a specific delimiter (such as a comma) to indicate multiple values, then you may need to usesplitThe filter splits the 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.