How to remove empty lines generated by conditional judgment or loop tags in the template to optimize the display cleanliness of the page source code?

In website operation, we all hope that the website is not only powerful in function and rich in content, but also the source code behind it should be neat and orderly.However, when developing with a flexible template system like AnQiCMS, one may find that the generated HTML source code contains many blank lines, which are mainly caused by conditional judgment or loop tags in the template.Although these blank lines usually do not have a substantial impact on the functionality of the website, they do indeed reduce the readability of the source code and make subsequent maintenance and debugging more inconvenient.It is more important that for operators who pursue extreme optimization, reducing page redundant content and making the code more compact is always a detail worth paying attention to.

An enterprise CMS deeply understands this, and to solve this problem, it provides a very elegant and practical solution in the template syntax.

Explore the root cause of blank line generation: template logic tags

In AnQiCMS, we use a template engine syntax similar to Django for template creation, which means we can embed in the HTML structure{% if ... %}/{% for ... %}logic tags to achieve dynamic content display.These tags usually occupy a single line, or their internal content is empty when rendered. When the template engine processes this logic, even if they themselves do not output any visible content, they may leave a blank line in the final generated HTML.

For example, a simple conditional judgment:

<div>
{% if article.Title %}
    <h1>{{ article.Title }}</h1>
{% endif %}
</div>

Ifarticle.TitleIf it is empty, then<h1>The tag will not render, but{% if ... %}and{% endif %}The line occupied by the tag, by default, may still leave two blank lines in the output HTML.The loop tag is also the same, when there is no content output inside the loop body, it may also produce an empty line.

An elegant solution of Anqi CMS: whitespace control characters-

To solve the problem of these redundant blank lines, Anqi CMS provides a simple and powerful blank control symbol:Dash-By placing this symbol cleverly at the beginning or end of the template tag, we can precisely control whether whitespace characters (including newline characters) around the tag are removed.

This blank control character can act in two positions:

1. Remove the blank characters on the left side of the tag:{%- tag ... %}For example, when you place the dash inside the percentage sign on the left side of the tag,{%- if article.Title %}It will tell the template engine to remove this tagBeforeAll whitespace characters (including newline characters). If this tag is also the starting tag of the content it contains, it will also remove the whitespace characters between the tag and the content.

2. Remove the whitespace on the right side of the tag:{% ... tag -%}Similarly, if the dash is placed inside the percentage sign on the right side of the tag, for example{% endif -%}it will remove this tagAfter thatAll whitespace characters (including newline characters). If this tag is also the end tag of the content it contains, it will also remove the whitespace characters between the content and the tag.

Let's take a look at how it works with an example:

Optimize the blank line of the conditional judgment tag

Suppose the following template code is given:

<nav>
    <a href="/">首页</a>
    {% if user.IsLoggedIn %}
    <a href="/profile">个人中心</a>
    {% else %}
    <a href="/login">登录</a>
    <a href="/register">注册</a>
    {% endif %}
    <a href="/contact">联系我们</a>
</nav>

Ifuser.IsLoggedInIs true, or the wholeif-elseThe content of the block ultimately ends up empty on the page, then in<nav>Extra blank lines may appear inside the tag. By adding whitespace control characters, we can make the output more compact:

<nav>
    <a href="/">首页</a>{%- if user.IsLoggedIn -%}
    <a href="/profile">个人中心</a>{%- else -%}
    <a href="/login">登录</a>
    <a href="/register">注册</a>{%- endif -%}
    <a href="/contact">联系我们</a>
</nav>

After such processing, regardlessifwhether the condition is met,{%- if ... -%}/{%- else -%}and{%- endif -%}the blank lines produced by the tag will be removed, ensuring that the generated HTML code is more compact.

Optimizing the blank lines of loop tags

Loop tags are another common source of blank lines. Consider a loop in a navigation list:

<ul>
{% for item in navs %}
    <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endfor %}
</ul>

IfnavsThe list is empty or each<li>The content inside the tag is not rendered due to certain conditions, and extra blank lines will also be generated by default.

Optimize using whitespace control characters:

<ul>{%- for item in navs -%}
    <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>{%- endfor -%}
</ul>

Thus,{%- for ... -%}and{%- endfor -%}The line occupied by the tag will not leave an empty line in the final HTML, even if the loop body does not produce any output.

Furthermore, it is worth noting that for the variable output tag{{ 变量 }}In some cases, you may also want to control the surrounding whitespace. Anqi CMS (based on Pongo2) allows whitespace control characters to be applied to variable output:

<div>{{- archive.Title -}}</div>

This will removearchive.TitleVariable output content with spaces on both sides.

Why is this important? Code neatness and maintainability.

Removing these blank lines generated by logical labels brings many benefits:

1. Improve code readability: Tightly packed code is easier to glance over and understand its structure, especially during debugging or team collaboration.
2. Easier to debugWhen encountering rendering issues, a clean source code view can help you locate the problem faster, rather than being distracted by irrelevant blank lines.
3. Minor performance improvement: Although a single blank line has a negligible impact on the size of a webpage, for websites with high traffic, complex content, or those aiming for extreme optimization, accumulating small savings can lead to a slight advantage in loading speed and also helps save bandwidth.
4. Consistency and professionalism: Maintaining clean source code reflects the attention to detail of operators and developers, which helps to form good coding habits and project specifications.

Practical suggestions

During AnQiCMS template development, it is recommended to develop the habit of using whitespace control characters, especially in the following scenarios:

• Start and end of HTML structureFor example<div>{%- if ... %}and{% endif -%}</div>.
• Loop tags:{%- for ... -%}and{%- endfor -%}.
• Conditional judgment tag:{%- if ... -%}/{%- elif ... -%}/{%- else -%}and{%- endif -%}.
• Dynamic content that needs to be tightly connected with adjacent HTML elementsEnsure there are no unexpected blank spaces between elements.

By consciously using this little em dash, you will be able to build a cleaner, more efficient AnQiCMS website template, making the page source code as pleasing to the eye as a well-tended garden.

Frequently Asked Questions (FAQ)

1. Removing blank lines from the template helps the website's SEO, right?Remove the blank lines generated by these template logic tags,