In website operation, efficient and tidy template code is one of the key factors to improve user experience and page loading speed.AnQiCMS as an enterprise-level content management system developed based on the Go language, is committed to providing high-performance, scalable solutions, and naturally also considers the aspect of code cleanliness for template developers.Especially in handlingforIn this common scenario of nested loops, excessive whitespace in templates often becomes a troublesome problem.

ExploreforThe whitespace issue in nested loops.

The template engine of AnQiCMS borrows the syntax style of Django template engine, which by default retains the line breaks and spaces around tags when parsing template tags. This helps maintain the readability of the template code in some cases, but whenforLoops are used extensively, especially when they are nested layer upon layer, unprocessed whitespace characters will roll like a snowball.

Imagine that you might be iterating over a list of articles, where each article item is nested within a loop to display multiple images or tags for the article.If the start and end tags of each loop are automatically formatted with line breaks, and the internal content is also indented, then the final HTML source code will contain a large number of blank lines and unnecessary indentation.These extra whitespace characters do not usually affect the final presentation of the page in the browser, but they increase the file size of the page, extend the loading time, and make the HTML source code bulky, difficult to read and debug.For developers who pursue ultimate performance and code perfectionism, this is undoubtedly a "pain point" that needs to be addressed.

AnQiCMS's elegant solution: white space control tag

Luckyly, the AnQiCMS template engine is well aware of this pain point and provides a simple and powerful blank management mechanism to help developers effectively handle these redundant blank characters. Its core lies in two special hyphens:{%-and-%}.

These tiny hyphens, give template developers the ability to precisely control whitespace:

  • {%-When placed at the beginning of a tag, it will remove all whitespace to the left:all to the leftWhitespace (including newline characters).
  • -%}: When placed at the end of a tag, it will remove the tagAll to the rightWhitespace (including newline characters).

Similarly, for variable output, we can also use{{- 变量 }}Remove the whitespace characters from the left of the variable.

By cleverly using these whitespace control tags, we can manage the fine-grained output of whitespace within the loop and its elements.forFine-tune the whitespace output within the loop and its internal elements.

Let's go through a simpleforloop example to see the effect:

DefaultforLoop (may produce extra blank spaces)

<ul>
{% for item in archives %}
    <li>
        {{ item.Title }}
    </li>
{% endfor %}
</ul>

If we do not use blank control tags, if{% for ... %}and{% endfor %}Labels each occupy a line in the template, they will produce additional line breaks by default when rendered. Whenarchiveseach one in the listitemis rendered,<li>the tag and its content{{ item.Title }}It will also have its default indentation and line breaks, which may ultimately lead to extra spaces and unnecessary indentation in the HTML source code, for example:

<ul>

    <li>
        文章标题1
    </li>

    <li>
        文章标题2
    </li>

</ul>

Using whitespace controlforLoop (remove extra spaces)

To make the generated HTML more compact, we can modify it like this:

<ul>{%-
for item in archives %}
    <li>
        {{- item.Title -}}
    </li>{%-
endfor %}</ul>

In this example:

  • <ul>{%-It will remove<ul>To the right of the tag{% for ... %}All the white spaces to the left of the tag.
  • {%- for item in archives %}and{% endfor %}within the tag,-%}Controls the whitespace at the start and end of loop tags.
  • {{- item.Title -}}Ensuresitem.TitleNo extra spaces or new lines before and after.

After this processing, the generated HTML source code will be much more compact:

<ul><li>文章标题1</li><li>文章标题2</li></ul>

Even we can control it more finely, so that each<li>tag occupies a line, but does not produce extra blank lines:

<ul>{%-
for item in archives -%}
    <li>{{- item.Title -}}</li>{%-
endfor -%}</ul>

This will produce the following output:

<ul>
    <li>文章标题1</li>
    <li>文章标题2</li>
</ul>

This processing method is inforIt is particularly important when nested in a loop. Imagine a multi-level nested list structure, where each level uses these blank control tags, and the final HTML will be extremely neat and compact.For example, if you have<li>There is also one inside{% for tag in item.Tags %}Loop, then apply it at the beginning and end of this inner loop.{%-and-%}This will prevent the inner loop from generating extra blank spaces.

Not justforLoop

It is worth mentioning that this blank management mechanism is notforLoops have unique properties. Inif/else/withand other logical judgment or variable assignment tags, they also apply. For example, if you want the content afterifto be immediately adjacent to the statementifLabels, without the need for additional line breaks, can also be used{%- if 条件 %}.

**Practice and Precautions

Although the blank control labels are powerful, they are not needed in all places. Here are some suggestions:

  1. Balance readability and compactness：In the development stage, retaining some whitespace may help improve the readability of template code.But in a production environment, especially in scenarios where performance and bandwidth optimization are pursued, removing extraneous whitespace is very beneficial.
  2. Apply locally rather than globally: Usually, you don't need to add it to each tag-Pay attention to those areas that will produce a large number of repetitive structures (such as lists) and nested logic, as these are hotspots for blank accumulation.
  3. Pay attention to the visual layout.In rare cases, whitespace between HTML elements (such asdisplay: inline-blockbetween elements) may affect the visual layout. When using-%}Please note the final visual effects of the test page when removing whitespace.

By reasonably using the blank control tags provided by AnQiCMS, you can create more concise and efficient template code, bringing tangible optimization to your website operation.This attitude of continuous improvement is the quality that an excellent website operation expert should possess.

Frequently Asked Questions (FAQ)

Q1: Why do template engines default to retaining these whitespace characters? What are the specific benefits of removing them?

A1: The default retention of whitespace by the template engine is mainly for the readability of the template code, allowing developers to indent and format the template code like ordinary HTML.The main benefit of removing these whitespace characters is to optimize the final generated HTML file: it reduces the file size, thereby speeding up page loading, saving bandwidth, and making the HTML source code cleaner and more convenient for debugging and automation processing.In the field of Search Engine Optimization (SEO), although the impact is negligible, smaller file sizes are usually considered better practice.

Q2: Will removing whitespace affect the visual layout of the page?

A2: In most cases, removing extra whitespace from the template will not affect the visual layout of the page.HTML automatically collapses multiple consecutive whitespace characters into a single space and ignores newline characters inside and outside of tags.However, for certain specific CSS layouts (such as, usingdisplay: inline-blockorflexElements between layout), sometimes a single space between HTML elements is rendered as visual spacing.If you encounter layout issues after removing whitespace, this is likely the case, you may need to carefully check the affected CSS styles, and decide whether to retain these specific whitespaces or seek other CSS solutions to control the spacing of elements.

Q3: In addition toforIn the loop, do you manually add whitespace control characters? Does AnQiCMS have any other methods to automatically compress HTML output?

A3: The AnQiCMS built-in global HTML compression feature is not mentioned directly in the document, but generally speaking, a mature content management system or its deployment environment will have various optimization means. At the AnQiCMS template level, as introduced in the article,{%-and-%}Is the core manual control method. In addition, you can enable Gzip compression at the server level (such as Nginx or Apache configuration) to reduce the size of the transmitted files.In the front-end build process, you can also use tools like Webpack, Gulp, etc. to perform further automated compression (minification) on the final generated HTML files, but this is usually the last step before deployment.