What filter can be used to center align the string content in the AnQiCMS template?

During the AnQiCMS template creation process, we often need to fine-tune the text content on the page to achieve better visual effects and information presentation.Among them, the alignment of text is a fundamental but very important requirement.For the string content in the template, AnQiCMS provides some practical filters (filters) to help us achieve centering, left alignment, or right alignment.

To align the string content centrally, we can use the built-in AnQiCMS template engine'scenterFilter.This filter is very intuitive, its function is to format a string to the specified total length and center the string itself.centerThe filter will automatically add spaces to both sides of the string to achieve centering; if the length of the original string is already greater than or equal to the target length, it will output the original string directly without any trimming or padding.

UsecenterThe syntax of the filter is very simple, you just need to concatenate the string variable to be processed withcenterThe filter uses the pipe symbol|connected, andcenterfollowed by a colon:and the total length of the target (a number). For example:

{{ "我的网站标题" | center: 30 }}

This line of code will try to center the string "My website title" within a space of 30 characters.If the title of my website has 6 Chinese characters, one character counts as one character length, then its actual length is 12 (in UTF-8 encoding, a Chinese character usually takes up 3 bytes, but in character counting, it is usually counted as one character).Then, 30 minus 12 equals 18 spaces, which are roughly evenly distributed on both sides of the string to achieve a centered effect.

To fully meet the needs of typesetting, AnQiCMS also providesljustandrjustthese two filters, which are associated withcenterThe filter functions are similar, but they are used separately to implement the left and right alignment of strings.

• ljustFilter (left aligned):Pad a string to a specified total length and fill with spaces on the right to make the string left-aligned.

  
  {{ "产品名称" | ljust: 25 }}
  

• rjustFilter (right-aligned):Right-justify a string to a specified total length by padding spaces on the left.

  
  {{ "价格：99.99元" | rjust: 20 }}
  

When using these filters, be aware that they are applied inthe string level.Perform the operation, by adding actual space characters to change the visual length and internal alignment of the string. This is similar to the CSS (Cascading Style Sheets) in thetext-align: center;The properties are different, CSS controls the rendering of element content, and these filters directly modify the content of the string.Therefore, they are more suitable for those who need precise control over character spacing or aligning plain text within a fixed-width area, such as generating simple text reports, formatting code output, or building character-based table layouts.For more complex webpage layouts and centering of HTML elements, we usually still depend on CSS styles to achieve this.

In short, in the AnQiCMS templatecenterThe filter provides a simple and effective way to center-align string content. CombinedljustandrjustWe can flexibly control the alignment direction of text, making the output text information of the template more neat and beautiful.

Frequently Asked Questions (FAQ)

1.centerFilters and CSS oftext-align: center;What is the difference?

The main difference lies in the level of action.centerThe filter iswhen rendering backend templatesby adding actual space characters on both sides of the stringAdd actual space charactersTo change the length and content of the string itself to achieve a centered visual effect. It modifies the stringthe data itself. While CSS'stext-align: center;isbrowser-side rendering timeControl the internal HTML elementsHow to display text contentIt does not change the string data, but changes the layout of the text.Generally, it is recommended to use CSS to center HTML elements because CSS provides stronger layout control capabilities and responsive design support.

2.centerCan the filter center the string containing HTML tags?

centerThe filter will wrap HTML tags (such as<strong>/<p>) As ordinary text characters to calculate the length and fill. For example,{{ "<strong>标题</strong>" | center: 30 }}It will<strong>标题</strong>Add spaces to both sides of this string.It does not parse HTML tags and does not use CSS to center.<div>) In, and apply CSS styles to the element (such as),margin: 0 auto;ortext-align: center;)

3. If I set目标总长度Less than the actual length of the original string,centerHow will the filter handle?

When the actual length of the original string is greater than or equal to the one you pass throughcenterThe filter is set to目标总长度then,centerThe filter does not trim any strings or add any spaces. It outputs the complete content of the original string. This meanscenterThe filter is mainly used to fill and align when there is enough space, not for truncating strings. If you need to truncate a string, you can consider usingtruncatecharsortruncatewordsand related filters.