English version: Are the blank lines in the AnQi CMS template caused by logical tags? The way to diagnose and optimize

As an experienced website operation expert, I am well aware of the importance of template efficiency and page loading speed to user experience and SEO.When using a powerful content management system like AnQiCMS, which is based on Go language, we often pursue ultimate performance and neat HTML output.However, sometimes in meticulously designed templates, we may find some 'uninvited' blank lines that are neither deliberately added nor carrying any content, yet they quietly exist in the final rendered HTML code.Then, are these blank lines generated by the logic tags of the Anqi CMS?How should one go about diagnosis and optimization?Today, let's delve into this issue in depth.

The template system of Anqi CMS adopts syntax similar to Django template engine, with its core being the use of double curly braces.{{ 变量 }}It outputs dynamic data, as well as single curly braces and percent signs.{% 逻辑标签 %}Control the page structure, conditional judgment, and loop traversal logic, etc.This design brings great flexibility and maintainability.However, for the readability of the code, we often place these logical tags on separate lines, even leaving blank lines before and after.When the template engine is rendering, it will remove the tag itself, but the newline characters and spaces originally used to separate the tags may be retained, resulting in unexpected blank lines in the final HTML output.

Trace the source of diagnostic blank lines

To determine whether the blank lines in a template are generated by logic tags, we can follow a simple troubleshooting process:

First, please directly view your website page in the browserHTML source code.Please check for any extra, consecutive blank lines. These blank lines may be independent blank lines or lines containing only spaces or tabs.

Then, compare with your security CMSTemplate fileEspecially those that contain{% if ... %}/{% for ... %}/{% include ... %}/{% extends ... %}and{% macro ... %}The area of logic tags. Typically, when these tags occupy a line independently, they are most likely to leave a blank space after rendering. For example, a simple conditional judgment:.

<div>
{% if condition %}
    <span>这里是满足条件的内容</span>
{% endif %}
</div>

In the template source code,{% if condition %}and{% endif %}Each line separately.Even if the condition is not met, or if the condition is met but the content inside the tag is very little, the line containing these tags, as well as the newline characters before and after them, may still appear as blank lines in the HTML output.{% for item in items %}Loops should not have blank lines.{% include "partial/header.html" %}Segments introduced, if not handled properly, may also pass through blank.

Finally, don't forget to considerThe nested structure of the template. Anqi CMS supports passing throughextendsInherit basic layout, throughincludeIntroduce code snippets, as well asblockDefine a rewriteable area.The blank line may 'infect' from a parent template inherited or a child template included.Therefore, it is crucial to trace back to the original introduction point when problems are found.

Solution: Flexibly use whitespace control characters-

The template engine of AnQi CMS provides an elegant and powerful mechanism to solve the problem of blank lines generated by logic tags, that isBlank line control character (or blank trimming character)-. By adding a hyphen within the logical tag, you can precisely control whether the whitespace around the tag is removed.{%or%}You can precisely control whether the whitespace around the tag is removed by adding a hyphen within the symbol.

  • {%-This symbol tells the template engine to remove any whitespace characters (including newline characters) immediately following this tag.previouslyAll whitespace characters (including newline characters) following this tag are removed.
  • -}This symbol indicates to the template engine that any whitespace characters (including newline characters) immediately following this tag should be removed.afterAll whitespace characters (including newline characters) following this tag are removed.

Let's take a specific example to see how it works:

For example, with conditional judgment:

Assuming your template contains a section of code like this, it may leave an empty line if the condition is not met: 

<div>
    这里是段落前的文字。
    {% if isActive %}
        <span>这是活跃内容。</span>
    {% endif %}
    这里是段落后的文字。
</div>

IfisActiveresponse forfalse,{% if isActive %}and{% endif %}The content between the tags will not be rendered, but the newline characters of the tag itself may cause extra blank lines in the output.

By introducing a whitespace line control character, we can optimize it like this:

<div>
    这里是段落前的文字。
    {%- if isActive -%}
        <span>这是活跃内容。</span>
    {%- endif -%}
    这里是段落后的文字。
</div>

Now,{%- if isActive -%}It will remove any leading and trailing whitespace before it removes itself, ensuring that no blank space is left when not rendered, making the HTML output more compact.

For example, with a loop iteration:

InforIn loops, especially when you want to output content in the loop without additional newline characters, the blank line control character is particularly useful:

{# 未优化，可能在每个项目之间产生额外空行 #}
{% for item in archives %}
{{ item.Id }}
{% endfor %}

{# 优化后，紧凑输出 #}
{% for item in archives -%}
{{- item.Id -}}
{%- endfor %}

In the optimized code,{%- for item in archives -%}RemovedforLabel before and after white space,{{- item.Id -}}then remove ititem.Idthe white space before and after variable output. This makesIdeach output is closely connected, without extra line breaks.

**Practice in template development

Mastered the use of whitespace control characters, you can make the output of the Anqi CMS template more concise. In actual development, I suggest that you:

  1. Prioritize readability in the early stage of developmentIn writing templates, there is no need to worry too much about the whitespace trimming of each tag. First, make sure the code logic is clear, easy to read, and maintainable.
  2. Apply optimization in key areasOnce the template function is completed, then target those areas that have strict requirements for performance, SEO, or page layout (such as<head>Within the tags,<meta>/<link>Labels, or list items that you want to be tightly packed, apply a whitespace trim mark.The header area is especially important because the whitespace in the header may slightly affect the efficiency when search engine spiders and browsers parse HTML.
  3. Be aware of nesting and inheritance：When a template has multiple inheritance or inclusion relationships, blank lines may pass from the deep level. In the parent template and the child template'sblockDefinition,includeCalling place, flexible use{%- ... -%}Can effectively control the global blank.

By using the above method, you will be able to control the HTML output of AnQiCMS templates more accurately, which not only improves the page loading efficiency but also makes the code itself more organized, thus providing a better website operation experience.

Common Questions (FAQ)

Q1: Why did I use{%- ... -%}Symbols, but some blank lines still cannot be removed?

A1: The blank line control character is mainly for the automatic generation of templates by logic tags (such asif/for/includeIf the blank lines are left after processing, for example:

  • The HTML content itself contains line breaksEnglish translation: For example, when you press Enter in the background content editor, or content copied and pasted from elsewhere that includes line breaks.
  • English translation: The content output by the variable includes line breaks.English translation: : Some{{ 变量 }}The output data itself contains a newline character.
  • Blank caused by the introduction of CSS or JS files.：Some third-party resource files may cause additional line breaks in HTML when included.
  • Hard returns were manually added to the template.In the template file, if you press the Enter key to create extra blank lines directly, and these blank lines are not within the valid control range of logical tags, they will be output as is.In this case, you need to check the content source or a deeper level of template structure to solve the problem.

**Q2: In the template,