How to use filters in a template to format displayed numbers and strings (such as decimal places, case conversion)?

In the presentation of website content, the aesthetics and readability of the data are as important as the quality of the content itself.AnQiCMS (AnQiCMS) provides powerful filter (Filters) functions at the template level, allowing us to easily format numbers and strings displayed on the page, thereby enhancing user experience and the professionalism of page information.

Filter: The 'process' of data processing

We can imagine the filter as a series of processes for handling data.Raw data is like unprocessed raw materials, through the processing of filters, it can become the shape, size, or color we need.In Anqi CMS templates, using filters is very intuitive, usually using{{ 变量名|过滤器名称:参数 }}This format. Among them,变量名Is the data you need to process,|The symbol tells the template engine to apply a filter next,过滤器名称Is the specific operation, and参数This is a further setting for the operation (not all filters require parameters).

Precise control of number display: decimal places and arithmetic operations

When displaying prices, percentages, or other numerical values, we often need to control the number of decimal places or perform simple mathematical calculations.The filter provided by Anqi CMS offers a flexible solution.

Firstly, for the control of floating-point precision,floatformatThe filter is a very practical tool. It allows us to specify how many decimal places to retain for floating-point numbers. For example, if you have a product priceitem.PriceIs99.998And you want to display only two decimal places like this:{{ item.Price|floatformat:2 }}Then the content will be displayed on the page like this99.99. If the parameter is omitted, it will default to one decimal place and intelligently handle trailing zeros (for example99.00It will be displayed as99)

Sometimes, we need more refined formatting, even adding text to numbers. At this point,stringformatfilters come into play, which are similar to programming languages.SprintfFunction. For example, want to display the inventory quantity as “Inventory: 120 pieces”, anditem.Stockit is a number：“{{ item.Stock|stringformat:"库存: %d 件" }}Ifitem.Stockhas a value of120Then the page will display “Inventory: 120 pieces”.

Furthermore,integerandfloatThe filter can help us convert data types. When the data you get from some sources may be in string format (such as"123.45"But when you need to perform numerical operations on them:{{ "123.45"|float|integer }}This will first convert the string"123.45"Convert to a floating point number123.45And then convert to an integer123.

If you need to perform simple addition operations,addThe filter is very convenient, it can intelligently handle the addition of numbers and strings:{{ value1|add:value2 }}For example,{{ 5|add:2 }}Will be displayed7while{{ "安企"|add:"CMS" }}it will display:安企CMS.

Optimize string presentation: case conversion and content truncation

The formatting of strings is equally important, as it directly affects the professionalism and readability of the content. Anqi CMS provides a series of filters to process text.

In terms of case conversion, there are several commonly used filters:

• upper: Converts all alphabetic characters in a string to uppercase.{{ item.Title|upper }}Ifitem.TitleIs "anqi cms", it will display "ANQI CMS".
• lower: Convert all letters in the string to lowercase.{{ item.Title|lower }}Ifitem.TitleIt is "AnQi CMS", it will display "anqi cms".
• capfirst: Convert the first letter of the string to uppercase and keep the rest unchanged.{{ "hello world"|capfirst }}It will display “Hello world”.
• titleIt will capitalize the first letter of each word in the string.{{ "hello world"|title }}It will display “Hello World”.

Content truncation is a common requirement in website operations, such as article summaries, descriptions, etc.

• truncatechars: Truncate the string based on the number of characters and add at the end....{{ item.Description|truncatechars:50 }}Willitem.DescriptionTruncate to a maximum of 50 characters (including...)
• truncatewordsTruncate the string based on the number of words and add at the end....{{ item.Description|truncatewords:10 }}It will be truncated to a maximum of 10 words.

It is worth noting that if the content you want to truncate contains HTML tags, use it directly.truncatecharsortruncatewordsIt may destroy the HTML structure. Anqi CMS providestruncatechars_htmlandtruncatewords_html:{{ item.Content|truncatewords_html:30|safe }}This filter intelligently processes HTML tags, ensuring that the HTML structure remains intact after truncation. UsesafeThe filter is used to tell the template engine that the output HTML content is safe and does not need to be automatically escaped.

Practical Tips: Filter Chains and More Exploration

The filter design of AnQi CMS is very flexible, you can link multiple filters together for use, and they will be executed in order from left to right. For example: {{ item.Title|lower|capfirst|truncatechars:20 }}This will first convert the title to lowercase, then capitalize the first letter, and finally truncate to 20 characters.

The AnQi CMS template engine is built-in with a rich variety of filters, which are only a part of what is introduced here. When you encounter specific formatting needs, it is recommended to consult the official documentation of AnQi CMS regarding the 'More Filters' section (usually in thetag-filters.mdIn it, a detailed list of all available filters and their usage is listed, including string replacement, deletion, array operations, URL processing, and more.By trying and combining different filters, you can almost meet all the display needs of page data.

Adopt these filters flexibly to present your website content in the most elegant and user expectations, greatly enhancing the professionalism and user experience of your website.

Frequently Asked Questions (FAQ)

1. Why is the filter not working or giving an error?This is usually caused by several situations. First, check that the variable name and filter name are spelled correctly, and ensure|The symbol is used correctly. Secondly, confirm that the data type you pass to the filter meets its requirements (for example,dateThe filter needstime.Timetype, andfloatformatNeed a number or a string that can be converted to a number). Sometimes, if a filter requires parameters and you forget to provide them, an error may occur.Finally, for variables containing HTML content, if not used|safeFilter, the template engine may escape it, making it look different from what you expect to be formatted.

2. Can I apply multiple filters to the same data?Of course you can! Anqi CMS template filters support chaining. This means you can use multiple filters with|Symbols are connected together, and they act on the data in the order you write them, from left to right. For example,{{ item.Title|lower|capfirst|truncatechars:20 }}The title will be converted to lowercase, then the first letter will be capitalized, and finally truncated to 20 characters.

3. How do I choose the correct filter to process my data?The choice of an appropriate filter mainly depends on the effect you want to achieve and the type of original data.First, clarify your goal: do you want to control the precision of numbers? Convert case?Should the text be truncated? Or should some other processing be performed? Then, refer to the AnQi CMS filter documentation based on the data type (numbers, strings, HTML content, timestamps, etc.).The document usually provides detailed descriptions and examples of each filter, helping you quickly find and understand how to use it.Try and practice more are the ways to master these skills.