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

When using AnQiCMS for website template development, we often encounter a detail issue, that is, the logical tags in the template (such asifConditional judgment,forLoops) Sometimes, when rendering output HTML content, 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 high code neatness or precise control of element spacing is required, such as affecting the readability of the HTML source code, or even in extremely rare cases, may cause slight layout differences (especially when usingdisplay: inline-blockWhen in the style).

Fortunately, AnQiCMS provides a simple and powerful mechanism to solve this problem, that is, to use template tags.removeLabel, by using a simple-character to remove these extra spaces.

Why do extra blank lines or newline characters appear?

When we are writing an AnQiCMS template, in order to improve the readability and maintainability of the code, we usually place logical tags on separate lines and make appropriate indentation. 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 do not generate any visible content in the final HTML. However, the lines they are in and the line breaks between them may be retained 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 innavthe tag inside, as well as before and after the links, unnecessary line breaks appeared.

Skillfully useremovethe tag removes whitespace

AnQiCMS template engine allows us to add a hyphen adjacent to the start or end tag of logical tags{%or%}at the position-to control the white space output around it

1. Remove the whitespace before the tag:{%-Immediately after the start tag{%Add-, that is{%-, this tells the template engine to remove all whitespace characters (including newline characters) before this tag.

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

We can use them separately as needed{%-or-%}They can also be combined to achieve the most compact output effect.

Let's look at some actual examples to see its magic.

Example 1: Eliminating whitespace in conditional judgments

Return to the previous navigation example, if you want to eliminateifYou can modify the blank lines around the conditional block like this:

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

After this treatment, ifuser.IsLoggedInIf true, the rendered HTML may become 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: controlling blank spaces in loops

InforIn loops, we often 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 starts on a new line,{% for ... %}and{% endfor %}The tag itself also contributes an empty line, resulting in output like this:

<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 remove the empty line produced by the loop tag itself while retaining each<li>The element is kept on a separate line to maintain readability, we can do this:

<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>

In this way, the HTML structure will become more compact, and each<li>will still be kept on a separate 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 an even tighter compactness, for example, to render all list items on 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 extremely compressed usage is usually only considered in very special layout requirements or performance optimization (reducing file size) scenarios.

Considerations in practice

MasterremoveThe use of tags allows us to be more proficient in AnQiCMS template development