How to remove extra blank lines or newline characters in the output content when using the `remove` tag in AnQiCMS?

When using AnQiCMS for website template development, we often encounter a detail issue, that is, the logic tags in the template (such asifcondition judgment,forLoop) When rendering output HTML content, sometimes some unnecessary blank lines or newline characters are generated. These seemingly harmless whitespaces, although they usually do not affect the final visual presentation of the page, may cause some minor troubles in certain scenarios where a high degree of code cleanliness is required or where precise control of element spacing is needed, such as affecting the readability of the HTML source code, and in extremely rare cases, may even lead to subtle differences in layout (especially when usingdisplay: inline-blockThis is when the style is).

Fortunately, AnQiCMS provides a simple yet powerful mechanism to solve this problem, that is, the use of template tags.removeLabel, through a simple-character to remove these extra spaces.

Why do extra blank lines or newline characters appear?

When we are writing AnQiCMS templates, in order to ensure the readability and maintainability of the code, we usually place logic tags on separate lines and indent appropriately. For example:

<nav>
    {% if user.IsLoggedIn %}
        <a href="/profile">个人中心</a>
    {% else %}
        <a href="/login">登录</a>
    {% endif %}
</nav>

When processing this code in the template engine,{% if ... %}/{% else %}and{% endif %}These tags themselves will not generate any visible content in the final HTML. However, the lines they are in and the line breaks between them and the actual content may be preserved by default, resulting in additional blank lines appearing in the final rendered HTML source code.

<nav>

        <a href="/profile">个人中心</a>

</nav>

It can be seen that,navunnecessary line breaks appear inside the tags, as well as before and after the links.

ingeniously utilizeremoveRemove whitespace in tags

The template engine of AnQiCMS allows us to add a minus sign adjacent to the start or end tag of logical tags.{%or%}at the position.-to control the whitespace output around it.

1. Remove whitespace before the tag:{%-At the start of the tag:{%Immediately followed by:-, which is{%-This will tell the template engine to remove all whitespace before this tag (including newline characters).

2. Remove whitespace after tag:-%}at the end tag%}immediately before:-, which is-%}This will tell the template engine to remove all whitespace characters (including newline characters) after this tag.

We can use it alone as needed{%-or-%}, or use both together to achieve the most compact output effect.

Let's take a look at some real examples to see its magic:

Example one: Whitespace removal in conditional judgment

Return to the previous navigation example, if you want to removeifTo remove the blank lines around the conditional blocks, you can modify it like this:

<nav>
    {%- if user.IsLoggedIn -%}
        <a href="/profile">个人中心</a>
    {%- else -%}
        <a href="/login">登录</a>
    {%- endif -%}
</nav>

After such processing, ifuser.IsLoggedInIf true, the rendered HTML may be more compact:

<nav>
    <a href="/profile">个人中心</a>
</nav>

This not only makes the HTML source code look cleaner, but also eliminates potential spacing issues.

Example two: Control of whitespace in loops

InforIn loops, we often also need to control the output format of each loop item. Consider a product list:

<ul class="product-list">
{% for product in products %}
    <li class="product-item">
        <img src="{{ product.Thumb }}" alt="{{ product.Title }}">
        <h3>{{ product.Title }}</h3>
    </li>
{% endfor %}
</ul>

By default, each loop will start on a new line,{% for ... %}and{% endfor %}The tag itself will also contribute an empty line, resulting in output like:

<ul class="product-list">

    <li class="product-item">
        <img src="/thumb1.jpg" alt="产品1">
        <h3>产品1</h3>
    </li>

    <li class="product-item">
        <img src="/thumb2.jpg" alt="产品2">
        <h3>产品2</h3>
    </li>

</ul>

To eliminate the empty line generated by the loop tag itself while keeping each<li>The independent line of elements to maintain readability, we can do it this way:.

<ul class="product-list">
{%- for product in products -%}
    <li class="product-item">
        <img src="{{ product.Thumb }}" alt="{{ product.Title }}">
        <h3>{{ product.Title }}</h3>
    </li>
{%- endfor -%}
</ul>

This way, the HTML structure will become more compact, and each<li>still remains on an independent line:

<ul class="product-list">
    <li class="product-item">
        <img src="/thumb1.jpg" alt="产品1">
        <h3>产品1</h3>
    </li>
    <li class="product-item">
        <img src="/thumb2.jpg" alt="产品2">
        <h3>产品2</h3>
    </li>
</ul>

If you need a more extreme compactness, for example, to render all list items in a single line, you can also use content tags-:

<ul class="inline-list">{%- for item in items -%}{{- item.Title -}}{%- endfor -%}</ul>

The generated HTML will be:

<ul class="inline-list">标题1标题2标题3</ul>

This highly compressed usage is usually considered only in very special layout requirements or performance optimization (reducing file size) scenarios.

Considerations in practice

MasterremoveThe use of tags can make us more skillful in AnQiCMS template development