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 keywords' field on the back end, such as 'SEO, keywords, optimization'.Such strings are convenient to enter, but when displayed on the front-end, we usually want to display these tags separately, even convert them into independent, clickable elements.

How can such a comma-separated label string be efficiently split into individual labels in AnQi CMS template to achieve more refined content display and interaction?

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

Skillfully usesplitFilter

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

At this time,splitThe filter comes into play. Its basic usage is very intuitive:

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

For example, if you want to convertSEO,关键词,优化This string is split by comma 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 variablekeywordStringThis stores the original string containing all tags.
  • Then,{% set keywordArray = keywordString|split:"," %}This line of code is the core. It willkeywordStringUse the content of the variable as input, through|split:","The filter, with comma,Split a string by a delimiter, and assign the result tokeywordArray.

Now,keywordArraya variable that contains["SEO", "关键词", "优化", "内容营销"]an array of these elements.

Traverse the split array to achieve flexible display

Having this array, you can use the loop tag of Anqi CMS template{% for %}Come iterate over it and personalize each tag. To make each tag look neater, especially when manually entered and there may be unintentionally left spaces, we can also combinetrimA filter to remove the extra spaces at the ends of tags.

Here is a complete example demonstrating how to split the background input tag string and display it as clickable small tags 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 pass throughsplit:","toarticleTagsThe string was split intotagListArrayarray.
  2. {% if tagListArray %}It is used to determine if the split array contains any elements, to avoid displaying an empty container when there are no tags.
  3. {% for tagItem in tagListArray %}It will then pick 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 in thefilter-trim.mdCan remove spaces from both ends of a string. This ensures that we only process and display valid (non-empty) tags.
  5. {{ tagItem|trim }}Then apply it again when displaying the tag content.trimFilter to ensure the display is clean and tidy.
  6. Here we also wrap each tag.<a>Link, and assume./tag/{{ tagItem|trim }}This is the corresponding detail page URL for the tag, so that users can view the relevant content by clicking on the tag, which greatly enhances the interactivity and SEO friendliness of the website.

In this way, even if you enter the string in the "document keyword" field in the background isSEO, 关键词 , 优化 , 内容营销(including irregular spaces), the front-end can display neatly asSEO/关键词/优化/内容营销These independent labels.

Summary

In the Aiqi CMS, make use ofsplitThe filter splits a string containing multiple tags into an array, which is a very basic but extremely powerful content operation technique.It not only makes content display more flexible and beautiful, but also brings real benefits to the website's SEO and user experience. Accompanied bytrimFilter to clean spaces, as well as.forloop andifConditions for rendering, you will be able to build more dynamic and robust templates.

Frequently Asked Questions (FAQ)

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

When the tag string is empty (such as"")splitThe filter 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 whether each element in the array is valid after removing spaces. This means that if the label string is empty, no labels will be displayed on the page orarticle-tags-containerThis container, keep the page neat.

2. Can I use other characters as delimiters to split strings instead of commas?

Of course you can.splitThe second parameter of the filter is the specified delimiter. If you are accustomed to using a semicolon in the background;or a 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