In the template development of AnQi CMS,splitthe filter meetsarchiveDetailorcategoryDetailThe combination of tags provides powerful flexibility for us to extract and process data from the fields.This can not only make the website content display more refined and dynamic, but also better meet the specific content operation needs.
Maneuver data flexibly:splitThe core role of the filter
In the template design of AnQi CMS,archiveDetailTags are used to obtain detailed information about a single document (such as an article, product), andcategoryDetail
At this time,splitA filter is like a 'slicer' of content, which can split a string into an array that is convenient for looping in templates. For example, if a field stores a string like 'SEO, optimization, keywords', through|split:","After processing, it becomes["SEO", "优化", "关键词"]such an array. Once the data becomes an array, we can useforloop tags and other template tags for traversal, to achieve more advanced and dynamic display effects.
Scenario one: Refine document keywords or tags
The keywords of the document (Keywords) fields usually exist in the form of separated by commas, semicolons, or other symbols. Although AnQi CMS providestagListTags to manage and display tags uniformly, but in some specific scenarios, we may need to handle them directly.KeywordsContent in the field.
Suppose we are on the document detail page, through.archiveDetailThe label obtained the keywords of the document:
{% archiveDetail articleKeywords with name="Keywords" %}
At thisarticleKeywordsIt may be a string, such as"前端开发,Web设计,用户体验". If you want to display these keywords separately and generate independent search or tag links for them,splitThe filter came into play:
{% archiveDetail articleKeywords with name="Keywords" %}
{% if articleKeywords %}
<div class="article-keywords">
{% set keywordArray = articleKeywords|split:"," %}
{% for keyword in keywordArray %}
{# 注意：这里通常需要对关键词进行URL编码，以确保链接的正确性 #}
<a href="/search?q={{ keyword|urlencode }}" class="keyword-tag">{{ keyword|trim }}</a>
{% endfor %}
</div>
{% endif %}
By such a combination, we transform a simple string into structured data and create clickable links for each keyword, which is of great benefit to the website's SEO and user experience.|trimThe filter is also very important here, it ensures that fromspliteach keyword obtained from the result is removed of any extra spaces.
Scenario two: dynamically display multi-value data in custom fields
The Anqi CMS allows us to define rich custom fields for content models or categories.These custom fields are the key to highly customized content.product_featuresThe custom field, used to store multiple features of the product, such as"防水,防尘,快充,长续航". Displaying this string directly may not be intuitive enough, we hope to present it in a list format.
On the product detail page, we can extract and process this custom field in this way:
{% archiveDetail productFeatures with name="product_features" %}
{% if productFeatures %}
<div class="product-features">
<h4>产品特色：</h4>
<ul>
{% set featureList = productFeatures|split:"," %}
{% for feature in featureList %}
<li><i class="icon-check"></i> {{ feature|trim }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
Similarly, if a category is defined forcategory_imagesThis custom field stores a set of data separated by vertical bars|separated image URLs, we can extract them and display them as a gallery on the category detail page:
{% categoryDetail categoryImages with name="category_images" %}
{% if categoryImages %}
<div class="category-gallery">
{% set imageArray = categoryImages|split:"|" %}
{% for imageUrl in imageArray %}
<img src="{{ imageUrl|trim }}" alt="{% categoryDetail with name='Title' %}" loading="lazy">
{% endfor %}
</div>
{% endif %}
The advantage of this approach is that even if the backend administrator enters a plain string in the custom field, the frontend template can parse it and display it in a structured way, greatly enhancing the expressiveness of the content.
Scene three: Extracting specific information from content summaries
Although not common, under certain special content operation strategies, we may require content editors to summarize the document in the abstract (Description）or even content（ContentAt the beginning of the ）field, use a specific delimiter to mark some brief key information, such as a quick Q&A pair or a guiding call to action.
For example, the content summary fieldDescriptionmay contain"问：安企CMS好用吗？|答：非常好用！". We hope to split it into Q&A format.
{% archiveDetail articleDescription with name="Description" %}
{% if articleDescription and articleDescription|contain:"|" %}
{% set qaPair = articleDescription|split:"|" %}
<div class="qa-block">
<p class="question">{{ qaPair[0]|trim }}</p>
<p class="answer">{{ qaPair[1]|trim }}</p>
</div>
{% else %}
<p>{{ articleDescription }}</p>
{% endif %}
This example shows how to combine|containThe filter first checks if the delimiter exists, then performssplitOperation, thus avoiding errors on common summaries that do not contain delimiters.
Tips in practice
While usingsplitWhen extracting and processing fields with the filter, there are several minor details to note:
- Data entry standards:
splitThe effect largely depends on the consistency of the background data entry. Ensure that content editors use the same delimiter. |trimThe coordination of the filter:In many cases, there may be unnecessary spaces before and after the separator.splitAfter that, each array element is processed using|trima filter to effectively remove these spaces, ensuring data cleanliness.- Empty string handling:If it is
splitThe field may be empty, it is recommended to perform it before use{% if field_name %}Judgment to avoid generating empty<div>or<ul>. - Combined with other filters:
splitFilters are often used with other filters (such as|urlencodeto generate URL-safe links,|firstor|lastto get the first and last elements of an array) as well as loop tags{% for %}used together to achieve richer functionality.
Through these advanced usages, the Anqi CMS template is no longer just a static display of data, but can intelligently parse and dynamically render based on the intrinsic structure of the data, providing great content management freedom and creative space for website administrators and operators.
Frequently Asked Questions (FAQ)
1. UsesplitHow to remove extra spaces before and after each split item after the filter?
Answer: InsplitAfter the filter splits the string into an array, you can use|trimA filter to process each element in the array to remove any extra spaces around them. Inforthe loop, will{{ item }}changed to{{ item|trim }}.{% set itemList = myString|split:"," %}
{% for item in itemList %}
<span>{{ item|trim }}</span>
{% endfor %}
2.splitWhat impact will the delimiter in the filter have if it is not present in the original string?
Answer: IfsplitThe filter-specified section