In Anqi CMS, the custom content model provides us with great flexibility, allowing us to build personalized content structures according to different business needs.Whether it is the function list of the product detail page, the keyword tags of the article, or the advantages of the service introduction, we often encounter the need to store multiple related pieces of information in a field and display or process these pieces of information on the front-end page.

In this case, if all the information is stuffed into a regular text field, it may face difficulties in parsing and inconsistent styles when displayed on the front end. And the template filter provided by Anqi CMS, especiallysplitThe filter is the tool to solve this challenge. It can help us easily split multi-value string data stored in a single field into independently operable data items, thus achieving a more refined and beautiful data display.

Understand custom content model and multi-value fields

First, let's clarify what a custom content model is and what the meaning of 'multi-value field' is here.One of the core advantages of AnQi CMS is its flexible content model feature.By setting up the "Content Management" -> "Content Model" in the background, we can create dedicated models based on actual business (such as "Products", "Services", "Cases", etc.) and define unique fields for each model, such as product name, product image, product details, etc.

When we talk about 'multi-value field', it usually refers to such a custom field: when we enter content in the background, we will input multiple related values in this field, and separate them with a specific symbol (such as comma, semicolon, pipe, etc.).For example, in the "Product" model, we can add a "Single Line Text" field named "Product Feature."}When entering data, the user may enter a string like 'waterproof, shockproof, high-definition screen, long battery life'.Although this is a single string in the database, on the frontend, we want it to be presented as independent list items such as 'waterproof', 'vibration-proof', etc.

splitFilter: The powerful assistant for data processing

splitThe core function of a filter, as the name implies, is to split a string into an array according to a specified delimiter (usually referred to as a slice in Go language). Once the string is split into an array, we can use the loop tag in the template (')forLoop) Traverse and display each element of the array individually.

Its basic usage syntax is very intuitive:

{{ obj|split:"分隔符" }}

Among them,objIs the string variable to be cut, and"分隔符"It is used to specify the specific character or string used to split the string (such as comma “,”, semicolon “;” etc.). If the specified delimiter does not exist in the string,splitThe filter will return an array that only contains the original string itself.If the delimiter is an empty string, it will split each UTF-8 character in the original string into an array as a separate element.

Practice: Applying in custom model fieldssplitFilter

Now, let's look at an actual example to see how to utilize in a custom content modelsplitUsing a filter to display multi-value field data.

Assuming we have a custom content model named "product" that includes a custom field calledfeatures(Product feature), its type is "single-line text", entered in the background with commas,separated, for example:高性能CPU,大容量内存,SSD硬盘,独立显卡We hope to display these features beautifully in the product details page as a list.

Step one: Add a multi-value field to the custom model.

In the AnQi CMS backend, go to 'Content Management' -> 'Content Model', select your 'Product' model (or any custom model you created), click 'Edit'. In the 'Content Model Custom Fields' section, add a new field:

  • Parameter name:Product Feature (Display Name on Frontend)
  • Call field: features(Field Name Used in Template)
  • Field type:Single-line text
  • Mandatory?:Select According to Requirement
  • Default:Can Be Left Blank or Set Default Separator Prompt

Save your custom model settings. After publishing product content, find the 'Product Features' field in the 'Other Parameters' section, and enter it in the format 'High-performance CPU, Large memory, SSD hard drive, Independent graphics card.'

Step Two: Call in Frontend TemplatesplitDisplay filter

On your product detail page template (for example){product/detail.htmlIn the "), you can call and handle it in the following wayfeaturesField:

{# 假设我们已经通过 archiveDetail 获取了当前产品的详情 #}
{# 首先,获取自定义字段 'features' 的值 #}
{% archiveDetail productFeaturesStr with name="features" %}

{# 检查 productFeaturesStr 是否有值,避免对空字符串进行操作 #}
{% if productFeaturesStr %}
    {# 使用 split 过滤器将字符串按逗号切割成数组,并赋值给一个新的变量 'featureList' #}
    {% set featureList = productFeaturesStr|split:"," %}

    <h2>产品特性</h2>
    <ul class="product-features">
        {# 遍历切割后的 featureList 数组 #}
        {% for feature in featureList %}
            {# 对每个特性项进行 trim 处理,去除可能存在的首尾空格,然后显示 #}
            <li>{{ feature|trim }}</li>
        {% empty %}
            {# 如果 featureList 为空(例如原始字段为空或切割后没有有效项),则显示提示信息 #}
            <li>暂无特性信息。</li>
        {% endfor %}
    </ul>
{% else %}
    {# 如果整个 'features' 字段都没有值,则不显示产品特性部分 #}
    <p>该产品暂未添加任何特性。</p>
{% endif %}

Code analysis:

  1. {% archiveDetail productFeaturesStr with name="features" %}: This line first extracts the namedfeaturescustom field content from the current document details and assigns it toproductFeaturesStrVariable.
  2. {% if productFeaturesStr %}This is a conditional judgment to ensure that only whenproductFeaturesStrthere is content, the subsequent cutting and traversal should be executed, to avoid unnecessary