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 of articles, multiple keywords of 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 and separated by specific symbols, it will greatly enhance the display effect and readability of the content.joinThe filter can easily achieve this requirement.
UnderstandingjoinFilter
joinThe core function of the filter is to concatenate all elements of an array (or a similar array-like collection) into a complete string according to the specified connector (delimiter). This is like having a string of beads.joinThe filter is that thread that can string all the beads together and you can add the small decorations (delimiters) you want between each bead.
Its basic syntax is very intuitive:{{ 数组变量|join:"分隔符" }}
Among them,数组变量is the array of data you want to process,"分隔符"is the symbol or string you hope to use to connect array elements.You can choose any character or string you want as a connector, such as comma (,), slash (/), pipe (|), or even Chinese symbols, and Anqi CMS will accurately complete the concatenation according to your settings.
Let us feel its usage intuitively through a simple example:
{% set myTags = ["SEO优化", "内容营销", "网站运营"] %}
<p>文章标签：{{ myTags|join:" / " }}</p>
{# 输出结果：文章标签：SEO优化 / 内容营销 / 网站运营 #}
In this example, we assumemyTagsis an array containing three strings, throughjoin:" / "These strings are connected by a space-separated slash, forming an easily readable list of labels.
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 showcases its convenience.
Scenario 1: Aggregate display of article or product image URLs
Assume you set up an article or product model with a name ofarcimagesThe 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 in a comma-separated format 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 2: Merge multiple options or functional points to display
The 'About Us' page or product introduction page of a website sometimes needs to list the company's features, the advantages of the products, or the functional points of the system. If this information is stored in the background in the form of an array, usejoinThe filter can make the front-end display more tidy.
`twig {% set features = [“Responsive Design”, “Multilingual Support”, “SEO Friendly”, “High Performance Architecture”] %}
SecureCMS Core Highlights: {{ features|join:” | “ }}
【en】Safe CMS core highlights: Responsive design | Multilingual support | SEO friendly