How to concatenate array elements in an Anqi CMS template with a custom character into a string?

In Anqi CMS template design, we often encounter situations where we need to display list data, such as multiple tags of an article, multiple image links on a product details page, or multiple options stored in a custom field. Directly outputting this array-like data to the page will often result in something similar to[“标签一”, “标签二”, “标签三”]This original format is clearly not aesthetic and does not conform to user reading habits.

At this point, we need a method to concatenate the elements of an array using a custom character (such as a comma, hyphen, or space) to form a natural and smooth string. The powerful template engine of Anqi CMS provides a "filter" function, which includes thejoinThe filter is the tool to solve this problem.

The core feature revelation:joinFilter

joinThe filter is a very practical feature in the Anqi CMS template, its function is to concatenate all elements of an array (or iterable object) with the delimiter you specify, forming a single string.In this way, the originally scattered array elements can be presented in a neat and readable manner on the page.

Its basic usage syntax is very intuitive:

{{ 数组变量|join:"分隔符" }}

Among them,数组变量It is the array you want to operate (for example["元素A", "元素B", "元素C"])分隔符It is the character or string you want to use to connect elements, for example","/" - "/" / "etc.

Next, we will learn in detail through several common practical application scenariosjoinThe specific usage of the filter.

Practical scenario example: connecting arrays from different sources into a string

In Anqi CMS template design, the source of array data is various. Below, we select several typical cases for demonstration.

Example one: Connect the Tag tag of the document.

Assuming your article has a "Tag label" field that may be stored in the background as a comma-separated string, but you want to display it on the front end as "LabelA - LabelB - LabelC" format. Althougharchive.KeywordsThe field is usually a string, but if your template can obtain an array of label names through some method (such as a custom function or a more complex model processing), or if you need to convert an existing comma-separated string into an array and then concatenate it,splitThe filter will bejoinyour partner.

For example,archive.KeywordsIt is a comma-separated string: "SEO, content marketing, website operation", do you want to connect it with a hyphen:

{% set keywords_array = archive.Keywords|split:"," %}
{{ keywords_array|join:" - " }}

The steps here are:

1. archive.Keywords|split:",": First usesplitThe filter willarchive.KeywordsSplit by comma,Split into a string array.
2. |join:" - ": Then use the elements of this array to-and connect them.

The output may be:SEO - 内容营销 - 网站运营

Example two: Display the image link of multi-image fields

In the document model, if a "cover group image" field is setImagesIt can often be used directly as an array of image URLs in the template.You may need to concatenate the URLs of all the images for debugging or other specific display requirements.

{% archiveDetail images_array with name="Images" %}
<p>所有图片链接：{{ images_array|join:"|" }}</p>

here,archiveDetailTags retrieved from comments.images_arrayThe variable is already an array of image URLs, which we can use directlyjoinFilter it with a vertical line|connect.

The output may be:<p>所有图片链接：/uploads/img1.jpg|/uploads/img2.jpg|/uploads/img3.jpg</p>

Example three: Connecting arrays in custom fields

If your content model has a custom field, for examplefeaturesIt may be a multi-select box, storing multiple featured options on the back-end. If these options are exposed to the template as an array, you can directly connect them.

{% archiveParams params %}
{% for item in params %}
    {% if item.FieldName == "features" %}
        <p>产品特色：{{ item.Value|join:" / " }}</p>
    {% endif %}
{% endfor %}
{% endarchiveParams %}

Assumeitem.ValueAt this moment is a like["防水", "防震", "耐磨"]An array, the output may be:<p>产品特色：防水 / 防震 / 耐磨</p>

Example four: Manually create an array and connect

In the template, sometimes we also need to manually create a temporary array and then perform a connection operation.listThe filter helps us quickly define an array in the template.

`twig {% set my_data