As an experienced website operations expert, I know in my daily work that the quality of template writing in the Content Management System (CMS) is crucial for the overall performance of the website.AnQiCMS Thanks to its concise and efficient architecture and the performance advantages of the Go language, it provides us with powerful content management capabilities.However, even the most powerful tools require good habits to bring out their full potential, among which, the 'whitespace control' during template writing is a commonly overlooked yet profound detail.

Today, let's delve into how to develop good blank control habits in the process of writing AnQiCMS templates, making your templates cleaner and more efficient.

Why is it so important to control the blank template?

Perhaps you will be puzzled, what's the big deal about a few extra spaces or blank lines? But the fact is, good habits of white space control are not only about the 'face' of template code, but also affect its 'interior':

  1. Improve readability and maintainability:Uniform spacing and clear hierarchy make the template code easy to understand.Whether it is your own future review or team collaboration when others read, it can greatly reduce the cost of understanding and improve maintenance efficiency.
  2. Ease debugging and troubleshooting:When unexpected layout or rendering issues occur on the page, chaotic whitespace is often 'the accomplice.' Standard whitespace can help you locate the boundaries of code blocks more quickly, narrowing down the troubleshooting scope.
  3. Ensure the purity of HTML output:Especially when dealing with inline elements (<span>/<a>When certain CSS layouts are used, or when some special CSS layout is used, extra newline characters or spaces in the template may lead to unnecessary spacing in the final generated HTML, thereby affecting the visual effect of the page.Although modern browsers have good tolerance for such issues, developing the habit of clean output can save you a lot of detours when encountering tricky compatibility issues.
  4. The cornerstone of team collaboration:In a team project, a unified blank control specification is an important part of ensuring consistent code style.It reduces formatting conflicts caused by individual habits, making code review focus more on business logic rather than trivial formatting issues.

The core principle of AnQiCMS template blank control

AnQiCMS template uses syntax similar to Django template engine, with.htmlas file extension, and follows a clear directory structure (refer todesign-convention.mdanddesign-director.mdUnderstanding its grammar features is the premise for effective blank control.

  1. Consistency is the golden rule:No matter whether you prefer a compact format or a loose layout, the most important thing is to maintain consistency throughout the entire project and even the team.Choose a style and stick to it, which is much better than frequently switching or mixing arbitrarily.
  2. Logical grouping and line spacing:Like writing an article, divide the template code into logical paragraphs. Use blank lines to separate different functional modules, loops, and conditional judgment blocks. For example, when defining{% categoryList %}After, you can leave a blank line and start{% for item in categories %}.
  3. Well-defined indentation:Use consistent indentation (such as, 2 or 4 spaces, or tabs) to reflect the nesting relationship and hierarchy of HTML elements and template logic. In AnQiCMS templates,<head>/<body>English HTML tags, as well as{% if %}/{% for %}control flow tags should have clear indentation.

Practical blank control techniques in AnQiCMS templates

AnQiCMS template engine provides some very practical features that can help us precisely control the whitespace in the output.

1. Precisely control the output of whitespace characters.{%-and-%}

This is the most direct and powerful blank control tool in the AnQiCMS template, intag-remove.mdThere are detailed explanations.By default, the template engine will also output newline characters and spaces around the tags to the final HTML.-), we can tell the engine to remove these extra spaces:

  • {%- tag -%}：Remove all whitespace characters (including newlines) from both sides of the label.
  • {%- tag %}：Remove only whitespace characters from the left side of the label.
  • {% tag -%}：Remove only whitespace characters from the right side of the label.

Example:Assume we have a loop, if we do not control the blank, it may produce many blank lines.

{# 默认输出，可能产生多余空行 #}
<ul>
    {% for item in archives %}
        <li>{{ item.Title }}</li>
    {% endfor %}
</ul>

{# 使用 {% -%} 精准控制空白 #}
<ul>
    {%- for item in archives -%}
        <li>{{ item.Title }}</li>
    {%- endfor -%}
</ul>

In the above example, the second syntax generates a more compact HTML output, avoiding<li>unnecessary line breaks before and after the tag. Similarly, inifthe statement also applies:

<div>
    {%- if condition -%}
        <p>这是条件内容</p>
    {%- else -%}
        <p>这是其他内容</p>
    {%- endif -%}
</div>

This will ensuredivThe internalpTags will not causeifExtra line breaks or spaces due to tags.

2. Make good use ofinclude,extends,macroOrganizational structure

tag-tags.mdThe document details theinclude/extendsandmacro. These auxiliary tags are not only for code reuse, but also indirect means to achieve good blank control:

  • extends(Template Inheritance):Define a basic layoutbase.html，where it includes the overall structure of the page, CSS/JS references, navigation, and other common parts. The variable content is wrapped in.{% block %}tags. Subtemplates pass through.{% extends 'base.html' %}inheritance and rewrite.blockThis makes each template focus only on the blank control of its own core content, avoiding repetition and redundancy.
  • include(Introduction of code snippet):Split the header, footer, sidebar, or any reusable code snippet into separate.htmlfiles, then{% include "partial/header.html" %}each one isincludeThe files can be independently controlled for blank space without interference. UsewithWhen passing variables, pay attention to their scope, which also helps to clarify local code.
  • macro(macro function):When you have a piece of code that needs to be frequently repeated and has a similar structure (such as list items, card displays), you can define it as a macro.The macro only accepts passed parameters, which naturally limits the scope of its internal variables and encourages purer, more controllable blank usage.

Through these structured tags, you can decompose complex pages into modular components, making the internal blank control of each component simpler and more centralized.

3. The indentation and blank line strategy of specification.

  • HTML structure indentation:Maintain the standard HTML indentation habit. For example, nested<div>/<ul>/<li>English tags, each level increases an indentation.

  • Template logic indentation: {% if %}/{% for %}The code block inside the control flow tags should also be indented so that it aligns with the controlled HTML content or variable output.

    <nav>
    {%- navList navs -%}
    <ul>
        {%- for item in navs -%}
        <li{% if item.IsCurrent %} class="active"{% endif %}>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            {%- if item.NavList -%}
            <dl>
                {%- for inner in item.NavList -%}
                <dd{% if inner.IsCurrent %} class="active"{% endif %}>
                    <a href="{{ inner.Link }}">{{ inner.Title }}</a>
                </dd>
                {%- endfor -%}
            </dl>
            {%- endif -%}
        </li>
        {%- endfor -%}
    </ul>
    {%- endnavList -%}
</nav>

    This example clearly shows how to combine indentation and{%- %}to control the output of complex navigation.

  • Aligning the tag attributes:If a tag has multiple attributes, consider placing each attribute on a new line and aligning it to improve readability, especially when the attribute values are long.

    <img src="{{ item.Logo }}"
     alt="{{ item.Alt }}"
     class="lazyload"
     data-src="{{ item.LazyLoadSrc }}" />

4. Usage of comments (}]tag-tags.md)

AnQiCMS supports two comment styles:

  • {# 单行注释 #}Do not output to the final HTML.
  • {% comment %} 多行注释 {% endcomment %}Do not output to the final HTML.

The comment itself does not affect HTML output, but it exists to improve code readability.Reasonably using comments to explain complex logic or module functions can help others (or future you) understand the code structure more quickly, thus better following and maintaining white space control.

Tools and methods to develop habits

  1. Automatic formatting in code editors/IDEs:Make full use of your code editor's (such as VS Code, Sublime Text) auto-formatting feature.Configure the formatting rules for HTML/template languages and develop the habit of auto-formating when saving.