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

Refine the text to improve readability

The articles, product descriptions, and other content on our website may need to be displayed with different lengths in different scenarios (such as list pages, detail pages, sidebars).Text that is too long can take up too much space and affect the layout; text that is too short may not contain enough information.AnQiCMS's text filter is the tool to solve these problems.

Intelligent text truncation:truncatecharsWithtruncatewords

Suppose you have a long article summary and you want to display only the beginning part on the list page with an ellipsis automatically.truncatecharsThe filter can come into play. It will truncate the text to the specified number of characters and add it at the end.....

For example, if a 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 rather than character,truncatewordsIt is more appropriate, as it tries to truncate at the full word boundary, avoiding cutting a word in half. This 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 includes HTML tags (such as the article summary output from a rich text editor), use directlytruncatecharsortruncatewordsIt may destroy the HTML structure, causing the page to display abnormally. At this time, AnQiCMS provides a specialtruncatechars_htmlandtruncatewords_htmlFilter. They can intelligently截取HTML content, while ensuring the correct closing of tags to avoid page chaos. In using these filters with_htmlsuffixes, it is usually necessary to match them with|safeFilter, tells the template engine that this output is safe HTML and 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 HTML article content while preserving the HTML structure:{{ article.FullContent|truncatechars_html:100|safe }}

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

More text beautification: case and line breaks

In addition to truncation, AnQiCMS also provides some convenient text processing filters:

  • upperConvert all text to uppercase.
  • lower：Convert the entire text to lowercase.
  • title：Convert the first letter of each word in the text to uppercase.
  • capfirst：Convert only the first letter of the text to uppercase.

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

For processing multiline text,linebreaksbrfilters can convert newline characters in text into HTML tags directly.\nof<br/>Labels, allowing multiline content to be displayed correctly on the web page.

{{ comment.Content|linebreaksbr|safe }}

Accurate numbers, clearly conveying information.

When displaying prices, ratings, or any numbers with decimals, maintaining a consistent and clear format is crucial. The AnQiCMS number filter is exactly for this purpose.

Formatting floating-point numbers:floatformat

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

By default,floatformatprocess numbers intelligently. For example,{{ product.Price|floatformat }}will display numbers like34.00000as such.34while34.23234displayed as34.2It will automatically handle 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 retain two decimal places, even if34.00000it will be displayed as34.00. This is very practical for scenarios where product prices and other items need to be displayed with two decimal places.

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

A more general formatting:stringformat

Exceptfloatformat,stringformatThe formatter provides more flexible numeric and text formatting capabilities, similar to those in the Go language.fmt.Sprintf()Function. You can use various formatting verbs (such as%.2fto display floating-point numbers with two decimal places,%dto represent integers,%sto represent strings) to precisely 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 into a piece of text:{{ item.Views|stringformat:"已有%d人阅读" }}

Auxiliary number operations:addType conversion

For simple addition of numbers,addFilters can also be completed directly in the template, for example, if you want to display a hint of adding 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 perform formatting or calculations.integerandfloatThe filter can convert a string to an integer or a floating-point number, which is very useful when dealing with numbers obtained from non-strict data sources.

Common scenarios and practice suggestions

By flexibly using these filters, you can transform 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 abstract in the news list can betruncatewords_htmlto maintain the format完整性。
  • The price on the product detail page can befloatformat:2.
  • The comment content can belinebreaksbrto maintain the layout, and throughtruncatecharsTruncate during preview.
  • Statistics can be utilized according to requirements,stringformatAdd unit or prefix.

Some practical suggestions:

  1. Always perform.