How to concatenate array elements into a string with a specified separator?

When operating a website, we often encounter the need to display a set of related data in the form of a list, such as multiple tags for articles, multiple keywords for product features, or multiple image URLs in an image library.At this point, if these scattered data elements can be integrated into a concise string, separated by specific symbols, it will greatly enhance the display effect and readability of the content.The AnQi CMS template engine provides very practicaljoinThe filter can easily meet this requirement.

UnderstandingjoinFilter

joinThe core function of a filter is to concatenate all elements of an array (or a collection similar to an array) into a complete string according to the specified separator (delimiter). It's like you have a string of beads,joinThe filter is that thread that can string all the beads together, and you can also add the little decorations (delimiters) you want between each bead.

Its basic syntax is very intuitive:{{ 数组变量|join:"分隔符" }}

Among them,数组变量It is the array data you want to process, and"分隔符"Then you want to use the symbol or string to connect the elements of the array.You can choose any character or string you want as a separator, such as comma (,), slash (/), pipe (|), or even Chinese symbols, AnQi CMS will accurately complete the concatenation according to your settings.

Let us go through a simple example to intuitively feel its usage:

{% set myTags = ["SEO优化", "内容营销", "网站运营"] %}
<p>文章标签：{{ myTags|join:" / " }}</p>
{# 输出结果：文章标签：SEO优化 / 内容营销 / 网站运营 #}

In this example, we assumemyTagsis an array containing three strings, by means ofjoin:" / "These strings are connected by a space-separated slash, forming an easily readable list of tags.

Actual application in AnQi CMS

In the template design of AnQi CMS,joinThe filter can be applied to various scenarios, especially when dealing with array data obtained through tags, where it can show its convenience.

Scenario one: Aggregate display of article or product image URL

Suppose you have set a name for an article or product modelarcimagesThe custom field used to store URLs of multiple product images, and the data type of this field is an array.You may want to display these image URLs separated by commas instead of listing them one by one.

{# 假设当前是文档详情页，并且文档有一个名为arcimages的自定义字段，存储图片URL数组 #}
{% archiveDetail arcimages with name="arcimages" %}
<p>所有图片地址：{{ arcimages|join:", " }}</p>
{# 如果 arcimages 包含 ["https://en.anqicms.com/uploads/img1.jpg", "https://en.anqicms.com/uploads/img2.jpg", "https://en.anqicms.com/uploads/img3.jpg"] #}
{# 输出结果：所有图片地址：/uploads/img1.jpg, /uploads/img2.jpg, /uploads/img3.jpg #}

Scenario two: Merge multiple options or features to display

The "About Us" page of a website or product introduction page often needs to list the company's features, product advantages, or system functionalities. If this information is stored in an array in the background, usejoinThe filter can make the front-end display cleaner.

`twig {% set features = [Responsive design, Multilingual support, SEO friendly, High-performance architecture] %}

Security CMS Core Highlights: {{ features|join:” | “ }}