How to remove the blank lines that may be produced by logical tags in AnQiCMS templates?

As an experienced CMS website operation personnel in the security industry, I know that every detail of content presentation is crucial, including seemingly trivial blank lines.In meticulously crafted templates, unnecessary blank lines not only affect the neatness of the HTML code, but may also sometimes lead to unexpected visual issues under specific layouts.Today, let's delve into how to efficiently remove blank lines that may be produced by logical tags in the AnQiCMS template.

Understand the reasons for the blank lines caused by template logical tags

AnQiCMS's template system uses syntax similar to 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 ... %}Loop through the data. Although these tags do not produce any visible content in the final rendered HTML, they usually occupy an independent line in the template file.

When the template engine processes these logic tags, if the tag is on its own line and there are no text or HTML elements that need to be preserved around it, 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 take up an entire line, even if the condition is true, they only execute the code inside them, and the line itself becomes blank.If there are a large number of such logic 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 Solution: Use Whitespace Control-

AnQiCMS template system provides a simple and effective mechanism to solve this problem, that is, using whitespace control characters at the beginning or end of logical tags, that is, hyphens-This little symbol can indicate to the template engine to remove the specific whitespace characters around the tags during processing, including newline characters.

There are mainly three ways to use it:

• {%- tag %}When the hyphen-It is located on the left side of the opening tag, it will remove the tagpreviouslyAll whitespace characters (including newline characters) following this tag are removed.
• {% tag -%}When the hyphen-It is located on the right side of the closing tag, it will remove the tagafterAll whitespace characters (including newline characters) following this tag are removed.
• {%- tag -%}If the hyphen is located at both the left of the opening tag and the right of the closing tag, it will remove the tagBefore and afterall whitespace characters.

By cleverly using 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 tag (if,elif,else)

Suppose we have a segment that displays different content 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 label will become blank, causing头部内容and底部内容An extra blank line is added between.

To avoid this situation, we can use the following blank control characters:

<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, while{%- endif %}after which may have existed blank lines. Thus,show_extra_infowhether it is true or false,头部内容and底部内容the blank spaces between them will be effectively controlled.

Loop through labels (for,empty)

Looping through labels is another common scenario for creating blank lines. Consider the following list of articles:

<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 %}) The tag also introduces additional blank lines, especially inforIn each iteration of the loop, the line occupied by the label itself may contribute a blank.

To generate more compact HTML, we can use the following whitespace control character:

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

By using in{%- for ... %}and{%- endfor %}(and{%- empty %}Add to the left of the ）-We can ensure that there are no unnecessary blank lines rendered in the final HTML before and after the loop starts.emptyBranch processing, no unnecessary blank lines will be rendered in the final HTML.

Variable assignment tag (}set,with)

Even for those variable assignment tags that do not directly output content,{% set ... %}or{% with ... %}they may leave an empty line after rendering if they occupy a line by themselves. 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 whitespace control characters are used to ensure that all whitespace before and after the label is removed in the same line.

**Practical Tips and Considerations

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

• Use it purposefully：Mainly used for those tags that occupy a single line independently and should not affect the spacing of the content before and after.For tags that are closely connected to the surrounding text or whose own output directly affects the layout, caution should be exercised to avoid accidentally deleting necessary spaces.
• Maintain code readabilityEnglish: Overusing whitespace control characters may make template code difficult to read and understand. Balancing code compactness and readability is crucial during the development process.
• Considerations during debuggingIf there are unexpected blank spaces or missing content in the page layout or HTML structure, first check if whitespace control characters are used around logical tags, or if it is missing.

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

---

Common Questions and Answers (FAQ)

1. Why does my AnQiCMS page HTML show many blank lines?

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

2. Does using whitespace control affect page loading speed or SEO?

Theoretically, removing extraneous blank lines from HTML can slightly reduce file size, which may have an extremely minor positive impact on page loading speed.However, this effect 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 on them.The main purpose of using whitespace control characters is to generate cleaner HTML code, making it easier to develop and maintain.

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

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

• If you want to remove the tagpreviously(including all leading whitespaces and newlines before the tag) use{%- tag %}.
• If you want to remove the tagafter(including all trailing whitespaces and newlines after the tag) use{% tag -%}.
• If you want to remove tags at the same timeBefore and afterand all the whitespace (for example, if the tag is alone on a line and you do not want it to leave any traces), then use{%- tag -%}The most commonly used and effective choice.{%- tag -%}.