In website content management, we often encounter the need to present a set of data, such as multiple tags, multiple image URLs, or custom multiple-choice content, in a unified string format.AnQiCMS provides great convenience for content display with its efficient architecture based on the Go language and a flexible template engine similar to Django.joinFilter.

joinWhat is a filter?

In the template world of AnQi CMS,joinThe filter plays the role of concatenating all elements from an array (or any iterable object) using a specified separator, ultimately forming a single string.Its syntax is concise and intuitive, and its intention can be understood 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 delimiter you want to use after it, enclosed in double quotes.

For example, suppose you have an array of category names in a template:

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

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

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

joinThe core application scenario of the filter

joinThe filter shines in various content display scenarios, helping us present data in a more aesthetic and practical way.

1. Integration of multi-value tags or keywords

In AnQi CMS, the article or product tag (Tag) feature is very powerful, where you can add multiple related tags for content in the backend. AlthoughtagListLabels are usually used to cyclically display each label and its link, but under certain design requirements, you may want to simply concatenate all label names into a string, for example, displaying related keyword clouds at the bottom of the page, or listing all labels in the article summary.

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

{# 假设 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. Beautify content display: image path or file list

The Anqi CMS allows setting a group photo for content (such asImagesThis typically returns an array of image URLs. In simple scenarios where a carousel is not suitable to use, or when you need to use these image paths in JavaScript logic, joinfilters can come in handy.

For example, you may want to display the paths of all cover images in 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 output on the page might be:所有图片URL：/uploads/img1.webp; /uploads/img2.webp; /uploads/img3.webp

3. Combine the values of custom multi-select fields

The flexible content model of AnQi CMS allows you to define various custom fields, among which the 'Multiple Choices' type fields often return a string array when fetched 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", with possible values["高性能", "易用性", "高安全性"]:

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

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

4. Withsplitcombined with the filter, to achieve flexible string conversion

joinFilter is related tosplitThe filter (used to split strings into arrays by delimiter) combined can exert greater power, achieving various complex text format conversions.You can convert the string stored in the background in a specific format to another display format on the front end.

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

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

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

This combination method provides great flexibility for front-end display, allowing you to meet design requirements without changing the back-end data storage format