In website content management, we often need to present text in an orderly and beautiful manner, especially when dealing with specific layouts or content that requires structured display. AnQiCMS's template engine provides several very practical string filters, specifically designed to control the alignment of text within a fixed width, and they are:center/ljustandrjust。Understand and make good use of them, which can help us control the display effect of the front-end page more finely.

Align the string to the center:centerFilter

Imagine, you want a short sentence or keyword to be centered within a fixed-width area.centerThe filter can help you achieve this goal. It will center the string at a specified width, filling the blank spaces on both sides with spaces.

UsecenterThe method of the filter is simple, you just need to add it after the string variable to be processed|center:指定宽度.

For example, we have a string “AnQiCMS”, and we want it to be centered within a total width of 15 characters:

'{{ "AnQiCMS"|center:15 }}'

The output result after executing this code will be:

'   AnQiCMS   '

It can be seen that, "AnQiCMS" itself occupies 7 characters, 15 - 7 = 8 spaces, it will fill in 4 spaces on both sides of the string to center it.

If the specified width is an odd number and the number of spaces to be filled is also odd, for example, to center 'GoLang' within a 11-character width:

'{{ "GoLang"|center:11 }}'

“GoLang” occupies 6 characters, 11 - 6 = 5 spaces. In this case,centerThe filter will tend to add an extra space on the right, the output will be:

'  GoLang   '

Also worth noting is that if your string is already longer than the specified width,centerThe filter does not truncate your string, but displays the string content in full. For example,'{{ "AnQiCMS"|center:5 }}'the output is still:'AnQiCMS'.

control the left alignment of the string:ljustFilter

Sometimes, we tend to align text to the left while maintaining a certain amount of spacing on the right. At this time,ljustThe 'auto' filter comes into play (which is the abbreviation for 'left justify'). It fills spaces on the right side of the string to reach the specified total width.

UseljustThe way of the filtercentersimilar:

'{{ "字符串"|ljust:指定宽度 }}'

We still use the string 'AnQiCMS', so that it is left-aligned within 15 characters

'{{ "AnQiCMS"|ljust:15 }}'

This line of code will output:

'AnQiCMS        '

The string “AnQiCMS” is displayed on the left, and 8 spaces are filled on the right to reach a total width of 15 characters.

andcenterFilter as well, if the length of the string itself is already greater than or equal to the width you specify,ljustthe filter will not perform any truncation or additional padding, it will output the original string directly.

Align text to the right:rjustFilter

WithljustRelative, if you want to align text to the right and leave the blank space on the left,rjust(That is the abbreviation of "right justify") filter is your ideal choice. It will fill spaces on the left of the string to reach the specified total width.

rjustThe usage syntax of the filter is consistent:

'{{ "字符串"|rjust:指定宽度 }}'

Let's use the string “AnQiCMS” again, and right-align it within a width of 15 characters:

'{{ "AnQiCMS"|rjust:15 }}'

This code will generate:

'        AnQiCMS'

This time, 8 spaces were filled on the left side of 'AnQiCMS', pushing the string to the right end.

Similarly, when the length of the string exceeds the specified width,rjustThe filter will also display the original string completely without truncation.

What is the use of these filters?

These seemingly simple string alignment functions can play a significant role in actual content operation and template design.

  • Neat display of fixed-width content.In generating email templates, SMS content, or certain fixed layout lists, ensure that titles, summaries, and other elements of different lengths maintain neat vertical alignment to enhance the reading experience.
  • Data report and list formattingWhen displaying data in plain text or preformatted text format (such as exporting logs or displaying code snippets in specific areas),ljustandrjustCan help you simulate the column alignment effect of tables.
  • Special text effects and artistic layoutIn the footer, sidebar, or some marketing blocks of the website, you may want certain keywords or brand names to be centered or skewed to one side in a unique way, combining CSS can create a more rich visual effect.
  • Unified website SEO information displayFor example, when generating structured data or Meta tags, if it is necessary to ensure that certain content has a fixed length alignment format, these filters can also provide help.

In short,center/ljustandrjustThese three filters provide us with flexible and powerful tools to control the display of strings in AnQiCMS.They help us overcome some limitations of plain text formatting, making the presentation of website content more professional and organized.

Common Questions (FAQ)

Q1：如果我指定的宽度小于字符串本身的长度，会发生什么？A1：不必担心，这些过滤器（English）center/ljust/rjustThey are all very smart. If the specified width is less than or equal to the actual length of the string, they will not truncate the string, but will display the original string content in full.

Q2：Besides spaces, can I use other characters (such as asterisks*or dashes-) to fill in the blanks?A2：These filters of AnQiCMS currently use spaces for padding by default and do not directly support custom padding characters.If your design requires other characters to be filled, you may need to combine other custom logic or CSS styles to achieve this.

Q3：我可以在AnQiCMS模板中的哪些地方使用这些字符串对齐过滤器？A3：您可以在AnQiCMS的任何模板文件（通常是English）.htmlIn the file suffix), anything that can be used{{ 变量 }}This is the place where you can output strings or numeric variables within double curly braces, and you can use these filters with them.For example, when displaying labels such as article lists, single page details, and system information, these filters can be applied to adjust the display format.