In website operation and content management, we often encounter such scenarios: some fields on the backend store multiple related information, such as multiple keywords of an article, various function tags of a product, or multiple aliases of an author.This information is usually connected into a string with commas, semicolons, or other specific symbols.When it is necessary to display these pieces of information one by one or perform style processing in the front-end template of the website, it is necessary to split this string into independent items and iterate through them individually.

AnQiCMS provides a powerful and flexible template engine, whose syntax style is similar to Django, allowing us to use filters (Filters) to process data, and to use loop tags (forLooping (）to traverse and display these processed data.

AnQiCMS Template Language Basics

The template system of AnQiCMS is designed to simplify the development process of content display. It makes data processing intuitive through the following core concepts:

  1. Variable output:Use double curly braces{{ 变量名 }}Show the data passed from the backend to the template.
  2. Tags:using single curly braces and percent signs{% 标签名 %}to perform logic control, such as conditional judgment (if)、loop (for）etc.
  3. Filter (Filters):use the vertical line|The symbol, passes the value of a variable to a function for processing. Filters can change the format, content, or structure of data. This is the key to implementing string splitting.

Core Function: Split a string into an array

AnQiCMS provides several practical filters that can split strings into arrays (slice in Go language) according to different rules for further processing in templates.

1.splitFilter: Split by specified delimiter

This is the most commonly used method, which can split a string into an array based on any delimiter you define.

  • Usage: {{ 字符串变量 | split:"分隔符" }}
  • Example:Assuming yourarchive.KeywordsThe field stores the string "SEO optimization, content marketing, website operation", do you want to separate it with a comma?,Split it.
    
{% set keyword_string = archive.Keywords %}
{% set keyword_array = keyword_string|split:"," %}
{# 此时 keyword_array 就是一个包含 ["SEO优化", "内容营销", "网站运营"] 的数组 #}
    If the string does not contain the specified delimiter,splitThe filter will return a single-element array containing only the original string. For example, ifkeyword_stringis "SEO optimization", thenkeyword_string|split:","it will return["SEO优化"]."",splitThe filter will split each character of the original string into an element of the array.

2.make_listFilter: Split by character

When you need to split each character (including Chinese, English, numbers, etc.) in a string into an independent element of an array,make_listthe filter will be very convenient.

  • Usage: {{ 字符串变量 | make_list }}
  • Example:If you need to handle a string like “Hello World” and want each character to be an independent element.
    
{% set greeting_string = "你好世界" %}
{% set char_array = greeting_string|make_list %}
{# 此时 char_array 就是一个包含 ["你", "好", "世", "界"] 的数组 #}

3.fieldsFilter: Split by space

This filter is specifically used to split strings into an array based on spaces (including consecutive spaces).

  • Usage: {{ 字符串变量 | fields }}
  • Example:If your string is “AnQiCMS is a GoLang CMS”，you want to split it by spaces.
    
{% set phrase_string = "AnQiCMS is a GoLang CMS" %}
{% set word_array = phrase_string|fields %}
{# 此时 word_array 就是一个包含 ["AnQiCMS", "is", "a", "GoLang", "CMS"] 的数组 #}

Iterate over the array in the template and display it.

Once we split the string into an array, we can use the AnQiCMS template engine toforloop tags to iterate over and display each element in the array.

  • Usage: 
    
{% for item in 数组变量 %}
    {# 在这里处理每个 item #}
{% empty %}
    {# 如果数组为空，则显示这里的内容 #}
{% endfor %}
  • loop variable:InforInside the loop, you can useitemAccess the current element of the array being traversed (or any variable name you define). In addition, the template engine also provides some special loop state variables, such as:
    • forloop.Counter: Current loop count (starting from 1).
    • forloop.Revcounter: Remaining number of loop iterations.

Comprehensive example: Display the list of article keywords

Let's look at a real example, assuming the article detail page'sarchive.KeywordsThe field stores keywords separated by commas. We hope to display these keywords as tags at the bottom of the page, and each keyword should be a clickable link.

{# 假设 archive.Keywords 的值是 "SEO优化,内容营销,网站运营" #}
{% if archive.Keywords %}
    <div class="article-keywords">
        <strong>关键词：</strong>
        {% set keyword_array = archive.Keywords|split:"," %}
        {% for keyword in keyword_array %}
            <a href="/tags/{{ keyword|urlencode }}" class="tag-item">{{ keyword|trim }}</a>
        {% empty %}
            <span>暂无关键词</span>
        {% endfor %}
    </div>
{% endif %}

Code Explanation:

  1. {% if archive.Keywords %}: First judgearchive.KeywordsField has value, avoid displaying an empty area when there is no keyword.
  2. {% set keyword_array = archive.Keywords|split:"," %}: Usesettags toarchive.KeywordsString passes through,Split and assign to a field namedkeyword_arrayThe new variable. This is**practical**because it separates data processing and loop logic, making the code clearer.
  3. {% for keyword in keyword_array %}: Iterate overkeyword_arrayarray, each loop assigns the current element tokeyworda variable.
  4. <a href="/tags/{{ keyword|urlencode }}" class="tag-item">{{ keyword|trim }}</a>:
    • keyword|urlencode：Encode the keyword in the URL to prevent the link from failing due to special characters in the keyword.
    • keyword|trim：Remove any spaces before and after the keyword to ensure the display is neat.
    • class="tag-item"：Can apply custom CSS styles to each keyword.
  5. {% empty %}<span>暂无关键词</span>{% endfor %}Ifkeyword_arrayThe array is empty (i.e.,archive.Keywordsis an empty string or remains empty after splitting), then display “No keywords available”.

By using such a combination, we can easily present structured string data from the backend in a beautiful and functional way on the website front-end.

Summary

AnQiCMS's template engine provides flexible filters and loops