In website operations, we often need to display various data, among which percentage data is particularly common.No matter whether it is the completion, growth rate, discount information, or other statistics, it is crucial to present percentages clearly and accurately, and ensure uniform decimal format, which is essential for improving user experience and website professionalism.AnQiCMS provides a flexible template system that can be easily realized with its powerful filter function.

Data storage: The foundation is key

In Anqi CMS, percentage data is usually not stored directly in the database in the form of a string like '75%', but as a numerical value.This is mainly for the convenience of subsequent calculations and statistics. There are usually two storage methods:

  1. Decimal form: For example, 75% is stored as 0.75. This is recommended because it is closer to the mathematical definition and is more intuitive for multiplication, division, and other operations.
  2. Integer form: For example, 75% is stored as 75. This method is also applicable in some specific scenarios, but it needs to be paid attention to in the template whether it needs to be divided by 100 to restore the original proportion.

To facilitate management and expansion, we usually addContent modelcustom fields to store this percentage data. For example, you can create a field named “Completion rate”completion_rate）的numeric typeField, and set it to a floating-point number so that you can store precise values like 0.75.

The percentage display in the template: The core is the filter.

The AnQi CMS template system uses syntax similar to Django, where Filters are powerful tools for processing data formats. When displaying percentage data, we can usefloatformatorstringformatThese two filters are used to precisely control decimal places and add percentage signs.

Assuming we have obtained a named from some content modelcompletion_ratewith a value of0.75.

Method one: usefloatformatPrecisely control decimal places

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

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

{# 假设 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 want to display no decimal, you can writefloatformat:0. If you need 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, the template engine of Anqicms supports this chained operation:

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

Method two: usestringformatPerform more flexible formatting

stringformatthe filter provides a language similar to Gofmt.Sprintf()The function can perform more fine-grained string formatting on various types of data. It can directly specify decimal places and insert percentage signs in the format string.

Similarly, we first need to convert decimal percentage data into 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, and%%This indicates the output of a literal percentage. This method has the advantage of being more compact, allowing for both number formatting and the addition of a percentage sign within a single filter.

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

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

Which method to choose depends on personal preference and specific needs.floatformatStraightforward and easy to understand,stringformatthen 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 document:As mentioned above, the fields defined in the content model are accessed througharchiveDetailorarchiveListtag to obtainitem.your_percentage_field.
  • System settings or contact information:If the background containsGlobal feature settingsorContact information settingspercentage data, you can usesystemorcontactLabel acquisition, then apply the filter.
  • Other label output:Any template label that outputs a numerical value can be formatted through the above filter.

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

Summary

The AnQi CMS template system, combined with built-in filters, provides a simple and efficient solution for displaying percentage data. Whether it is throughfloatformatprecisely controlling decimal places, or usingstringformatImplement more flexible formatting, which can all help us present data to users in a clear and professional manner. Mastering these skills will make your website content more refined and readable.

Frequently Asked 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 to use Anqi CMS'sContent modelIn, create a new custom field for percentage data and selectnumeric type. For ease of calculation and formatting, it is best to usedecimal formatstored, for example, 75% stored as0.75. This can be directly multiplied by 100 and appliedfloatformatorstringformatfilter.

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

A2: If the data is already stored in integer form (for example75), then there is no need to multiply by 100 in the template. You can apply it directly to the fieldfloatformatorstringformatFilter to control decimal places and add a percentage sign. 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 a percentage value, how do I do that?

A3: Show progress bars usually involve front-end HTML and CSS (and sometimes JavaScript). Anqi CMS template is responsible for providingNumberYou 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.