In website content management, we often need to present text in a neat and beautiful manner, especially when dealing with specific layouts or structured display content. The AnQiCMS template engine provides several very practical string filters that are specifically used to control the alignment of text within a fixed width, they arecenter/ljustandrjust. Understand and make good use of them, as they can help us finely control the display effect of the front-end page.

Align the string centrally:centerFilter

Imagine, you want a certain 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, and any insufficient whitespace will be filled with spaces on both sides.

UsecenterThe method of the filter is very simple, you just need to add it to the string variable you want to process|center:指定宽度Just do it.

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 after executing this code will be:

'   AnQiCMS   '

You can see, 'AnQiCMS' itself occupies 7 characters, 15 - 7 = 8 blank characters, it will fill 4 spaces on both sides of the string to center it.

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

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

“GoLang” takes up 6 characters, 11 - 6 = 5 spaces in this case,centerThe filter will tend to fill one more space on the right, the output will be:

'  GoLang   '

Another point to note is that if the string itself is longer than the specified width,centerThe filter does not truncate your string, but instead displays the entire string content. For example'{{ "AnQiCMS"|center:5 }}'The output remains'AnQiCMS'.

To control the left alignment of the string:ljustFilter

Sometimes, we tend to keep the text tightly aligned to the left, while leaving some space on the right. At this point,ljustThat is the abbreviation of 'left justify', the filter comes into play. It will fill spaces on the right side of the string to reach the specified total width.

UseljustThe way of filter withcentersimilar:

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

We still use the string "AnQiCMS", to be left-aligned within 15 character widths:

'{{ "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.

andcenterThe filter is the same, 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 strings to the right:rjustFilter

withljustRelative, if you want to align text to the right and leave the blank space on the left, thenrjust(Abbreviation for 'right justify') Filter is your ideal choice. It will fill spaces on the left of the string to reach the specified total width.

rjustThe filter usage syntax remains consistent:

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

Let's use the string “AnQiCMS” again, aligning it to the right 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.

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

What are the uses of these filters?

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

  • Uniform display of fixed-width content.When generating emails, SMS content, or fixed layout lists, ensure that titles, summaries, and others of different lengths are neatly vertically aligned to enhance the reading experience.
  • Data report and list formattingWhen it is necessary to display 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 a table.
  • Special text effects and artistic typesettingIn the footer, sidebar, or some marketing blocks of the website, you may want some keywords or brand names to be centered or biased to one side in a unique way. Combined with CSS, it can create a richer visual effect.
  • Unified website SEO information displayFor example, when generating structured data or Meta tags, if you need to ensure that certain content is aligned in a fixed length format, these filters can also provide help.

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

Frequently Asked Questions (FAQ)

Q1: If the specified width is less than the length of the string itself, what will happen?A1: Don't worry, these filters(center/ljust/rjustThey are all very intelligent. If the specified width is less than or equal to the actual length of the string, they will not truncate the string at all, but will display the original string content in full.

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

Q3: Where can I use these string alignment filters in the AnQiCMS template?A3: You can use AnQiCMS in any template file (usually .htmlIn the file suffix, all that can be used{{ 变量 }}This is where the double curly braces output strings or numeric variables, and can be配合 these filters.For example, these filters can be applied when displaying tags such as article lists, single-page details, and system information to adjust the display format.