In the presentation of website content, the format and alignment of text often directly affect the reader's reading experience.Especially when creating AnQiCMS templates, we often encounter the need to align titles, phrases, or data lists to the center, left, or right according to a specific length.Although most layouts depend on CSS styles, in some cases, using the built-in string filters of the template can make it more flexible and efficient to achieve these detailed text layouts.

The AnQi CMS template engine provides several very practical string filters, including the followingcenter/ljustandrjustThese filters can help us accurately control the display length and alignment of strings without complex logical judgments.

centerFilter: Allows text to be centered gracefully

When you need to center a piece of text within a specified width,centerThe filter is your ideal choice. It will fill the appropriate number of spaces on both sides of the string according to the total length you set to achieve centering.

How to use: {{ 你的字符串变量 | center:指定长度 }}

For example:Assuming we have a title{{ article.Title }}To center it within a width of 20 characters, you can write it like this in the template: 

'{{ article.Title | center:20 }}'

Ifarticle.TitleThe value is "AnQiCMS"' AnQiCMS 'Here, 'AnQiCMS' occupies 7 characters, with a total length of 20.20-7=13 spaces, distributed on both sides, 6 on the left, 7 on the right (because 13 is an odd number, there will be one more on the right).

Actual application scenarios:Commonly used for short titles on list pages or news summaries, ensuring that the text is neatly centered in a fixed-width container, enhancing visual aesthetics.

ljustFilter: The concise way of text left alignment

When you need to fix the text to the left and fill the blank area on the right to reach a specified total length,ljustThe filter comes into play. It ensures that your text always starts from the left and is padded with spaces to the set total length.

How to use: {{ 你的字符串变量 | ljust:指定长度 }}

For example:If we want to name the product{{ product.Name }}Left-aligned within 20 characters width, it can be displayed like this:

'{{ product.Name | ljust:20 }}'

Ifproduct.NameThe value is 'High-performance server', the output will be:'高性能服务器 '“High-performance server” occupies 7 characters (assuming Chinese is counted as 1 character, but in actual Go language, it usually counts by rune, but the filling effect is visual), total length 20.The right side will be filled with 13 spaces.

Actual application scenarios:Very suitable for product names in the product list, or configuration item names, ensure that the text is aligned to the left, making it easy for users to quickly scan information.

rjustFilter: neatly aligned data to the right.

withljustOn the contrary,rjustThe filter is used to align text to the right and fill spaces on the left to reach a specified total length. This is particularly useful for data that needs to be aligned to the right, such as prices and quantities.

How to use: {{ 你的字符串变量 | rjust:指定长度 }}

For example:Assuming we want to display the price{{ item.Price }}right-aligned within a width of 10 characters, it can be done like this:

'{{ item.Price | rjust:10 }}'

Ifitem.Pricewith the value of “99.99”, the output will be:' 99.99'“99.99” takes up 5 characters, total length is 10. The left side will be filled with 5 spaces.

Actual application scenarios:Suitable for displaying numbers, dates, or status codes in table data, which can keep the data column visually aligned to the right, making it easier to compare and read.

Some considerations when using these filters.

  • Do not truncate if the length is insufficient:It should be noted that these three filters, when processing strings, if the length of the original string has already exceeded the length you specified,指定长度They will not truncate the string, but will output it as is. They are only responsible for padding the string when it is not of the specified length.
  • Handling non-English characters:The AnQi CMS template engine is friendly to the length calculation of multibyte characters (such as Chinese), and can correctly identify their width and perform corresponding padding. For example,{{ "你好世界"|center:20 }}Effect of visual centering can still be achieved.
  • Not a CSS layout:These filters align text by inserting spaces, which is different from using CSS styles (such astext-align: center;They have a different layout. They are more suitable for in-line text or phrase fine formatting, rather than as a solution for overall web layout.

By cleverly usingcenter/ljustandrjustThese simple filters can be implemented in the Anqi CMS template to achieve more expressive and standardized text display effects, thereby improving the overall quality of website content and the reading experience of users.

Frequently Asked Questions (FAQ)

  1. Ask: Will these filters trim my text? For example, if I specify a length of 10, but my text has 15 characters, will it cut off the extra? Answer:No.center/ljustandrjustFilters are non-destructive. If the length of your original string exceeds the specified指定长度They will output the entire string unchanged, without any truncation. They only fill in when the string length is insufficient.

  2. Ask: Can I use these filters to replace CSS for the entire page layout? Answer:Do not do this.These filters mainly align text by adding spaces in the string, which is a formatting method based on character width.For complex web layouts, you should continue to use CSS to control the position, size, and alignment of elements to achieve better responsive effects and maintainability.These filters are more suitable for text formatting in small ranges and fixed widths.

  3. Ask: Can these filters correctly handle the length of Chinese characters? For example, for the two characters 'Hello', will it be calculated as 2 characters in length? Answer:Yes, Anqi CMS template engine is friendly to the length calculation of Chinese characters (and other multi-byte characters).It correctly treats '你好' as a 2-character length and then performs centering, left-justified, or right-justified space padding based on this, ensuring accurate visual alignment.