How to remove the blank lines that may be generated by logic tags in the AnQiCMS template?

As a senior security CMS website operator, I know that every detail of content presentation is crucial, including seemingly trivial blank lines.In a meticulously constructed template, unnecessary blank lines not only affect the neatness of HTML code, but may also cause unexpected visual problems in certain layouts.Today, let's delve deeply into how to efficiently remove blank lines that may be generated by logical tags in the AnQiCMS template.

Understanding the cause of blank lines caused by template logical tags

AnQiCMS's template system adopts a syntax similar to the Django template engine, which is powerful and flexible, allowing us to embed dynamic content and control logic in HTML structures. We often use such as{% if ... %}Perform conditional judgment, or{% for ... %}To loop through the data. These tags do not produce visible content in the final rendered HTML, but they usually occupy an independent line in the template file.

When the template engine processes these logical tags, if the tag is on its own line and surrounded by no text or HTML elements to be preserved, then after the tag is parsed and 'disappears', the line it originally occupied will usually leave a blank line. For example, a simple{% if condition %}Labels, if they occupy a line by themselves, even if the condition is true, they will only execute the code inside them, and the line with the label itself will become empty.If there are a large number of such logical tags in the template, the final rendered HTML code may contain many unnecessary blank lines, affecting the clarity of the code and the readability of the browser developer tools.

Introduce the solution: Use whitespace control characters-

AnQiCMS template system provides a simple and effective mechanism to solve this problem, which is to use whitespace control characters at the beginning or end of logical tags, that is, the hyphen-This little symbol can indicate that the template engine should remove the surrounding specific whitespace characters, including newlines, when processing tags.

There are mainly three ways to use it:

• {%- tag %}: When hyphenated-It is located to the left of the opening tag, it will remove the tagBeforeAll whitespace characters (including newline characters).
• {% tag -%}: When hyphenated-It is located to the right of the closing tag, it will remove the tagAfter thatAll whitespace characters (including newline characters).
• {%- tag -%}If the hyphen is located at both the left and right sides of the opening tag, it will remove the tagbefore and afterall whitespace characters.

By cleverly utilizing these whitespace control characters, we can precisely control the blank lines in the template output, ensuring that the generated HTML code is as compact as possible.

Actual application cases and demonstrations

Let us understand the actual application of this mechanism through some specific examples.

Conditional judgment label (if,elif,else)

Suppose we have a segment of content displayed differently based on conditions:

<p>这是头部内容。</p>
{% if show_extra_info %}
    <div class="extra-info">
        额外信息显示在这里。
    </div>
{% endif %}
<p>这是底部内容。</p>

Ifshow_extra_infoIs false,{% if ... %}and{% endif %}The line occupied by the tag will become empty, causing头部内容and底部内容An extra blank line is inserted between.

To avoid this situation, we can use whitespace control characters like this:

<p>这是头部内容。</p>{%- if show_extra_info %}
    <div class="extra-info">
        额外信息显示在这里。
    </div>
{%- endif %}<p>这是底部内容。</p>

Here, {%- if ... %}Removed any blank lines that may have existed before, and{%- endif %}Removed any blank lines that may have existed after. This way, no mattershow_extra_infowhether it is true or false,头部内容and底部内容the blank space between them will be effectively controlled.

Loop iteration tag (for,empty)

Loop tags are another common scenario for generating blank lines. Consider the following article list:

<ul>
{% for item in archives %}
    <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% empty %}
    <li>没有找到相关文章。</li>
{% endfor %}
</ul>

In this example,{% for ... %}and{% endfor %}(including{% empty %}) Tags also introduce additional blank lines, especially inforIn each iteration of the loop, the line occupied by the tag itself may contribute a blank.

To generate more compact HTML, we can use whitespace control characters like this:

<ul>{%- for item in archives %}
    <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{%- empty %}
    <li>没有找到相关文章。</li>
{%- endfor %}
</ul>

By adding in{%- for ... %}and{%- endfor %}(as well as{%- empty %}Add to the left of the-, we can ensure that before and after the loop starts, as well asemptywhen handling branches, no extra blank lines will be rendered into the final HTML.

Variable assignment label (set,with)

Even those variable assignment labels that do not directly output content, such as{% set ... %}or{% with ... %}, if they occupy a line by themselves, may leave an empty line after rendering. For example:

<p>网站信息：</p>
{% set site_name = system.SiteName %}
<p>当前网站名称是：{{ site_name }}</p>

{% set site_name = system.SiteName %}This line will also leave an empty line after rendering. By using{%- set ... %}we can eliminate this empty line:

<p>网站信息：</p>{%- set site_name = system.SiteName -%}
<p>当前网站名称是：{{ site_name }}</p>

Here, both leading and trailing spaces are used to ensure that all spaces before and after the tag are removed in the same line.

**Practice and Precautions

Although whitespace control characters are very useful, not all logical tags need to be used.We should selectively apply them to achieve the dual purpose of code tidiness and clear page structure.

• Use it targetedlyThis is mainly applied to those logical tags that occupy a line independently and whose existence should not affect the spacing before and after the content.For tags that are closely connected to the surrounding text or whose output directly affects the layout, they should be used with caution to avoid accidentally deleting necessary spaces.
• Maintain code readability：Overusing whitespace control characters may make the template code difficult to read and understand. It is crucial to balance the compactness and readability of the code during development.
• Considerations during debuggingIf unexpected blank space or missing elements appear in the page layout or HTML structure, first check if whitespace control characters have been used around logical tags or if they have been omitted.

By mastering the whitespace control characters in the AnQiCMS template, we can better control the final rendering of the HTML output, ensuring the tidiness and efficiency of the website code, thereby enhancing the professionalism of content operation and the user experience.

---

Frequently Asked Questions (FAQ)

1. Why are there so many blank lines in my AnQiCMS page HTML?

This is usually due to logical tags in the template (such as{% if ... %}/{% for ... %}/{% set ... %}This is a placeholder in the template file, taking up a line by itself, but it does not output any visible content.When the template engine parses these tags, the lines they occupy become blank lines in the final HTML output.

2. Does the use of whitespace control characters affect page loading speed or SEO?

In theory, removing extra whitespace from HTML can slightly reduce file size, which may have an extremely minor positive impact on page loading speed.However, this impact is usually negligible. For SEO, search engines mainly focus on page content and structure, and a few blank lines will not have a substantial impact.The main purpose of using whitespace control characters is to generate cleaner HTML code, making it easier to develop and maintain.

3. How do you determine when to use{%- tag %}/{% tag -%}Or{%- tag -%}?

Which format to choose depends on the whitespace position you want to remove:

• If you want to remove the tagBeforeusing the blank before and after the line of the tag{%- tag %}.
• If you want to remove the tagAfter thatusing the blank after and before the line of the tag{% tag -%}.
• If you want to remove the tags at the same timebefore and afterall the spaces (for example, if the tag is on a separate line and you do not want it to leave any traces), then use{%- tag -%}. Usually, to completely eliminate the empty line caused by the logic label that occupies a line and does not produce any visible output,{%- tag -%}is the most commonly used and effective choice.