In website content display, we often need to format text to make it more aesthetically pleasing and tidy in layout, especially in lists, tables, or areas requiring a unified visual effect.The powerful template engine of AnQiCMS provides various practical filters (filters) that can help us easily achieve centered, left-aligned, or right-aligned strings, and can be filled 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 organized.

AnQiCMS Template Filter's Powerful Function

AnQiCMS uses a template engine syntax similar to Django, one of its most distinctive features being its flexible and powerful filter mechanism.The filter allows us to perform various data conversion and formatting operations on variables output in the template, such as date formatting, string truncation, case conversion, etc.|Link variables and filters, if the filter requires parameters, use the colon:Pass.

It is this design that allows even complex string alignment requirements to be directly implemented at the template level with simple syntax, without modifying the backend code, greatly enhancing the efficiency and flexibility of template development.

Master the core filter for string alignment and centering display

To achieve string centering or alignment display according to a specified length, AnQiCMS mainly providescenter/ljustandrjustThese three filters. Each has 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.

1.centerFilter: Center align the string

centerThe function of the filter is to display a string centered within the specified total length.If the length of the string itself is less than the specified total length, spaces will be evenly padded on both sides of the string.If the number of spaces to be filled is odd, it usually lacks one space on the right.centerThe filter will not make any changes to the string.

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

Example demonstration:

We assume that 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:centerFilter filled 8 spaces on both sides of "test" to make the total length 20.Even strings containing Chinese characters can be correctly handled by AnQiCMS, with proper length calculation and center alignment. Chinese characters are correctly identified as occupying one character width.

2.ljustFilter: Align the string to the left.

ljustThe filter is used to align strings to the left within the specified total length.This means that if the length of the string is less than the target length, it will fill the right side of the string with enough spaces 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.

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

Example demonstration:

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

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

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

Output result:

'test                '
20
'你好世界      '

“test” string on the left remains unchanged, and 16 spaces are filled on the right. The Chinese string “你好世界” is also correctly filled with spaces on the right, achieving left alignment.

3.rjustFilter: Right-align the string

rjustFilter is related toljustIt aligns 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.rjustThe filter will not make any changes either.

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

Example demonstration:

Finally, we right-align the 'test' string, 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 on the right. The Chinese string is also padded with spaces on the left as expected.

Application scenarios and precautions

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

  • Aligning lists and tables:When displaying a series of text items of varying lengths (such as product names, prices, dates, etc.), and hoping that they form neat columns visually, these filters ensure that each item occupies the same width, avoiding a 'messy' feeling.
  • Report and data presentation:For pages that need to generate structured data reports, the alignment feature makes 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 fixed width and centered or aligned text to maintain the uniformity and beauty of the interface.

Caution:

  1. Target length and string length:Please 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 truncation is needed, consider using them in conjunction with.truncatecharsEnglish 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, Chinese characters are correctly recognized as occupying one character width when calculating string length and filling spaces, 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, then center it.
  4. HTML context:These filters are mainly used for the alignment and padding of plain text.If the text contains HTML tags, they will be treated as part of the string.striptags）。If it is only for adjusting the display style in HTML, it is usually recommended to use CSS text alignment properties.text-align,justify-contentetc.).

Summary

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

Common Questions and Answers (FAQ)

Q1: If my string is already longer than the specified target length, how will the filter handle it? A1: center/ljustandrjustThese three filters do not truncate or modify the string when the length of the string is greater than or equal to the specified target length. Instead, they output the string as is. If you need to truncate the string that is too long, it is recommended to use first.truncatecharsortruncatewordsEnglish filters for truncation, then apply the alignment filter.

Q2: Can these alignment filters be used with HTML tags? For example, I want to make a box that has<bold>Label title centered. A2:These filters are mainly designed for calculating the length and filling spaces of plain text content.If the variable value contains HTML tags, the filter will treat the HTML tags themselves as ordinary characters when calculating the length and performing alignment.This may result in unexpected display effects (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.text-align: center;ordisplay: flex; justify-content: center;).

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