In the daily operation of Anqi CMS, we often encounter scenarios where we need to flexibly display some structured information in the content.For example, when setting keywords for articles or products, we may enter a string containing multiple tags in the "document keywordsSuch strings are convenient for entry, but when displayed on the front end, we usually want to display these labels separately, even convert them into independent, clickable elements.

How can such a comma-separated tag string be efficiently split into individual tags in the Anqi CMS template to achieve more refined content display and interaction?

The template engine of Anqi CMS provides powerful filter functions,splitThe filter is the tool to solve this problem.It can help us easily split a string into an array (or slice) by a specified delimiter, and then we can process each element of the array individually.

ingeniously utilizesplitFilter

Imagine that you are setting keywords for an article about SEO and entering them in the "Document Keywords" field in the backendSEO,关键词,优化,内容营销In the article detail page, you want these words not to appear as a long string, but to be displayed as independent small tags.

This is,splitThe filter comes into play. Its basic usage is very intuitive:

{{ 你的字符串变量|split:"分隔符" }}

For example, if you want toSEO,关键词,优化split this string by comma as a delimiter, you can do it like this:

{% set keywordString = "SEO,关键词,优化,内容营销" %}
{% set keywordArray = keywordString|split:"," %}

In this code block:

  • We first use{% set keywordString = "..." %}Defined a variablekeywordStringIt stores the original string containing all tags.
  • Next,{% set keywordArray = keywordString|split:"," %}This line of code is the core. It willkeywordStringtake the content of the variable as input, through|split:","the filter, separated by commas,Split a string into an array as a delimiter, and assign the result tokeywordArray.

Now,keywordArraythe variable stores an array containing["SEO", "关键词", "优化", "内容营销"]these elements.

Traverse the split array to achieve flexible display

Got this array, you can use the loop tag of the Anqi CMS template{% for %}Come traverse it, and perform personalized processing on each tag. To make each tag look cleaner, especially when manually entered, there may be accidental spaces left behind, we can also combinetrimFilter to remove the extra spaces at both ends of the label.

Below is a complete example that demonstrates how to split the background input label string and display it as clickable small labels on the page:

{% set articleTags = "SEO, 关键词 , 优化 , 内容营销 , AnQiCMS" %} {# 假设这是从文档详情获取的标签字符串，可能包含一些空格 #}
{% set tagListArray = articleTags|split:"," %}

{# 检查数组是否为空，避免渲染空标签或不必要的结构 #}
{% if tagListArray %}
<div class="article-tags-container">
    <span class="tags-label">标签：</span>
    {% for tagItem in tagListArray %}
        {# 仅显示非空且去除空格后的标签，并为每个标签添加链接或样式 #}
        {% if tagItem|trim %}
        <a href="/tag/{{ tagItem|trim }}" class="tag-button">{{ tagItem|trim }}</a>
        {% endif %}
    {% endfor %}
</div>
{% endif %}

In this code block:

  1. We first go throughsplit:","toarticleTagsThe string has been split intotagListArrayarray.
  2. {% if tagListArray %}It is used to determine whether the split array contains any elements, to avoid displaying an empty container when there are no labels.
  3. {% for tagItem in tagListArray %}Then it will take out each label in the array one by one.
  4. {% if tagItem|trim %}It is a very practical judgment.|trimFilter (refer to the AnQi CMS document infilter-trim.mdThe string's leading and trailing spaces can be removed. This judgment ensures that only valid (non-empty) tags are processed and displayed.
  5. {{ tagItem|trim }}Then the tag content is applied again when displaying.trimFilter, ensure that the display effect is clean and tidy.
  6. Here we also wrap each tag<a>the link, and assume/tag/{{ tagItem|trim }}This is the detail page URL corresponding to the tag, so when users click on the tag, they can view the relevant content, greatly enhancing the website's interactivity and SEO-friendliness.

By this means, even if the string you enter in the 'Document Keywords' field in the background isSEO, 关键词 , 优化 , 内容营销(including irregular spaces), the front-end can be displayed neatly asSEO/关键词/优化/内容营销These independent labels.

Summary

In the AnQi CMS, utilizingsplitThe filter will split strings containing multiple tags into an array, which is a very basic but extremely powerful content operation skill.It not only makes the content display more flexible and beautiful, but also brings tangible improvements to the website's SEO and user experience.trimFilter cleans spaces, as well asforloop andifJudgment for conditional rendering, you will be able to build more dynamic and robust templates.

Common Questions (FAQ)

1. If my tag string is empty (for example, no keywords are filled in on the back end), what will the page display?

When the tag string is empty (such as"")splitFilter returns an array containing a single empty string（[""]）。But in the above example, we added{% if tagListArray %}to check if the entire array is empty, as well as{% if tagItem|trim %}Check each element in the array after removing spaces to see if it is valid. This means that if the tag string is empty, no tags will be displayed on the page orarticle-tags-containerThis container, keeps the page tidy.

2. Can I use other characters as delimiters to split strings, in addition to commas?

Of course you can.splitThe second parameter of the filter specifies the delimiter. If you are accustomed to using semicolons in the background;or vertical line|to separate tags, then you just need to change the code in,Replace with the corresponding delimiter. For example, if your tag string is `SEO;Keywords;Optimization