In website operation, we often need to display various data, among which percentage data is particularly common.Whether it is the completion rate, growth rate, discount information, or other statistics, clearly and accurately presenting percentages and ensuring a uniform format for decimal places is crucial for improving user experience and website professionalism.AnQiCMS provides a flexible template system, which, combined with its powerful filter functions, can easily meet this requirement.

Data Storage: The Basics Are Key

In AnQi CMS, percentage data is typically not stored directly in the database as a string like '75%', but rather as a numerical value.This is mainly for the convenience of subsequent calculations and statistics.

  1. Decimal Format:For example, 75% is stored as 0.75. This is the recommended way because it is closer to the mathematical definition and is more intuitive during multiplication, division, and other operations.
  2. Integer form:For example, 75% is stored as 75. This method is also applicable in certain specific scenarios, but extra attention must be paid in the template to determine if it needs to be divided by 100 to restore the original ratio.

To facilitate management and expansion, we usually add custom fields to store these percentage data in it.Content ModelFor example, you can create a field named “Completion Rate” (completion_rate) ofnumeric typeField, and set it to a floating-point number, so you can store precise values like 0.75.

Percentage presentation in the template: The core is the filter.

The template system of AnQi CMS adopts syntax similar to Django, where Filters are powerful tools for processing data formats. When displaying percentage data, we can utilizefloatformatorstringformatThese filters allow for precise control of decimal places and adding a percentage sign.

Suppose we have obtained a field named from a content model.completion_ratewith the value0.75.

Method one: usefloatformatPrecise control of decimal places

floatformatThe filter is mainly used for formatting floating-point numbers, and it can easily retain numbers to the specified decimal places.

Firstly, we need to multiply the percentage data stored as a decimal (such as 0.75) by 100 to convert it to an integer percentage (such as 75), and then perform decimal place control.

{# 假设 item.completion_rate 的值为 0.75 #}
{% set raw_percentage = item.completion_rate * 100 %}
{# 将结果保留两位小数，并添加百分号 #}
{{ raw_percentage|floatformat:2 }}%
{# 输出结果为：75.00% #}

Herefloatformat:2Represents formatting a number to two decimal places. If you wish to not display decimals, you can writefloatformat:0. To dynamically control the number of decimal places, you can adjust according to the actual situationfloatformatthe following number.

To make the code more concise, you can also place the multiplication operation directly before the filter, as the template engine of Anqi CMS supports this chaining operation:

{# 假设 item.completion_rate 的值为 0.75 #}
{{ (item.completion_rate * 100)|floatformat:2 }}%
{# 输出结果为：75.00% #}

Method two: usestringformatPerform more flexible formatting

stringformatThe filter provides something similar to the Go languagefmt.Sprintf()的功能，can perform more refined string formatting on various types of data. It allows specifying the number of decimal places and inserting a percentage sign directly in the format string.

Similarly, we first need to convert decimal percentage data to integer percentages.

{# 假设 item.completion_rate 的值为 0.75 #}
{% set raw_percentage = item.completion_rate * 100 %}
{# 使用stringformat格式化为两位小数的百分比 #}
{{ raw_percentage|stringformat:"%.2f%%" }}
{# 输出结果为：75.00% #}

Here%.2fRepresents a floating-point number formatted to two decimal places,%%This indicates outputting a literal percentage sign. The advantage of this method is that it is more compact and can complete both number formatting and the addition of the percentage sign within a single filter.

If your data is in integer form (for example,item.completion_ratestored as75), then you can apply the filter directly without multiplying by 100:

{# 假设 item.completion_rate 的值为 75 #}
{{ item.completion_rate|floatformat:2 }}%   {# 输出：75.00% #}
{{ item.completion_rate|stringformat:"%.2f%%" }} {# 输出：75.00% #}

The choice of method depends on personal preference and specific needs.floatformatIntuitive and easy to understand,stringformatwhich provides more powerful formatting capabilities.

Consideration of practical application scenarios

In actual use, you may obtain percentage data from different places:

  • Custom fields in the documentation:As mentioned above, fields defined in the content model,archiveDetailorarchiveListtags to getitem.your_percentage_field.
  • System settings or contact information:If there is a background of the[en] Global function settingsorContact information settingspercentage data is included, you can usesystemorcontactTag acquisition, then apply the filter.
  • Other tags output:Any template tag that outputs a numerical value and returns a numeric type can be formatted using the above filter.

It is important to maintain consistency in the percentage display format throughout the entire website.For example, if you decide to uniformly retain two decimal places, then the same formatting rules should be used in all related template segments, so that users can read in a coherent and professional manner.

Summary

The template system of AnQi CMS, combined with built-in filters, provides a simple and efficient solution for displaying percentage data. Whether throughfloatformatprecise control of decimal places, or by usingstringformatAchieve more flexible formatting that can help us present data to users in a clear and professional manner. Mastering these skills will make your website content more refined and readable.

Common Questions (FAQ)

Q1: How to store percentage data in AnQi CMS so that it can be displayed correctly on the front end?

A1:It is recommended in AnQi CMS'sContent ModelCreate a new custom field for percentage data, and selectnumeric type. It is best to store it in decimal form for easy calculation and formatting, such asdecimal formatstored as0.75[en] Such that it can be directly multiplied by 100 in the templatefloatformatorstringformatFilter.

Q2: How should I correctly format and add a percentage sign in the template if my percentage data is already in integer form (e.g., 75 represents 75%)?

A2：If the data is already stored in integer form (for example75), there is no need to multiply by 100 in the template. You can apply this field directly tofloatformatorstringformatFilter to control decimal places and add percentage signs. For example:{{ item.your_integer_field|floatformat:2 }}%or{{ item.your_integer_field|stringformat:"%.2f%%" }}.

Q3: I need to display a progress bar on the page with percentage values. How do I do that?

A3:Displaying a progress bar usually involves front-end HTML and CSS (and sometimes JavaScript). The Anqi CMS template is responsible for providingValueYou can format the percentage data into pure numbers (without the percentage sign) as described in the previous text, for example{{ (item.completion_rate * 100)|floatformat:0 }}Then use this number as an attribute of an HTML element, such asdata-progress="75"）or directly inserted into the element content. Then, use CSS (for examplewidth: {{ (item.completion_rate * 100)|floatformat:0 }}%;) to dynamically set the length of the progress bar. JavaScript can be used for more complex dynamic effects or animations.