Array concatenation into a string: Application scenarios of the `join` filter in AnQiCMS templates?

In website content management, we often encounter the need to display a set of data, such as multiple tags, multiple image URLs, or custom multi-select content, as a unified string format.AnQiCMS (AnQiCMS) relies on its efficient architecture based on the Go language and the flexible template engine similar to Django, providing great convenience for content display.Today, let's take a deep look at a very useful tool for handling such needs -joinfilter.

joinWhat is a filter?

in the AnQi CMS template world,joinThe filter plays the role of concatenating all elements from an array (or an iterable object) with a specified delimiter, ultimately forming a single string.Its syntax is concise and intuitive, one can understand its intent at a glance.

The basic usage is very direct, you just need to pass the array variable to be processed through the pipe symbol|pass tojoinFilter, and specify the separator you want to use after it, enclosed in double quotes.

For example, assume you have an array containing multiple category names in the template:

{% set categories = ["科技", "生活", "旅游"] %}
<div>当前分类：{{ categories|join(" - ") }}</div>

After rendering, the display on the page will be:当前分类：科技 - 生活 - 旅游

By changing the separator, you can easily adjust the style of the output, such as using commas, slashes, or any other characters you need.

joinThe core application scenario of the filter

joinThe filter can shine in various content display scenarios, helping us present data in a more beautiful and practical way.

1. Integrate multi-value tags or keywords

In AnQi CMS, the Tag feature of articles or products is very powerful, you can add multiple related tags for content in the background. AlthoughtagListTags are usually used to display each tag and its link in a loop, but under certain design requirements, you may want to simply concatenate all tag names into a string, such as displaying a related keyword cloud at the bottom of the page, or listing all tags in the article summary.

Assuming you have a custom field that stores multiple keywords for the article and retrieves them in an array format:

{# 假设 archive.CustomKeywords 是一个字符串数组 #}
{% archiveDetail archiveKeywords with name="CustomKeywords" %}
<p>文章关键词：{{ archiveKeywords|join("、") }}</p>

This code will connect all custom keywords in the article with Chinese commas “、” to form a smooth keyword list.

2. Enhance content display: image path or file list

Anqi CMS allows setting group images for content (such asImagesfield), this usually returns an array of image URLs. In some simple scenarios where a carousel is not suitable, or when you need to use these image paths in JavaScript logic,joinThe filter can be useful.

For example, you might want to display all the cover image paths of an article on a single line, for debugging or some non-visual display scenarios:

{% archiveDetail galleryImages with name="Images" %}
<p>所有图片URL：{{ galleryImages|join("; ") }}</p>

The page may output:所有图片URL：/uploads/img1.webp; /uploads/img2.webp; /uploads/img3.webp

3. Combine the values of custom multi-select fields

The AnQi CMS flexible content model allows you to define various custom fields, among which the 'Multiple Selection' type of field often returns a string array when retrieved on the frontend. If you need to present the multiple options selected by the user in a concise manner,joinThe filter is an ideal choice.

For example, a product model may have a multi-select field named "Features", whose values may include["高性能", "易用性", "高安全性"]:

{% archiveDetail productFeatures with name="features" %}
<p>产品主要特点：{{ productFeatures|join(" | ") }}</p>

This will connect all the product features with the vertical bar symbol “|” and clearly display them to visitors.

4. AndsplitCombined with the filter, it achieves flexible string conversion.

jointhe filter meetssplitThe filter (used to split a string into an array by delimiter) combines to unleash its full power, enabling various complex text format conversions.You can use this method to convert a string stored in a specific format on the back-end into another display format on the front-end.

Assuming a certain field in the background stores a comma-separated list of keywords:

{% set rawKeywords = "Go语言,AnQiCMS,模板引擎,SEO优化" %}
<p>相关主题：{{ rawKeywords|split(",")|join(" - ") }}</p>

Here, we first usesplit(",")Split the string into an array using commas and use it immediatelyjoin(" - ")Translate this array with "-". The final output will be:相关主题：Go语言 - AnQiCMS - 模板引擎 - SEO优化

This combination provides great flexibility for front-end display, and you can meet the design requirements without changing the background data storage format