How to concatenate an array into a string with a specified delimiter for display in AnQiCMS?

The AnQiCMS handles data flexibly in templates, which is the key to improving the display effect of the website for content operators.Among them, displaying the array as a string concatenated with a specified delimiter is a common need to enhance the readability and aesthetics of the content.Benefiting from the powerful and flexible template engine of AnQiCMS, especially its built-in rich filter functions, we can easily achieve this goal.

Use AnQiCMS template filter skillfully: easily realize array concatenation and beautiful display

AnQiCMS's template engine adopts a tag marking method similar to Django, one of its powerful features is the 'filter' (Filters).The filter allows us to modify, format, or convert output variables, like a data processing tool.Today, let's delve into how to use these filters to cleverly concatenate the array into the string format we want.

Core tool:joinFilter - the Swiss Army knife of array concatenation

When we need to concatenate all elements of an array (usually referred to as a Slice type of data in AnQiCMS templates) with a specific string,joinThe filter is our first choice. Its function is just like its name, connecting the various parts of the array.

joinHow to use the filterVery intuitive:

{{ 数组变量 | join: "分隔符" }}

Here:

• 数组变量Is the array you want to concatenate (for example, a field value obtained from the background, if the field stores a list).
• 分隔符is a string, you want to use it to connect each element of the array. It can be a comma (,), a space (), a slash (//), or a vertical bar (|) Even more complex strings, as long as you enclose them in double quotes.

For example:Suppose we have a custom field namedproduct_features, which stores a set of product features such as["防水", "防震", "耐磨"]. If output directly in the template{{ archive.product_features }}, it may result in an unreadable raw array format. But by usingjoina filter, it can be displayed beautifully:

{% archiveDetail productFeatures with name="product_features" %}
  产品特性：{{ productFeatures | join:"、" }}
{% endarchiveDetail %}

This code may be displayed on the page:产品特性：防水、防震、耐磨.

Even though your 'array' is actually a string, you want to concatenate each character of it,joinThe filter can also be useful. It splits a string into individual characters and then connects them with a specified delimiter. For example:

{{ "安企内容管理系统" | join:", " }}

This will output:安, 企, 内, 容, 管, 理, 系, 统Of course, this usage is relatively rare, but it may be useful under specific layout requirements.

splitFilter:joinpartner

In practice, the data we retrieve from the database may not be an array directly, but a string that has been separated by commas or specific symbols. For example, a custom field may storeSEO优化,内容营销,网站搭建Such text. At this time, if we need to further process these "pseudo-arrays" (such as splitting first, then rejoining with other symbols, or only getting a part of them),splitThe filter is particularly important.

splitThe role of the filter is tojoinExactly the opposite, it can split a string into an array according to the specified delimiter.

splitHow to use the filter:

{{ 字符串变量 | split: "分隔符" }}

For example:If we have a fieldkeywords_stringStored isSEO优化,内容营销,网站搭建and we want to display them in the form of/This form can be displayed by usingsplitconverted to an array, and thenjoinconcatenated:

{% archiveDetail keywordString with name="keywords_string" %}
  {% set keyword_array = keywordString | split:"," %}
  关键词：{{ keyword_array | join:" / " }}
{% endarchiveDetail %}

This will output:关键词：SEO优化 / 内容营销 / 网站搭建.

BysplitandjoinThe combination of use, you can flexibly handle various string and array data, ensuring that the content is presented in the most elegant and design-friendly way on the front end.

Quick view of other related filters

exceptjoinandsplitThis is a golden pair, AnQiCMS also provides many other useful filters that can assist you in achieving more functions when dealing with arrays or strings:

• firstandlastFilter:When you only want to display the first or last element of an array, these filters are very convenient.{{ 数组变量 | first }}Or `{{ array variable | last }}