In website content operation, sometimes we need to have more precise control over Chinese text, such as splitting a sentence into individual characters for display, or applying different styles and animation effects to each character.This need is particularly common when creating some special UI effects, interactive content, or even text-based games.How does the template system help us achieve this function when building a website using AnQiCMS (AnQiCMS)?

The Anqi CMS uses a template engine syntax similar to Django, which provides a rich set of built-in tags and filters to help us easily implement various content operation needs. For the requirement of splitting a Chinese sentence into an array of individual characters, the Anqi CMS template provides a very convenient and powerful filter: make_list.

Knowmake_listFilter

make_listThe filter, as the name implies, is used to split a string (including Chinese, English, numbers, and punctuation) into individual characters one by one, and then convert it into an array of characters.On the underlying implementation, it ensures that each Chinese character is correctly recognized as an independent character, rather than being incorrectly split into bytes, which is particularly important for handling multi-byte UTF-8 encoded Chinese.

This filter greatly simplifies the complexity of character-level operations.Once a string is split into an array, we can use the loop structure of the template engine to independently process each character in the array, thus achieving various refined display effects.

Actual operation example

Let's see a few specific examples to understandmake_listFilter how to work in the AnQi CMS template.

Suppose we have a Chinese sentence stored in a template variable.

{% set chinese_sentence = "欢迎使用安企CMS！" %}

1. Split the Chinese sentence into an array and view its content

We can imagine thatchinese_sentenceThe variable passes throughmake_listFilter the results and then pass them through againjoinThe filter connects elements into a string so that the split array elements can be visually seen on the page.

{% set char_array = chinese_sentence|make_list %}
<p>拆分后的数组内容：{{ char_array|join(", ") }}</p>

After running, the page may display:拆分后的数组内容：欢, 迎, 使, 用, 安, 企, C, M, S, ！

This clearly showsmake_listHow to split each Chinese character and English punctuation mark into independent elements.

2. Traverse the character array and render each character independently.

The most common use of the split character array is to cooperate withforLoop, apply different styles to each character or perform other dynamic operations.

<div class="character-display">
    {% for char in chinese_sentence|make_list %}
        <span style="display:inline-block; margin-right:5px; padding:3px; border:1px solid #ccc; background-color:#f9f9f9;">{{ char }}</span>
    {% endfor %}
</div>

This code will output each character of the sentence one by one, and wrap each character in a simple style.<span>Label. You can imagine, through CSS or JavaScript, you can apply these independent<span>Label adds various animations, color transitions, or click events to achieve rich interactive effects.

3. Combine conditional judgment for more complex processing

When traversing characters in a loop, you can also make conditional judgments based on the character itself to achieve more flexible display logic.For example, we might want to apply different styles to punctuation and Chinese characters.

<div class="styled-text">
    {% for char in chinese_sentence|make_list %}
        {% if char == "！" or char == "，" or char == "。" %} {# 假设要对标点符号特殊处理 #}
            <span style="color:red; font-weight:bold;">{{ char }}</span>
        {% else %}
            <span style="color:blue;">{{ char }}</span>
        {% endif %}
    {% endfor %}
</div>

Here, all punctuation marks will be displayed in bold red, while other Chinese characters will be shown in blue, adding more possibilities to the visual presentation of the page.

Summary

Passmake_listFilter, the Auto CMS template makes character-level operations on Chinese text extremely simple and intuitive.Whether it is to achieve a unique visual design or to develop interactive functions that require fine text control, this filter provides powerful tools for content operators and template developers.Combine the other functions of the Aneqi CMS template engine, such as loops, conditional judgments, and various auxiliary filters, and you will be able to build highly customizable and expressive website content.

Common Questions (FAQ)

1.make_listFilter can handle English characters, numbers, or mixed text?Yes,make_listThe filter can recognize and correctly handle any Unicode character.It can not only split Chinese characters into independent characters, but also split English letters, numbers, punctuation marks, and mixed Chinese and English text into individual characters, generating the corresponding character array.

2. Can the characters in the split character array be accessed directly at a specific position? For example, do I want to get the first character of the sentence?Of course you can.make_listThe filter generates a standard array structure, you can access specific characters by index, just like you would with other arrays. For example, if you assign the split array tochar_arrayvariable, then{{ char_array[0] }}The first character of the array will be obtained,{{ char_array[1] }}Then the second character is obtained, and so on.

3. Besidesmake_listIs there any other filter in the Anqi CMS template that can split strings by word or space?There is, the Anqi CMS template providessplitandfieldsThese two filters can be used to split strings by word or by space.splitThe filter allows you to specify any delimiter (such as a comma, space, or specific word) to split a string into an array. For example:{{ "苹果,香蕉,橘子"|split:"," }}.fieldsThe filter is simpler, it will split the text into an array of words by default based on spaces in the string. For example:{{ "Hello AnQiCMS World"|fields }}These filters are very useful when processing English phrases or structured text.