In the presentation of content on the website, the way numbers are displayed often directly affects users' perception and understanding of information.Many times, we want to format numbers, such as displaying prices with two decimal places, adding a percentage sign when showing percentages, or formatting large numbers in a more readable way.The Anqi CMS provides a powerful and flexible template engine, allowing us to easily implement these refined numerical display requirements without modifying the original data type.
The AnQi CMS template engine uses a syntax style similar to Django or Blade, which outputs variable content through double curly braces{{变量}}and uses single curly braces with the percent sign{% 标签 %}Use various tags and logic controls. This design philosophy allows front-end developers to focus on page display without delving into backend code to adjust the data itself.The key to implementing number formatting lies in flexibly using the built-in "Filters" in the template.
Achieve elegant presentation of numbers through template filters
The filter is a very practical feature of Anqi CMS template engine, which allows us to process various output variable values, including but not limited to text operations, logical judgments, and the number formatting we are focusing on today.After passing the data into the filter, it will return a new value that has been processed but retains the original data type, perfectly fitting the core requirement of 'displaying formatted numbers without changing the original data type'.
Next, we will introduce several core filters used for number formatting in Anqi CMS and their applications.
1.floatformat: Precise control of the decimal places of floating-point numbers
floatformatThe filter is specifically designed for floating-point numbers (decimals), which can help us control the number of decimal places displayed.No matter whether it is used to display product prices on e-commerce websites or to present precise percentages in data reports, this filter comes in handy.
Basic usage: {{ 变量 | floatformat:位数 }}
When no specific digits are specified,
floatformatThe default is to try to keep one decimal place, and 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 product isproduct.pricestored as34.23234:{{ product.price|floatformat }}May be displayed34.2Ifproduct.priceIs34.00000It will display34Ifproduct.priceIs34.26000It will display34.3.When a specific number of decimal places is specified, it will display strictly to the specified number of decimal places and round off accordingly. For example, display the price to two decimal places:
{{ product.price|floatformat:2 }}Ifproduct.priceIs34.23234displayed as34.23Ifproduct.priceIs34.00000displayed as34.00Ifproduct.priceIs34.26000displayed as34.26.
ByfloatformatYou can ensure that prices, ratings, and other numerical values remain consistent and easy to read 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 function is similar to that in Go language.fmt.Sprintf()Allow you to precisely control the structure and style of the output content with placeholders.
Basic usage: {{ 变量 | stringformat:"格式定义" }}
Integer formatting (
%d):If you have a stock quantityproduct.stockWith12345, and want to add "piece":{{ product.stock|stringformat:"%d件" }}Will be displayed12345件.Floating point formatting and precision control (
%f/%.nf):Combine%.nfCan control the precision of floating-point numbers, which isfloatformatsimilar tostringformatbut can also add additional prefixes or suffixes. For example, to display pricesproduct.price(199.998) Format as currency with a symbol and two decimal places:{{ product.price|stringformat:"¥%.2f" }}Will be displayed¥199.99.Percentage display:Assuming you have a discount rate
discount.rateIs0.75, you want to display as75%:{{ (discount.rate * 100)|stringformat:"%.0f%%" }}Will be displayed75%.(Note%%This indicates that a percentage sign is output.) Ifdiscount.rateIs directly75:{{ discount.rate|stringformat:"%d%%" }}Will also be displayed75%.
stringformatIts flexibility makes it a powerful tool for handling various numerical display scenarios, allowing you to build almost any desired numerical output format.
3.stampToDate: The exclusive timestamp formatting tool
Although it is not strictly in the format of 'number' formatting, the timestamp is essentially a string of numbers. Anqi CMS provides specialstampToDateThe label is used to convert timestamps into readable date and time formats. This is also formatting the numbers without changing the original timestamp data.
Basic usage: {{ stampToDate(时间戳, "格式") }}
- For example, you have the creation time of a document
article.CreatedTimeIt is a timestamp1675862400, you want to display as2023年02月09日:{{ stampToDate(article.CreatedTime, "2006年01月02日") }}Will be displayed2023年02月09日.
This "format" string follows the Go language's time formatting rules, using a specific reference time (2006-01-02 15:04:05) to define the output format.
Summary
Our CMS simplifies the development and maintenance of website content by providing a series of powerful and easy-to-use template filters.Whether it is to precisely control the decimal places of floating-point numbers, or to encapsulate numbers into custom text formats, or to convert timestamps into readable dates, these filters allow you to 'beautify' data at the template level without touching the original form of the backend data.This ensures data consistency and integrity, as well as great flexibility and convenience for front-end content display.