In AnQiCMS template design, sometimes we need to accurately extract a specific part from a long text or a data list.Whether it is to extract the abstract of an article, display a few pictures in a carousel, or process part of the elements in a data array, the ability to flexibly operate on string and array fragments is crucial.AnQiCMS's powerful template engine, drawing on the syntax features of Django templates, provides us with concise and efficient 'filters' to easily meet these needs.
Understand the Core:sliceFilter
The core tool to extract a specified segment of a string or array in the AnQiCMS template issliceFilter. This filter can slice the part you need from the target data according to the starting and ending positions you set.
sliceBasic usage of filters:
{{ 目标数据 | slice:"起始位置:结束位置" }}
Here目标数据It can be a string, also an array (or called a slice)."起始位置:结束位置"It is a string parameter, specified by the colon:separated, specifying the range to be截取。
Parameter details:
起始位置(from):This is an integer representing the starting index (including the element at this position). The index starts from0counting starts. If omitted起始位置It defaults to starting from the beginning of the data. You can also use negative numbers, for example-1represents the first element from the end,-2representing the second to last, and so on.结束位置(to):This is an integer representing the end index of the cut (excluding the element at this position). If omitted结束位置it defaults to cutting to the end of the data. With起始位置Similar, negative numbers can also be used to indicate positions from the end.
Actual case demonstration:
Let's delve deeper through several examples.sliceApplication of filters.
Extract a substring:Suppose we have an article title and we want to display only the first few characters.
{% set articleTitle = "安企CMS模板中灵活截取字符串和数组" %} {# 截取前五个字符 #} <p>标题前五字:{{ articleTitle | slice:"0:5" }}</p> {# 输出:安企CMS模板 #} {# 截取从第六个字符到末尾 #} <p>标题后半部分:{{ articleTitle | slice:"5:" }}</p> {# 输出:中灵活截取字符串和数组 #} {# 截取从倒数第五个字符到倒数第二个字符(不包含倒数第二个) #} <p>标题中间部分:{{ articleTitle | slice:"-5:-2" }}</p> {# 输出:字符串 #}Extract elements from an array (slicing):Assuming we have a list of tags and we only want to display a subset of them. Here we will combine
splitThe filter will convert a comma-separated string into an array, and then usejoinThe filter converts the sliced array back into a string.{% set tagString = "网站运营,内容管理,SEO优化,模板开发,Go语言,前端技术,数据分析" %} {% set tags = tagString | split:"," %} {# 将字符串转换为数组 #} {# 截取前三个标签 #} <p>热门标签(前三):{{ tags | slice:"0:3" | join:" / " }}</p> {# 输出:网站运营 / 内容管理 / SEO优化 #} {# 截取从第二个到第四个标签(索引1到3) #} <p>精选标签(中间):{{ tags | slice:"1:4" | join:" | " }}</p> {# 输出:内容管理 | SEO优化 | 模板开发 #} {# 截取最后两个标签 #} <p>最新标签(最后):{{ tags | slice:"-2:" | join:" - " }}</p> {# 输出:Go语言 - 前端技术 #}
Combined with other practical filters
In the actual content segment extraction,sliceFilters are often used in conjunction with other filters to achieve a finer or more user-friendly display effect.
splitFilter:When your data is stored in a single string separated by some delimiter.splitCan be converted into an array for conveniencesliceAs shown in the example above.joinFilter:After slicing the array segment, you may need to merge these elements back into a readable string,joinThe filter can be put to use. As shown in the example.lengthFilter:Understanding the length of a string or array before slicing can help you make conditional judgments or avoid slicing to empty values.{% set imageUrls = ["/img/banner1.jpg", "/img/banner2.jpg", "/img/banner3.jpg", "/img/banner4.jpg"] %} {% if imageUrls | length > 2 %} {% for img in imageUrls | slice:"0:2" %} <img src="{{ img }}" alt="轮播图" /> {% endfor %} {% else %} <p>图片数量不足,无法展示轮播。</p> {% endif %}truncatecharsandtruncatewordsFilter:If your goal is to generate an article summary and you want to automatically add an ellipsis (…) after truncation, thentruncatechars(character truncation) andtruncatewords(Breaking words) may be a better choice because they are designed for this purpose.{% set longContent = "安企CMS是一个基于Go语言开发的企业级内容管理系统,致力于提供高效、可定制、易扩展的内容管理解决方案。项目定位于服务中小企业、自媒体运营者和多站点管理需求的用户,通过一套简洁高效的系统架构,支持多样化的内容展示和管理需求。" %} {# 截取前50个字符并添加省略号 #} <p>摘要:{{ longContent | truncatechars:50 }}</p>It is worth noting that when dealing with rich text content containing HTML tags, using
truncatecharsorsliceBefore, it was usually necessary to usestriptagsThe filter removes HTML tags to avoid truncation and damage to the HTML structure.
Summary
Master the templates in AnQiCMS,slicefilter, combinedsplit/joinSuch auxiliary tools can make you more flexible in content operations and website design.These fragment extraction techniques are a powerful boost to template efficiency and user experience, whether it is dynamically generating content summaries, controlling the display quantity of list items, or performing complex UI layouts.
Frequently Asked Questions (FAQ)
1.sliceFilters andtruncatecharsWhat are the main differences of the filter?
sliceThe filter is a general-purpose truncation tool, which accurately truncates strings or arrays from specified positions and does not automatically add ellipsis (…). Andtruncatechars(ortruncatewordsThe filter is specifically used to create summaries, it will automatically add an ellipsis at the end after reaching a specified length, and it usually maintains tag integrity better when handling HTML.
2. What will happen if I try to slice an array with start or end positions out of the actual range?AnQiCMS's template engine handlessliceThe filter is very intelligent and robust. If the start position you specify exceeds the data length, or the end position is less than the start position, it will return an empty string/array based on the actual situation, or return the valid part as much as possible without causing a template rendering error.For example, perform an operation on an array of length 10slice:"12:15"It will return an empty array, executionslice:"5:2"It will also return empty.
3.sliceDoes the filter treat Chinese string and English string the same?Yes, the template engine of AnQiCMS is based on Go language and supports UTF-8 encoded characters well. This means that whether it is English letters or Chinese characters, in the `slice