In Anqi CMS template, what is the specific function of the symbols `{%-` and `-%}`, and what common layout problems can they avoid?

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

Luckyly, AnQi CMS's template engine provides a very practical solution, which is to add in the template tags-symbols, specifically represented as{%-and-%}These little symbols have powerful control over whitespace characters, which can help us accurately "trim" away unnecessary whitespace, making the template output more compact and clean.

The issue is: extra blank caused by template tags

To understand{%-and-%}The role, we must first understand why these extra spaces appear. In the Django style template engine used in Anqi CMS, like{% if ... %}/{% for ... %}This logical tag itself does not generate visible content. But when it is parsed and executed, the lines it occupies in the template file and the surrounding whitespace characters (such as newline characters, spaces, and tab characters) are often output to the final generated HTML unchanged.

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 HTML source code generated may not be as compact as you expect:

<nav>

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

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

</nav>

You will find each<a>Labels have extra line breaks, evennavThe tag also contains additional blank lines. Although modern browsers usually ignore the effect of these extra HTML whitespace characters on page layout, in some cases, these blanks may:

1. Causes redundant source code:Increases file size, although the impact is negligible, it is still worth optimizing in large-scale, high-concurrency websites.
2. Affects debugging experience:When checking page elements or debugging CSS, redundant blank lines make the HTML source code look cluttered and reduce readability.
3. Destroying a specific layout:For some CSS layouts that require precise control of whitespace (such as in flex or grid layouts, the spaces between elements may be parsed as text nodes), excessive whitespace can lead to unexpected layout issues.
4. Affects 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 introduced{%-and-%}these two special tags. Their function is very direct:

• {%-:this tag will remove itsfrontAll adjacent whitespace characters (including newline and space).
• -%}:this tag will remove itsAfterAll adjacent whitespace characters (including newline and space).

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

Let's go back to the navigation menu example above and see how we can optimize it:

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

Just in the{% for ... %}and{% endfor %}The HTML source code becomes completely different when a hyphen is added next to the percentage sign inside the tag:

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

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

Specific application scenarios and effects

1. Clearing the blank lines generated by logical labels:

   • 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>) when.
   • if/elseConditional judgment:Similarly, the conditional judgment tag itself does not output content, but it is added before and after-This can avoid introducing unnecessary blank lines.

     
     <p>欢迎访问我们的网站！
     {%- if user.is_authenticated -%}
     您好，{{ user.username }}。
     {%- else -%}
     请登录。
     {%- endif -%}
     </p>
     

     This can ensure<p>The text within the tag is displayed continuously, without beingifbroken by the tag.
   • Other auxiliary tags:like{% set ... %}/{% with ... %}/{% include ... %}and tags, their main function is logical processing or introducing other template fragments, they should not produce extra output. Use-They can avoid leaving traces in the document flow.

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

3. Improve code readability and maintainability:Clean HTML source code, without extra blank lines to interfere, making it easier for developers to view and debug.When it is necessary to locate an element or understand the page structure, concise code can be understood at a glance.

4. Avoid layout surprises:In some CSS or JavaScript scenarios sensitive to whitespace, precise control of whitespace can avoid some subtle layout errors or script execution anomalies. For example, in CSS, a space between two inline block-level elements may be rendered as a small gap by the browser, and 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 logical control tags: for/if/set/withetc.
• includeandextendsTags:Ensure that the content of the template being introduced can seamlessly integrate into the current template