In the template world of AnQi CMS, flexible data processing is the key to improving website user experience and SEO performance.Sometimes, we need to extract a specific part from a longer URL, such as path parameters, product ID, or simply display a part of the URL to keep the page concise.sliceA filter is an extremely useful tool that can help us accurately extract any segment of a string or array.

UnderstandingsliceThe working principle of the filter

sliceThe filter allows us to extract a portion of content from a string or array, based on the specified start and end positions. Its basic syntax is{{ 对象|slice:"起始位置:结束位置" }}. The 'object' can be any string variable or an array variable.

  • Starting position (from):Specify where to start cutting. If omitted, it defaults to the beginning (index 0). Indexing starts from 0.
  • end position (to)Specify where to cut off, but not including the element at that position. If omitted, the default is to cut off at the end.
  • Colon (:):起始位置and结束位置must be separated by a colon.

In addition,sliceThe filter also supports negative indices, making it very convenient to count from the end of a string or array. For example,-1Represents the last element,-3it represents the third element from the end.

Practice Application: Extract Parameters or Paths from Long URLs

Let's look at a few specific examples to see how to utilizeslicefilters to handle long URLs.

Example one: Extract the specific path segment from the URL

Suppose the URL structure of our article detail page is as follows:/category/tech/detail/article-anqicms-tutorial.html.Now, we only want to display the category identifier "tech

sliceThe filter itself directly acts on characters or array elements. For complex URLs, we usually need to use it firstsplitThe filter splits the URL by the slash/Split into an array of path segments, then usesliceExtract the required part.

{% set fullPath = archive.Link %} {# 假设archive.Link获取到的是 /category/tech/detail/article-anqicms-tutorial.html #}
{% set pathSegments = fullPath|split:"/" %} {# 结果类似 ["", "category", "tech", "detail", "article-anqicms-tutorial.html"] #}

{# 提取分类标识 "tech" (位于索引 2) #}
{% set categoryIdentifier = pathSegments|slice:"2:3"|join:"" %}
<div>当前文章分类标识:{{ categoryIdentifier }}</div> {# 输出:tech #}

{# 提取文章别名 "article-anqicms-tutorial.html" (位于数组末尾) #}
{% set articleSlug = pathSegments|slice:"-1:"|join:"" %}
<div>文章别名:{{ articleSlug }}</div> {# 输出:article-anqicms-tutorial.html #}

{# 如果我们只需要别名中的"article-anqicms-tutorial"部分,可以进一步处理 #}
{% set articleNameWithoutExtension = articleSlug|slice:":-5" %} {# 截取掉 .html (5个字符) #}
<div>文章名称:{{ articleNameWithoutExtension }}</div> {# 输出:article-anqicms-tutorial #}

Here,join:""issliceConvert the single-element array back to a string.

Example two: Simplify the display of long URLs

Sometimes, for the neatness of the page layout, we may not want to display the full URL, but only show the core domain name plus an ellipsis and part of the path.

{% set fullUrl = "https://en.anqicms.com/docs/template/filters/slice-filter-usage.html?param1=value1&param2=value2" %}

{# 假设我们只想显示 "anqicms.com/.../slice-filter-usage.html" #}
{% set domainPart = fullUrl|split:"/"|slice:"2:3"|join:"" %} {# 提取 anqicms.com #}
{% set pathSuffix = fullUrl|split:"/"|slice:"-2:" %} {# 提取最后两个路径段,如 ["filters", "slice-filter-usage.html?param1=value1&param2=value2"] #}

<div>简化URL:{{ domainPart }}/.../{{ pathSuffix|join:"/" }}</div>
{# 输出:anqicms.com/.../filters/slice-filter-usage.html?param1=value1&param2=value2 #}

{# 如果需要更简洁,只保留文件名称 #}
{% set lastSegment = pathSuffix|slice:"-1:"|join:"" %} {# 再次截取最后一个 #}
{% set filenameOnly = lastSegment|split:"?"|slice:"0:1"|join:"" %} {# 去掉查询参数 #}

<div>更简洁URL:{{ domainPart }}/.../{{ filenameOnly }}</div>
{# 输出:anqicms.com/.../slice-filter-usage.html #}

Example three: Extracting a numeric ID from a custom field with an ID

The assumption is that you have customized a field in the background to store a mixed string containing product SKUs and IDs, for exampleproduct-SKU123-ID456. Now, you need to extract only456This number ID.

{% set customFieldString = "product-SKU123-ID456" %}

{# 先按"-"分割 #}
{% set parts = customFieldString|split:"-" %} {# 结果类似 ["product", "SKU123", "ID456"] #}

{# 提取包含ID的部分 "ID456" (位于索引 2) #}
{% set idPart = parts|slice:"2:3"|join:"" %} {# 结果 "ID456" #}

{# 从 "ID456" 中提取数字部分 #}
{% set numericId = idPart|slice:"2:" %} {# 从索引 2 开始截取,即跳过 "ID" #}

<div>提取的数字ID:{{ numericId }}</div> {# 输出:456 #}

It is not difficult to find through these examples,sliceFilter is related tosplit/joinCombined with other filters, it can exert powerful string processing capabilities, helping us flexibly display and utilize the information in the URL.

Useful hints while using

  • The index starts from 0Remember the index of the first element of a string or array is 0.
  • The end position does not include:slice:"from:to"It will cut fromfromFromto-1To the element at the end.
  • The clever use of negative indices:For strings or arrays of undefined length, negative indices can be convenient for operations from the end.
  • Combined with other filters:When handling complex strings like URLs,splitandjoinfilters are oftenslicea good partner.
  • The test is crucialEnglish: Before applying to the production environment, be sure to in the development