How to use AnQiCMS filter to display strings centered or aligned to a specified length?

In website content display, we often need to format text to make it more aesthetically pleasing and tidy, especially in lists, tables, or areas requiring a unified visual effect.AnQiCMS (AnQiCMS) powerful template engine provides a variety of practical filters (filters), which can help us easily achieve the centering, left alignment, or right alignment of strings, and can be filled according to a specified length.

This article will introduce in detail how to use AnQiCMScenter/ljustandrjustThese three core filters will make your website content display more professional and orderly.

The powerful function of AnQiCMS template filters

AnQiCMS uses a template engine syntax similar to Django, one of its most prominent features is the flexible and powerful filter mechanism.The filter allows us to perform various data transformations and formatting operations on the variables output by the template, such as date formatting, string truncation, case conversion, etc.Its usage is very intuitive, through a vertical line symbol|Connect variables and filters, if the filter requires parameters, use a colon:Pass.

This design makes it possible to directly implement complex string alignment requirements through simple syntax at the template level, without modifying the backend code, greatly enhancing the efficiency and flexibility of template development.

Master the core filter for string alignment and center display

To achieve string centering or alignment of specified length, AnQiCMS mainly providescenter/ljustandrjustThese three filters. They each have a different alignment direction, but they all follow the same principle: when the actual length of the string is less than the target length, spaces are used to fill it.

1.centerFilter: Center align the string

centerThe filter is used to center a string within a specified total length.If the length of the string itself is less than the specified total length, it will be uniformly padded with spaces on both sides.If the number of spaces to be filled is odd, it usually lacks one space on the right.If the length of the string has already been greater than or equal to the specified length,centerThe filter will not make any changes to the string.

the syntax: {{ 变量 | center: 目标长度 }}

Example demonstration:

Assuming we want to center the string "test" within a width of 20 characters:

'{{ "test"|center:20 }}'
{{ "test"|center:20|length }} {# 检查输出字符串的实际长度 #}

'{{ "你好世界"|center:20 }}' {# 包含中文字符的示例 #}

Output Result:

'        test        '
20
'        你好世界        '

As can be seen from the example,centerThe filter filled 8 spaces on either side of "test" to make the total length 20.Even strings containing Chinese characters, AnQiCMS can correctly handle their length and center alignment, and Chinese characters are correctly recognized as occupying one character width.

2.ljustFilter: Aligns the string to the left.

ljustThe filter is used to left-align a string within a specified total length.This means that if the length of the string is less than the target length, it will be padded with enough spaces on the right to reach the target length.centerSimilar, if the length of the string has reached or exceeded the target length,ljustthe filter will not make any modifications to it.

the syntax: {{ 变量 | ljust: 目标长度 }}

Example demonstration:

Now we will align the string "test" to the left, with a target length of 20:

'{{ "test"|ljust:"20" }}'
{{ "test"|ljust:"20"|length }}

'{{ "你好世界"|ljust:10 }}'

Output Result:

'test                '
20
'你好世界      '

“test” string remains unchanged on the left, with 16 spaces filled on the right. The Chinese string “Hello World” is also correctly filled with spaces on the right, achieving left alignment.

3.rjustFilter: Align string to the right

rjustthe filter meetsljustOn the contrary, it will align the string to the right within the specified total length.This means that if the length of the string is less than the target length, it will fill the left side of the string with enough spaces.Similarly, if the length of the string has reached or exceeded the target length,rjustThe filter will not make any modifications.

the syntax: {{ 变量 | rjust: 目标长度 }}

Example demonstration:

Finally, we align the string 'test' to the right, with a target length of 20:

'{{ "test"|rjust:"20" }}'
{{ "test"|rjust:"20"|length }}

'{{ "你好世界"|rjust:10 }}'

Output Result:

'                test'
20
'      你好世界'

This 'test' string has been padded with 16 spaces on the left to display it right-aligned. Chinese strings are also padded on the left as expected.

Application scenarios and precautions

These filters can be very useful in many scenarios, helping to display your website content with higher professionalism:

• Align lists and tables:When you need to display a series of text items of different lengths (such as product names, prices, dates, etc.), and hope that they form a neat column visually, these filters can ensure that each item occupies the same width, avoiding a sense of 'unevenness'.
• Report and Data Presentation:For pages that need to generate structured data reports, alignment features make the data easier to read and compare.
• User Interface (UI) Elements:Some UI elements, such as menu items, status labels, or progress displays, may need to have a fixed width and be centered or aligned to maintain the consistency and aesthetics of the interface.

Note:

1. The target length and string length:Remember that if the string itself has already reached or exceeded the target length you specified, these filters will not truncate or modify it, but will output it as is. If you need to truncate, consider using it in conjunction withtruncatecharsEqual extraction filter.
2. Character encoding processing:AnQiCMS is developed in Go language and has good support for UTF-8 encoded characters (including Chinese characters).Therefore, when calculating string length and filling spaces, Chinese characters are correctly recognized as occupying the width of one character, and there will be no garbled text or misalignment issues.
3. Combined with other filters:You can flexibly combine these alignment filters with other filters to achieve more complex formatting requirements. For example, first truncate the text and then align it centrally.
4. HTML context:These filters are mainly used for the alignment and padding of plain text. If the text contains HTML tags, they will treat the tags as part of the string when processing.Therefore, use with caution when handling content containing HTML, or remove the HTML tags first before applying these filters (for example, usingstriptags）。If it is just to adjust the display style in HTML, it is usually recommended to use CSS text alignment properties（text-align,justify-contentetc.).

Summary

Provided by AnQiCMScenter/ljustandrjustA filter that provides simple and powerful tools for website content developers to easily control the alignment and display length of strings.By reasonably utilizing these filters, we can make the layout of the website more accurate and beautiful, thereby enhancing the reading experience and professional perception of the content.Encourage you to try these filters in actual projects, explore more possibilities in different scenarios.

Frequently Asked Questions (FAQ)

Q1: If my string is already longer than the specified target length, how will the filter handle it? A1: center/ljustandrjustThese filters do not truncate or modify the string when the length of the string is greater than or equal to the specified target length, but output it as is. If you need to truncate long strings, it is recommended to usetruncatecharsortruncatewordsApply the filter to extract, and then apply the alignment filter.

Q2: Can these alignment filters be used with HTML tags? For example, I want to make a tag with<bold>Label title centered. A2:These filters are mainly aimed at calculating the length and filling spaces of plain text content.If the value of your variable contains HTML tags, the filter will treat the HTML tags themselves as ordinary characters when calculating length and alignment.This may result in an unexpected display effect (for example, HTML tags are filled with spaces, or the internal text is not truly centered).Therefore, it is usually not recommended to use these alignment filters directly on strings containing HTML tags.For aligning HTML elements, it is recommended to use CSS styles (such astext-align: center;ordisplay: flex; justify-content: center;)

Q3: Can I dynamically set the alignment 'target length' instead of setting a fixed number? A3:Of course you can. AnQiCMS templates support the use of variables, you can store the target alignment length in a variable, and then pass the variable to the filter.For example, you can use it in the template{% set column_width = 30 %}Define a variable and then use the filter `{{ my_string | center