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

In AnQiCMS template design, we often encounter situations where we need to display a series of related data.For example, an article may have multiple keyword tags, a product may have multiple feature descriptions, or a custom field may store a set of image URLs.These data may be stored in an array or list format in the background, but when displayed on the front end, we usually want them to be presented in a more user-friendly string format separated by specific symbols (such as commas, slashes, bars, etc.), rather than the original array format, which not only improves the user experience but also helps maintain the neat layout of the page.

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 }}