In the presentation of website content, the aesthetics and readability of the data are equally important as the quality of the content itself.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.
Filters: 'Processes' for data processing
We can imagine the filter as a series of 'processes' for handling data.Original data is like unprocessed raw materials; through the processing of filters, it can be shaped, sized, or colored to meet our needs.{{ 变量名|过滤器名称:参数 }}Such a format. Wherein,变量名is the data you need to handle,|symbols tell the template engine to apply a filter next,过滤器名称is the specific operation,参数Then it is a further setting of the operation (not all filters require parameters).
Precise control of numerical 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,floatformatA filter is a very practical tool. It allows us to specify how many decimal places a floating-point number should retain. For example, if you have a product priceitem.PriceYes99.998And while you wish to display only two decimal places, you can do it like this:{{ item.Price|floatformat:2 }}This way, it will be displayed on the page.99.99If the parameter is omitted, it will default to retaining 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, similar to what is used in programming languages,SprintfFunctions. For example, want to display the stock quantity as "Stock: 120 items", anditem.Stockis a number:{{ item.Stock|stringformat:"库存: %d 件" }}Ifitem.StockThe value of120, then it will display "Stock: 120 items" on the page.
In addition,integerandfloatThe filter can help us with data type conversion. When you obtain data from some sources that might be in string format (such as"123.45"），but they can be quite useful when you need to perform numerical calculations:{{ "123.45"|float|integer }}This will first convert a string"123.45"to a floating-point number123.45and then 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 format of strings is equally important, as it directly affects the professionalism and readability of the content. Anqi CMS provides a series of filters to handle 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.TitleIt is "anqi cms", it will display "ANQI CMS".lowerIt converts all letters in the string to lowercase.{{ item.Title|lower }}Ifitem.TitleIs “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 }}The message will display “Hello world”.titleIt will capitalize the first letter of each word in the string.{{ "hello world"|title }}The message will display “Hello World”.
Content truncation is also a common requirement in website operations, such as article summaries, descriptions, etc.
truncatechars: Truncate strings based on the number of characters and add....{{ item.Description|truncatechars:50 }}It willitem.Descriptiontruncate to a maximum of 50 characters (including...).truncatewordsTruncate a 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, directly usetruncatecharsortruncatewordsThe structure of HTML may be destroyed. Safe CMS providestruncatechars_htmlandtruncatewords_html:{{ item.Content|truncatewords_html:30|safe }}This filter intelligently handles HTML tags to ensure that the HTML structure remains intact after truncation. UsesafeThe filter is used to inform the template engine that the output HTML content is safe and does not require automatic escaping.
Practical Tips: Filter Chains and Exploring More
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 template engine of AnQi CMS is built with a rich variety of filters, and what is introduced here is only a part of them. When you encounter specific formatting needs, it is recommended to consult the official documentation of AnQi CMS regarding the 'More Filters' section (usually located intag-filters.md[en] There, all available filters and their usage are detailed, 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.
Skillfully apply these filters to present your website content in the most elegant and user-expectant manner, significantly enhancing the professionalism and user experience of your website.
Common Questions (FAQ)
The filter did not work or an error occurred, why is that?This is usually due to several situations. First, check if the variable name and filter name are spelled correctly, and make sure
|The symbol usage is correct. Next, confirm that the data type you pass to the filter meets its requirements (for example,dateThe filter requirestime.Timethe type, 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, it can also cause errors.|safeFilter, the template engine may escape it, causing it to look differently from what you expect to be formatted.Can I apply multiple filters to the same data?Of course you can! The template filters of Anqi CMS support chaining. This means you can use multiple filters in sequence.
|Concatenated together, they will 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.How should I choose the correct filter to process my data?The choice of the appropriate filter mainly depends on the effect you want to achieve and the type of the original data.Firstly, clarify your goal: is it to control the numerical precision?Convert case?Truncated text?Is it still necessary to perform other processing?Then, refer to the filter documentation of Anqi CMS based on the type of the data (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.