In website design, the layout and alignment of content are key elements of user experience.Whether you want to center the title display or align the paragraph text to the left, AnQiCMS provides a flexible template mechanism, combined with standard Web technology, which can easily meet these needs.

AnQiCMS as an content management system based on Go language, its core advantage lies in providing efficient and customizable content management and data output.It uses a syntax similar to Django template engine, allowing you to combine system data (such as article titles, content, etc.) with HTML structure and CSS styles, and finally present it to the user.Therefore, the centering or alignment effect of the text is usually achieved through HTML and CSS, both of which are front-end technologies.AnQiCMS's template function is a solid foundation for this combination.

Implement visual alignment of block-level elements and text

In AnQiCMS templates, the most commonly used and recommended method for achieving visual alignment of text or block-level elements is to use CSS (Cascading Style Sheets).CSS provides various properties to precisely control the layout of page elements.

  1. Text alignmenttext-align)If you want to center, left-align, or right-align the text, images (when treated as inline elements), or inline-block elements within a block-level element, you can usetext-alignproperties.

    • text-align: center;：Text centered alignment.
    • text-align: left;：Text left alignment (usually the default value).
    • text-align: right;：Text right alignment.
    • text-align: justify;：Text justified alignment.

    For example, in your template file (usually,.html文件）中，If you want to center a title of an article, you can write it like this:

    <h1 style="text-align: center;">{{ archive.Title }}</h1>

    Or, it is recommended to use CSS classes to control:

    <style>
    .centered-title {
        text-align: center;
    }
</style>
<h1 class="centered-title">{{ archive.Title }}</h1>

  2. Block-level elements to be centered (margin: 0 auto;)For blocks with a fixed width (width), you can achieve horizontal centering by setting the left and right margins toauto.

    <div style="width: 800px; margin: 0 auto; border: 1px solid #ccc;">
    <p>这是居中显示的块级元素。</p>
</div>

    Similarly, it can also be combined with CSS classes.

  3. Using Flexbox or Grid (Modern Layout)For more complex layout requirements, such as vertical centering, multi-column alignment, etc., Flexbox (Flexible Box) and Grid (Grid Layout) are powerful tools of modern CSS.

    • Flexbox Centering Example: 
      
<style>
    .flex-container {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        height: 200px; /* 设定高度以看到垂直居中效果 */
        border: 1px solid #ccc;
    }
</style>
<div class="flex-container">
    <span>{{ archive.Description }}</span>
</div>

Apply CSS in AnQiCMS Template

You can apply CSS styles to any HTML element in the AnQiCMS template. The most common methods are three:

  • External style sheet (recommended)：Write all CSS code into a separate.cssfiles (for example)style.css），and store it in/public/static/css/directory. Then in your template file (usuallybase.html) of<head>Link it in the label. This helps to keep the code neat and maintainable.

    <link href="{% system with name="TemplateUrl" %}/css/style.css" rel="stylesheet">

    Here{% system with name="TemplateUrl" %}The tag will automatically output the correct path to the static files of your website template.

  • Internal stylesheetIn a single HTML file,<head>the label use<style>tag is used to define styles. It is suitable for specific style adjustments for the current page only.

    <head>
    <style>
        .my-special-content {
            text-align: right;
            color: blue;
        }
    </style>
</head>
<body>
    <p class="my-special-content">这段文字右对齐。</p>
</body>

  • Inline styles: directly on the HTML element,styleThe style is defined in the attribute. This method has the highest priority, but it will make the HTML code bulky and difficult to maintain, and it is generally used only in very special cases.

    <p style="text-align: center; color: red;">这段文字居中且为红色。</p>

string content alignment filter

In addition to visual alignment through HTML and CSS, AnQiCMS's template engine also provides some special "filters" for alignment.string contentPerform processing itself to display text centered or aligned within a fixed width.This is different from the visual layout alignment mentioned above, which fills at the character level rather than controlling the rendering of HTML elements.

  • centerFilterCenter a string to a specified length, padding with spaces if necessary.

    '{{ "测试文本"|center:20 }}'

    This code will place the text 'test text' in the center of a 20-character wide area, padded with spaces on both sides. For example, the output may be' 测试文本 '.

  • ljustFilter：The string is aligned to the left by the specified length, and spaces are filled on the right if the part is insufficient.

    '{{ "左对齐文本"|ljust:20 }}'

    output may be'左对齐文本 '.

  • rjustFilter：The string is aligned to the right by the specified length, and spaces are filled on the left if the part is insufficient.

    '{{ "右对齐文本"|rjust:20 }}'

    output may be' 右对齐文本'.

It should be noted thatThese filters are mainly used fortext string processingIt is very useful when you need to output fixed-width text (such as reports, list items).In web pages, browsers default to collapsing multiple spaces, so using these filters to try to achieve visual alignment of HTML elements may not be very obvious or meet expectations.Visual alignment should always take precedence over CSS styles.

In summary, to achieve text centering or alignment in AnQiCMS templates, you should utilize standard Web technologies: by writing HTML structure in the template and using CSS styles to control its visual layout. At the same time, for special formatting needs of string content, you can also assist with the features provided by AnQiCMS.center/ljust/rjustFilter.

Frequently Asked Questions (FAQ)