How to optimize the display format of text and numbers using AnQiCMS filters (such as truncatechars, floatformat)?

How to make information concise, clear, and professional in website content operation?This is often a challenge faced by many operators. Whether it is a news summary, product description, or price data, statistics, if displayed in a chaotic manner, it not only affects the user experience but may also lead to a deviation in information transmission.AnQiCMS (AnQiCMS) understands this pain point, its powerful template engine is built-in with a series of practical filters that can help us easily optimize the display format of text and numbers, making your website content look fresh.

Refine text, enhance readability

The articles, product descriptions, and other content on our website may need to be presented in different lengths in different display scenarios (such as list pages, detail pages, sidebars).Long text takes up too much space and affects the layout; short text may not provide enough information.The text filter of AnQiCMS is exactly the tool to solve these problems.

Intelligent text truncation:truncatecharswithtruncatewords

Assuming you have a long article abstract and you want to only display the beginning part on the list page, and automatically add an ellipsis. At this time,truncatecharsThe filter comes into play. It will truncate the text according to the specified number of characters and add it at the end.....

For example, if the description of an article isarticle.DescriptionYou want it to display only the first 80 characters:{{ article.Description|truncatechars:80 }}

If you want to truncate by word instead of character,truncatewordsIt is more appropriate, it will try to truncate at the complete word boundary, avoiding cutting a word in half, which is especially useful in English content.

For example, truncate the article title to the first 15 words:{{ article.Title|truncatewords:15 }}

Truncate HTML content processing:truncatechars_htmlwithtruncatewords_html

When you are dealing with content that contains HTML tags (such as the article summary output by a rich text editor), use it directly.truncatecharsortruncatewordsIt may destroy the HTML structure, causing the page to display abnormally. At this time, AnQiCMS provides specialtruncatechars_htmlandtruncatewords_htmlFilters. They can intelligently extract HTML content while ensuring the correct closure of tags, avoiding page chaos. When using these suffix filters, it is usually necessary to cooperate with_htmlsuffix filters, it is usually necessary to cooperate with|safeA filter that tells the template engine that this output is safe HTML, and it does not need to be escaped again to prevent the browser from displaying it as plain text.

For example, extract the first 100 characters of an article containing HTML while preserving the HTML structure:{{ article.FullContent|truncatechars_html:100|safe }}

Similarly, truncate HTML content by word:{{ article.FullContent|truncatewords_html:20|safe }}

More text beautification: case and line breaks

AnQiCMS also provides some convenient text processing filters besides truncation:

• upper: Convert text to uppercase.
• lowerLowercase the entire text.
• titleCapitalize the first letter of each word.
• capfirstCapitalize only the first letter of the text.

These filters can help you unify the display style of text according to your design needs.

For processing multi-line text,linebreaksbrthe filter can convert the newline characters in the text into\nHTML directly.<br/>Label, allowing multiline content to be displayed correctly on the web page.

{{ comment.Content|linebreaksbr|safe }}

Precise numbers, clearly conveying information

It is crucial to maintain a consistent and clear format when displaying prices, ratings, or any numbers with decimals. AnQiCMS's number filter is exactly for this purpose.

Format floating-point numbers: floatformat

floatformatThe filter can help us accurately control the display format of floating-point numbers, avoiding redundant decimal places or unnecessary zeros.

By default,floatformatIt will intelligently handle numbers. For example,{{ product.Price|floatformat }}It will display numbers like34.00000as such.34while34.23234displayed as34.2It will automatically handle the trailing zeros and retain one decimal place (if non-zero).

If you need more precise control, you can specify the number of decimal places, for example.{{ product.DiscountPrice|floatformat:2 }}It will always keep two decimal places, even if34.00000it will also be displayed as34.00. This is very practical for scenarios such as product prices that need to be displayed with two decimal places.

You can even specify a negative number as the decimal places, for example{{ product.Weight|floatformat:"-3" }}It will round to the third decimal place.

A more general formatting:stringformat

exceptfloatformat,stringformatThe filter provides more flexible number and text formatting capabilities, similar to Go language'sfmt.Sprintf()function. You can use various formatting verbs (such as%.2fto represent floating-point numbers with two decimal places,%dto represent integers,%sto represent strings) to accurately control the output format.

For example, you want to display the product rating as "Rating: 4.5 points":{{ product.Rating|stringformat:"评分：%.1f分" }}

Or embed an integer in a piece of text:{{ item.Views|stringformat:"已有%d人阅读" }}

Auxiliary number operations:addWith type conversion

For simple addition of numbers,addFilters can also be completed directly in the template, for example, if you want to display a hint that adds one to the quantity of items in the shopping cart:{{ item.Quantity|add:1 }}

In some cases, you may need to ensure that the variable is of the correct numeric type in order to format or calculate.integerandfloatThe filter can convert a string to an integer or floating-point number, which is very useful when handling numbers from non-strict data sources.

Common scenarios and practical suggestions

By flexibly using these filters, you can convert raw data into information that is easy to read and understand, greatly enhancing the professionalism and user experience of the website. For example:

• The article title and summary in the news list can be usedtruncatewords_htmlto maintain the format.
• The price on the product detail page can be unified usingfloatformat:2.
• The comment content can be passed throughlinebreaksbrto maintain the layout and proceed throughtruncatecharsTruncate in preview.
• Statistical data can be used according to requirements.stringformatAdd units or prefixes.

Some practical suggestions:

1. **Always perform