In the template design of Anqi CMS, we often encounter situations where we need to display list-type data, such as multiple tags of an article, multiple image links on a product detail page, or multiple options stored in a custom field. Directly outputting this array form of data to the page often results in something similar to[“标签一”, “标签二”, “标签三”]Such format is original, it is obviously not aesthetically pleasing and does not comply with user reading habits.

这时，我们就需要一种方法，将数组中的各个元素，通过一个自定义的字符（比如逗号、短横线或空格）连接起来，形成一个自然流畅的字符串。安企CMS强大的模板引擎提供了“过滤器”功能，其中的joinThe filter is the tool to solve this problem.

Reveal the core features:joinFilter

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

Its basic usage syntax is very intuitive:

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

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

Next, we will get a detailed understanding through several common practical application scenariosjoinSpecific usage of the filter.

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

In the template design of Anqi CMS, the sources of array data are various. Below, we will demonstrate several typical cases.

Example one: Linking document Tag tags

Assuming your article has a 'Tag tag' field, it may be stored as a comma-separated string in the background, but you want to display it on the front end as 'Tag A - Tag B - Tag C' such as this format. Althougharchive.KeywordsThe field is typically a string, but if your template can somehow (such as through custom functions or more complex model processing) obtain an array of label names, or if you need to convert an existing comma-separated string into an array and then concatenate it,splitFilter would bejoina good partner.

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

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

The steps here are:

  1. archive.Keywords|split:",": First usesplitThe filter willarchive.KeywordsString is separated by commas.,It is split into an array of strings.
  2. |join:" - ": Then use the elements of this array-to connect them.

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

Example two: Displaying the image links of a multi-image field

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 all the image URLs for debugging or other specific display needs.

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

Here,archiveDetailthe tags you getimages_arrayThe variable is already an array of image URLs, we can use it directlyjoinFilter it with a vertical bar|to 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 checkbox, with multiple featured options stored in the background. If these options are exposed to the template in the form of an array, you can directly concatenate.

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

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

Example four: Manually create an array and concatenate

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

`twig {% set my_data