How to split a Chinese sentence into an array of single characters in AnQiCMS template?

In website content operation, sometimes we need to control Chinese text more finely, such as splitting a sentence into individual characters for display, or applying different styles and animation effects to each character.This need is especially 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?

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

Get to 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.At the low-level implementation, it ensures that each Chinese character is recognized as an independent character and not 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, thereby achieving various refined display effects.

Actual operation example

Let's take a look at several specific examplesmake_listHow does the filter 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 combinechinese_sentencethe variable throughmake_listThe filter processes it and then passes the result through againjoinThe filter concatenates them into a string so that the split array elements can be displayed intuitively 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 each Chinese character and English punctuation mark is split into an independent element.

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

The most common use of a split character array is to cooperateforLoop through each character to apply different styles 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, wrapping each character in a simple style<span>In the tag. You can imagine, by CSS or JavaScript, you can make these independent<span>Add various animations, color transitions, or click events to achieve rich interactive effects.

3. Combine conditional judgments for more complex processing.

When iterating over characters, you can also make conditional judgments based on the character itself to achieve more flexible display logic.For example, we may want to apply different styles to punctuation marks 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>

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

Summary

Bymake_listThe filter, Anqi CMS template makes character-level operations on Chinese text extremely simple and intuitive.In order to achieve a unique visual design, or to develop interactive functions that require precise text control, this filter provides powerful tools for content managers and template developers.Combine the other features of the Anqi CMS template engine, such as loops, conditional judgments, and various auxiliary filters, and you will be able to build highly customized and expressive website content.

---

Frequently Asked Questions (FAQ)

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

2. Can you directly access a character at a specific position in a split character array? For example, do you want to get the first character of a sentence?Of course you can.make_listThe filter generates a standard array structure, you can access characters at specific positions like any other array. For example, if you assign the split array tochar_arrayA variable, then{{ char_array[0] }}Will get the first character of the array,{{ char_array[1] }}Then get the second character, and so on.

3. Besidesmake_listCan Anqi CMS template provide other filters to split strings by words or spaces?Yes, Anqi CMS template providessplitandfieldsThese two filters are 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 defaults to splitting the text into an array of words based on spaces in the string. For example:{{ "Hello AnQiCMS World"|fields }}These filters are very useful when dealing with English phrases or structured text.