In web design, the layout and alignment of content are key elements of user experience.No matter if you want to center the title 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 a content management system developed based on the Go language, its core advantages lie in providing efficient, customizable content management and data output.It uses a syntax similar to the Django template engine, allowing you to combine system data (such as article titles, content, etc.) with HTML structure and CSS styles, and ultimately present it to the user.Therefore, the centering or alignment effect of text is usually achieved through HTML and CSS, two front-end technologies.The template function of AnQiCMS is the solid foundation for this combination.

Implement visual alignment of block-level elements and text

In the AnQiCMS template, the most commonly used and recommended method to achieve 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 alignment (text-align)If you want to center, left-align, or right-align text within a block-level element, an image (when treated as an inline element), or an inline-block element, you can usetext-alignProperty.

    • text-align: center;: Text aligned to center.
    • text-align: left;: Text aligned to the left (usually the default value).
    • text-align: right;: Text aligned to the right.
    • text-align: justify;: Text aligned to both ends.

    For example, in your template file (usually.htmlIn the file, if you want to center the title of an article, you can write it like this:

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

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

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

  2. To center the block-level elements themselves (margin: 0 auto;)For block-level elements with 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. Use Flexbox or Grid (modern layout)For more complex layout requirements, such as vertical centering, multi-column alignment, and so on, 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 stylesheet (recommended): Write all CSS code into a separate.cssfile (for examplestyle.css), and store it in/public/static/css/directory. Then in your template file (usuallybase.html）的<head>Link it in the tag. 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 automatically outputs the correct path to the static files of your website template.

  • Internal stylesheetIn a single HTML file's<head>Used in tags<style>tag to define styles. It is used for specific style adjustments on 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 stylesDirectly in the HTML element'sstyleStyle defined within the attribute. This method has the highest priority, but it makes the HTML code bulky and difficult to maintain, and is generally used only in very special cases.

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

The alignment filter for string content

In addition to aligning the visual layout through HTML and CSS, AnQiCMS's template engine also provides some special "filters" (Filters) forstring contentProcess itself to display centered or aligned within a fixed width.But this is different from the alignment of the above visual layout, it is filled at the character level, rather than controlling the rendering of HTML elements.

  • centerFilter: Center the string to the specified length, fill the insufficient part with spaces.

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

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

  • ljustFilter：Align a string to the left by a specified length, padding with spaces on the right if necessary.

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

    Output may be'左对齐文本 '.

  • rjustFilterRight-align the string to the specified length, with spaces filled on the left if it is not enough.

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

    Output may be' 右对齐文本'.

It should be noted thatThese filters are mainly used forprocessing of text strings.It is very useful when you need to output fixed-width text, such as in reports or list items.In a web page, 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 assist with the features provided by AnQiCMS.center/ljust/rjustFiltering criteria.

Frequent Questions (FAQ)