How to efficiently apply various data filters in the Anqi CMS template?

AnQi CMS, as an enterprise-level content management system built based on Go language, has won the favor of many small and medium-sized enterprises and content operators with its efficient, secure, and flexible features.In daily content management and frontend display, we often need to process and present data in a refined manner, which cannot be separated from the powerful data filtering function in the template.This article will delve into how to efficiently apply various data filters in AnQiCMS templates, making your content display more expressive and practical.

Understanding the 'Data Filters' in Anqi CMS template

AnQiCMS's template engine adopts the design philosophy of Django, therefore, for developers familiar with Django or similar template engines, the syntax will seem very familiar.In AnQiCMS template, the data filter plays a role in converting and formatting variable values.They are like individual processing stations on the data pipeline, receiving raw data, undergoing specific processing, and then outputting new formats that meet the requirements of front-end display.

The syntax of the data filter is very intuitive:{{ 变量 | 过滤器名称:参数 }}.|The symbol is the "pipe" that connects variables and filters,过滤器名称specifies the operation to be executed,:参数Then provide additional configuration for this operation (if needed).

It is worth noting that, in addition to this 'pipeline' type of filter in the AnQiCMS template, some tags themselves have data filtering functions, such asarchiveListTagged throughcategoryId/order/typeParameters are used to implement the filtering and sorting of the list,archiveFiltersThe label is directly used to generate complex filtering conditions. Although their forms are different, the core purpose is to achieve accurate data acquisition and flexible display.

Why is it crucial to apply data filters efficiently?

Applying data filters efficiently in the AnQi CMS can bring multiple advantages:

1. Improve the quality of content presentation:No matter it is a brief introduction that needs to be truncated or a specific date format that is required, the filter can display the data in the most suitable way for the frontend interface, improving the user reading experience.
2. Enhance the readability and maintainability of template code:Process data through a filter to avoid writing complex programming logic in the template, making the template code more concise and readable.When the data processing rules change, it is only necessary to modify the filter parameters or replace the filter, rather than making extensive changes to the template structure.
3. Ensure the security of data display:The filter can effectively prevent XSS attacks, format errors, and other issues for user input content, ensuring the safety and stability of the website.
4. Achieve more flexible data interaction:Combine various filters, you can easily convert background data into the format required by front-end components, such as converting strings to arrays for list rendering, or formatting numbers as currency.
5. Optimize SEO performance:Process the title, description, and other content through filters to truncate, highlight keywords, etc., which helps generate content snippets that are more in line with search engine optimization requirements.

Common data filters and their efficient applications in AnQi CMS

Auto CMS provides a variety of data filters covering text, numbers, dates, HTML processing and more. Next, we will select some of the most commonly used and practical filters and explain them in combination with actual application scenarios:

1. Text processing and formatting: Making text more elegant

• truncatecharsandtruncatewords: Smart text truncationThese two filters are very useful when we need to display the summary or preview of the content.truncatechars:数字It will truncate according to the number of characters, andtruncatewords:数字it will truncate according to the number of words. If the truncated text exceeds the specified length, it will automatically add an ellipsis at the end....，and ensure the HTML tag structure is complete.

  • Efficient Application Examples:

    
    {# 截取文章描述的前50个字符 #}
    <p>{{ item.Description|truncatechars:50 }}</p>
    {# 截取HTML内容的前20个单词，常用于文章列表，避免布局错乱 #}
    <div class="summary">{{ item.Content|truncatewords_html:20|safe }}</div>
    

• capfirst,lower,upper,titleThe art of case conversion:These filters are used to control the case of text.capfirstCapitalize the first letter of the string,lowerConvert to lowercase,upperConvert to uppercase,titleThen capitalize the first letter of each word.

  • Efficient Application Examples:

    
    {# 将用户输入的标签转换为统一格式，如“product category”变成“Product Category” #}
    <span>{{ tag.Title|title }}</span>
    {# 确保导航菜单项统一显示为大写 #}
    <a href="{{ nav.Link }}">{{ nav.Title|upper }}</a>
    

• cutandreplace: Precise replacement and deletion cut:关键词Used to remove all occurrences of a specified keyword from a string.replace:旧词,新词It is used to replace one word with another in a string.

  • Efficient Application Examples:

    
    {# 移除文章标题中的特定前缀，如“【原创】” #}
    <h3>{{ archive.Title|cut:"【原创】" }}</h3>
    {# 将联系电话中的连字符替换为空格 #}
    <p>电话: {{ contact.Cellphone|replace:"-," }}</p>
    

• trim,trimLeft,trimRight: Remove extra spaces or charactersThese filters can remove whitespace characters from the beginning, end, or both ends of a string, and even specify specific characters to be removed.

  • Efficient Application Examples:

    
    {# 清除用户输入关键词前后可能存在的空格 #}
    <input type="text" value="{{ search.query|trim }}">
    {# 删除URL路径开头多余的斜杠 #}
    <img src="/{{ imagePath|trimLeft:"/" }}" alt="">
    

2. Data type conversion and calculation: bring data to life.

• add：Simple addition operation add:另一个值The filter can perform addition operations on numbers or strings. Numbers will be added mathematically, and strings will be concatenated.

  • Efficient Application Examples:

    
    {# 在页面显示下一个月的日期 #}
    {% set currentMonth = now("01"|integer) %}
    <p>下个月是: {{ currentMonth|add:1 }} 月</p>
    {# 拼接CSS类名 #}
    <div class="item-{{ forloop.Counter|add:1 }}"></div>
    

• integerandfloat：Flexible data type conversionThese two filters can force variable values to be converted to integers or floating-point numbers. This is very useful in scenarios involving mathematical operations or when specific data types are required.

  • Efficient Application Examples:

    
    {# 确保传入计算的参数是整数 #}
    {% set total = item.Price|float * item.Quantity|integer %}
    

• **stringformatCustom format