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 Go language, is committed to providing high-performance and scalable solutions, naturally also considering the code cleanliness for template developers.forUnder common scenarios like nested loops, excessive whitespace in templates often becomes a pesky problem.

ExploreforWhitespace issues in nested loops

AnQiCMS's template engine adopts the syntax style of Django template engine, which, by default, retains the newline characters and spaces around the template tags. This is helpful in some cases to maintain the readability of the template code, but whenforLoops are used extensively, especially when they are nested layer upon layer; unprocessed whitespace characters will grow 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 associated with the article.If the start and end tags of each loop are both accompanied by line breaks, and the internal content is also indented, then a large number of blank lines and excessive indentation will appear in the final HTML source code.These extra whitespace characters usually do not affect the final presentation effect of the page in the browser, but they will increase the file size of the page, prolong the loading time, and make the HTML source code bulky, difficult to read and debug.This is undoubtedly a "pain point" that needs to be addressed for developers who pursue ultimate performance and code purity.

AnQiCMS's elegant solution: Blank control tag

It is fortunate that the AnQiCMS template engine understands this pain point and provides a simple yet powerful blank management mechanism to help developers effectively handle these extra blank characters. The core lies in two special hyphens:{%-and-%}.

These two short dashes give template developers the ability to precisely control whitespace:

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

Similarly, we can also use it for variable output,{{- 变量 }}Remove leading whitespace from the variable.

By cleverly using these whitespace control tags, we canforfine-tune the whitespace output of loops and their internal elements.

Let us go through a simpleforloop example to see the effect:

DefaultforLoop (may produce extra spaces)

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

without using white space control tags, if{% for ... %}and{% endfor %}Labels occupy each line in the template, they will produce additional newline characters by default when rendered. Whenarchiveseach item in theitemis rendered,<li>the tag and its content{{ item.Title }}Also, there will be default indentation and line breaks, which may eventually lead to extra empty lines 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 do it like this:

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

In this example:

  • <ul>{%-It will remove<ul>from the right side of the tag{% for ... %}all the spaces on the left side of the tag.
  • {%- for item in archives %}and{% endfor %}Within the tags,-%}This will control the whitespace at the beginning and end of the loop tags.
  • {{- item.Title -}}It will ensureitem.TitleThere is no extra whitespace or line breaks 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 so, we can control it more finely, allowing each<li>The label takes up one 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 loops.Imagine a multi-layered nested list structure, with each layer using these blank control tags, the resulting HTML will be extremely neat and compact.<li>There is also one inside{% for tag in item.Tags %}Loop, and the inner loop should also be applied at the beginning and end of this inner loop.{%-and-%}It can avoid the generation of extra whitespace by the inner loop.

It is not onlyforLoop

It is worth mentioning that this whitespace management mechanism is notforLoop unique. Inif/else/withand other logical judgment or variable assignment tags, they are also applicable. For example, if you wantifthe content after the statement to be adjacent toifLabel, without the need for additional line breaks, and can also be used{%- if 条件 %}.

**Practical Tips and Considerations

Although the blank control label function is powerful, it is not necessary to overuse it in all places. Here are some suggestions:

  1. Balance readability and compactnessIn the development phase, retaining some blank spaces may help improve the readability of template code.But in the production environment, especially in the scenarios of pursuing performance and bandwidth optimization, removing extra whitespace is very beneficial.
  2. Local application instead of global replacement: Usually, you don't need to add it to every tag-. Pay close attention to those areas that generate a large number of repetitive structures (such as lists) and nested logic, as these are hotspots for blank accumulation.
  3. Note the visual layoutIn very rare cases, the whitespace between HTML elements (such asdisplay: inline-blockthe space between elements) may affect the visual layout. When using-%}Remove whitespace and pay attention to the final visual effect of the test page.

Through the reasonable use of the blank control tags provided by AnQiCMS, you can create more concise and efficient template code, bringing real optimization to your website operation.This attitude of continuous improvement is what an excellent website operations expert should possess.

Common Questions (FAQ)

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

Q2: Removing whitespace characters will it affect the visual layout of the page?

A2: In most cases, removing extra whitespace characters from the template will not affect the visual layout of the page.HTML will automatically collapse multiple consecutive whitespace characters into a single space and ignore the newline characters inside and outside the tags.display: inline-blockorflex

Q3: In addition to onforIs there any other method to automatically compress the HTML output in AnQiCMS other than manually adding blank control characters in the loop?

A3: The global HTML compression feature of AnQiCMS is not directly mentioned in the document, but generally speaking, a mature content management system or its deployment environment would have various optimization methods. 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, tools such as Webpack, Gulp, etc. can also be used to further automate the compression (minification) of the final generated HTML file, but this is usually the last step of processing before deployment.