In managing and displaying content in AnQi CMS, we often encounter situations where it is necessary to merge a set of related information into a coherent text.For example, a product may have multiple features, and we hope to display these features in a list connected by commas or slashes; or, an article may be associated with multiple keyword tags, and we want to summarize these tags into a single line of text.joinFilter, it can help us easily achieve this goal.

UnderstandingjoinFilter: Concatenate array elements into a string

joinThe core function of the filter is to concatenate all elements of an array (Slice or array in Go language) with the specified separator to form a complete string.This is like having a string of beads, and then stringing them together with a thread.

Its basic usage is very intuitive:

{{ 数组变量 | join:"您想要的分隔符" }}

For example, if you have an array representing colors in a template:

{% set colors = '["红色", "绿色", "蓝色"]'|list %}

If you want to connect them as "red | green | blue", you can do it like this:

<p>可用颜色：{{ colors|join:" | " }}</p>

It will be displayed on the page:

可用颜色：红色 | 绿色 | 蓝色

Here|listIt is an auxiliary filter used to directly define an array of strings in the template.In practical use, your array usually comes from the backend data of an enterprise CMS, such as custom fields or tag lists.

Apply flexibly: handling multi-value custom fields

The strength of AnQi CMS lies in its flexible content model and custom fields.很多时候，我们可能会为某个文档或产品定义一个自定义字段，用于存储多个相关的值，例如“产品特性”字段，它的值可能是“高性能,轻量化,安全稳定”这样的逗号分隔字符串。

To convert data stored in this format into a more user-friendly display, we need to first 'split' this string into an array and then 'join' it together. This is where we need to usesplitFilter, it isjoinThe "reverse operation":

  1. splitFilter: Splits a string into an array

    splitThe filter can split a string into an array according to a specified delimiter. Its usage is:

    {{ 字符串变量 | split:"您用来切割字符串的分隔符" }}

    Now, let's combinesplitandjointo handle the 'Product Features' field mentioned earlier. Assume you are on the article detail page.archive.FeaturesThe value of the field is"高性能,轻量化,安全稳定".

    `