In the development of AnQi CMS templates, we often strive for the beauty of the page and the neatness of the code.Sometimes, we might encounter some 'hidden' formatting issues, such as unnecessary blank lines between page elements, or excessive whitespace in the HTML source code.These issues may not always be apparent in the browser, but they can make our code redundant and even cause actual errors in certain whitespace-sensitive scenarios (such as generating XML or CSV files).

It is fortunate that the template engine of Anqi CMS provides a very practical solution, that is, to add in the template tags.-symbols, specifically expressed as{%-and-%}These little symbols have powerful control over whitespace characters, which can help us precisely 'trim' away unnecessary whitespace, making the template output more compact and cleaner.

The issue: Extra whitespace caused by template tags

To understand{%-and-%}The role of this, we must first understand why these unnecessary blanks appear. In the Django style template engine used in Anqi CMS, like{% if ... %}/{% for ... %}Such a logical label itself will not generate visible content.When they are parsed and executed, the lines they occupy in the template file and the surrounding whitespace characters (such as newline characters, spaces, and tabs) are often output unchanged to the final generated HTML.

Imagine you are building a navigation menu:

<nav>
    {% for link in navLinks %}
    <a href="{{ link.url }}">{{ link.text }}</a>
    {% endfor %}
</nav>

This code looks clear in the template file, but the final generated HTML source code may not be as compact as you expect:

<nav>

    <a href="/link1">链接1</a>

    <a href="/link2">链接2</a>

</nav>

You will find that each<a>Label has extra line breaks at both ends, evennav[en]The tag also contains additional blank lines. Although modern browsers usually ignore the impact of these extra HTML whitespace characters on page layout, in some cases, these blanks may:

  1. Resulting in redundant source code:Increased file size, although the impact is negligible, it is worth optimizing in large-scale, high-concurrency websites.
  2. Impacting debugging experience:When checking page elements or debugging CSS, redundant blank lines can make the HTML source code appear cluttered and reduce readability.
  3. Destroy specific layout:For some CSS layouts that require precise control of whitespace (such as in flex layouts or grid layouts, the spaces between elements may be interpreted as text nodes), excessive whitespace may lead to unexpected layout issues.
  4. Affect non-HTML output:If you use a template to generate XML, JSON, or plain text files, these additional whitespace characters may directly破坏 data structure or file format.

Solution:{%-and-%}of precise control

To solve the above problem, the Anqi CMS template engine introduces the following{%-and-%}These special tags have very direct functions:

  • {%-:This tag will remove itspreviousAll adjacent whitespace characters (including newline and space).
  • -%}:This tag will remove itsNextAll adjacent whitespace characters (including newline and space).

You can use them individually or in combination to achieve precise control over whitespace characters.

Let us return to the example of the navigation menu above and see how to optimize it:

<nav>
    {%- for link in navLinks -%}
    <a href="{{ link.url }}">{{ link.text }}</a>
    {%- endfor -%}
</nav>

It is simply in{% for ... %}and{% endfor %}The percentage sign next to the tag is followed by a hyphen, the generated HTML source code will be completely different:

<nav><a href="/link1">链接1</a><a href="/link2">链接2</a></nav>

All extra blank lines and whitespace characters have been removed, making the code very compact and clean.

Specific application scenarios and effects

  1. Remove blank lines generated by logical tags:

    • forLoop:As shown above, this is the most common use case, especially when generating lists (<ul><li>...</li></ul>), navigation (<nav><a>...</a></nav>), or tables (<table><tr><td>...</td></td></table>).
    • if/elseConditional judgment:Similarly, the conditional judgment tag itself does not output content, but adds-It can avoid introducing unnecessary blank lines.
      
<p>欢迎访问我们的网站！
{%- if user.is_authenticated -%}
您好，{{ user.username }}。
{%- else -%}
请登录。
{%- endif -%}
</p>
      This can ensure<p>The text inside the tag is displayed continuously, without causingifTags are separated by.
    • Other auxiliary tags:like{% set ... %}/{% with ... %}/{% include ... %}These tags, their main function is logical processing or introducing other template fragments, should not generate additional output. Using-They can be avoided from leaving traces in the document flow.

  2. Generate smaller HTML files:By removing unnecessary whitespace, the size of the HTML file can be slightly reduced.This can improve the page loading speed to some extent, especially on websites with large amounts of content and frequent access.Although the optimization effect of a single page may not be obvious, when accumulated, it will have a positive effect on server bandwidth and user experience.

  3. Enhance code readability and maintainability:Clean HTML source code, free of unnecessary blank lines, which makes it easier for developers to view and debug.When needing to locate an element or understand the page structure, concise code can be easily seen.

  4. Avoid layout surprises:In certain CSS or JavaScript scenarios sensitive to whitespace, precise control over whitespace can avoid some subtle layout errors or script execution anomalies. For example, in CSS, a space between two inline block-level elements might be rendered as a small gap by the browser, whereas using-Can eliminate this gap, achieving seamless connection.

When to use and precautions

Although{%-and-%}Very powerful, but not suitable for all scenarios.

Recommended usage scenarios:

  • All logic control tags: for/if/set/withetc.
  • includeandextendsTags:Ensure that the template content introduced can seamlessly integrate into the current template