In the presentation of website content, the way numbers are displayed often directly affects users' perception and understanding of the information.很多时候，我们希望对数值进行格式化处理，例如显示价格时保留两位小数、展示百分比时加上百分号、或者将大数字进行更易读的格式化。The template engine of Anqi CMS provides a powerful and flexible solution, allowing us to easily implement these refined numerical display requirements without modifying the original data type.
The template engine of Anqi CMS adopts a syntax style similar to Django or Blade, it outputs variable content through double curly braces{{变量}}and uses single curly braces and percent signs{% 标签 %}Use various tags and logic control.This design concept allows front-end developers to focus on page display without having to delve into backend code to adjust the data itself.The key to implementing number formatting is to flexibly use the built-in "filters" in the template.
Through template filters to achieve elegant presentation of numbers
The filter is a very practical feature in the Safe CMS template engine, allowing us to process various output variable values, including but not limited to text operations, logical judgments, and the value formatting we focus on today.After passing the data into the filter, it returns a new value that has been processed but retains the original data type, perfectly fitting the core requirement of 'only displaying formatted numbers without changing the original data type'.
Next, we will introduce several core filters and their applications in the Aanqi CMS for number formatting.
1.floatformat：English control the decimal places of floating-point numbers
floatformatThe filter is specifically designed for floating-point numbers (decimals), which helps us control the number of decimal places displayed.Whether displaying product prices on e-commerce websites or presenting precise percentages in data reports, this filter is very useful.
Basic usage: {{ 变量 | floatformat:位数 }}
When no digits are specified,
floatformatDefault is to try to keep one decimal place, if the last digit is 0 it will not display the decimal, and it will be rounded to the nearest whole number. For example, if the price of your productproduct.pricestored as34.23234:{{ product.price|floatformat }}May be displayed.34.2. Ifproduct.priceYes34.00000It will display34. Ifproduct.priceYes34.26000It will display34.3.When a specific number of decimal places is specified, it will display strictly according to the specified number of decimal places and round off. For example, displaying the price with two decimal places:
{{ product.price|floatformat:2 }}Ifproduct.priceYes34.23234displayed as34.23. Ifproduct.priceYes34.00000displayed as34.00. Ifproduct.priceYes34.26000displayed as34.26.
PassfloatformatYou can ensure that prices, ratings, and other numerical values are always displayed in a unified and readable format on the page.
2.stringformatThe universal tool for number formatting.
stringformatThe filter is more powerful and flexible, it can output any value such as numbers, strings, etc. according to the format template you define. Its functionality is similar to that in the Go language.fmt.Sprintf()English allows you to precisely control the structure and style of the output content through placeholders.
Basic usage: {{ 变量 | stringformat:"格式定义" }}
Integer formatting (
%d):If you have a stock quantityproduct.stockresponse for12345and want to add “piece” at the end:{{ product.stock|stringformat:"%d件" }}Will be displayed12345件.浮点数格式化和精度控制 (English)
%f/%.nf):Combine%.nf可以控制浮点数的精度，这与Englishfloatformat有些相似，但Englishstringformat还能添加额外的前缀或后缀。例如，将价格Englishproduct.price(199.998格式化为带货币符号的两位小数：{{ product.price|stringformat:"¥%.2f" }}Will be displayed¥199.99.Percentage display:假设您有一个折扣率
discount.rateYes0.75，您希望显示为75%:{{ (discount.rate * 100)|stringformat:"%.0f%%" }}Will be displayed75%。（注意%%表示输出一个百分号） 如果discount.rate直接是75:{{ discount.rate|stringformat:"%d%%" }}也会显示75%.
stringformat的灵活性让它成为处理各种数值展示场景的利器，您几乎可以构建任何想要的数值输出格式。
3.stampToDate：时间戳的专属格式化工具
Although it is not strictly in the format of 'number', a timestamp is essentially a string of numbers. The Anqi CMS provides specialstampToDateLabel used to convert timestamps into readable date and time format. This is also the formatting display of numbers without changing the original timestamp data.
Basic usage: {{ stampToDate(时间戳, "格式") }}
- For example, you have a document's creation time
article.CreatedTimeIt is a timestamp1675862400，您希望显示为2023年02月09日:{{ stampToDate(article.CreatedTime, "2006年01月02日") }}Will be displayed2023年02月09日.
Here is the string 'format' that follows the Go language's time formatting rules, using a specific reference time (2006-01-02 15:04:05) to define the output format.