In AnQiCMS (AnQiCMS) template development, we are committed to creating code that is both efficient and neat.AnQiCMS is based on Go language and Django template engine syntax, providing flexible content management and display capabilities.Its template syntax is simple and powerful, allowing content operators and developers to easily build diverse website pages.However, in practice, especially when dealing with dynamic content lists, a common but often overlooked issue is - how to ensureemptyBlocks do not generate extra empty lines in the final rendered HTML when there is no content, thereby maintaining the compact and beautiful structure of the page.

UnderstandingemptyThe challenge of blocks and empty lines

AnQiCMS template in{% for ... empty ... endfor %}structure, is a very practical tag for processing list data. When the collection (such asarchives) contains data,forthe content within the block will be rendered repeatedly; while when the collection is empty,emptyThe content within the block will be executed, usually used to prompt "No content" or display alternative information.

For example, we might write a template for a content list like this:

<ul>
{% for item in archives %}
    <li>{{ item.Title }}</li>
{% empty %}
    <li>目前没有文章可供显示。</li>
{% endfor %}
</ul>

At first glance, this code seems to be fine. However, whenarchivesthe set is actually empty, {% for ... %}and{% endfor %}These tags themselves, as well as the line positions they occupy in the template file, may leave some additional line breaks in the final generated HTML, causing<li>目前没有文章可供显示。</li>This content has unnecessary blank lines at the beginning and end. Although these blank lines do not directly affect the page function, they may destroy the neatness of the HTML structure. For developers who pursue ultimate optimization, it may even affect the rendering effect of the page and the details of the SEO performance.

Solution: Skillfully using whitespace control characters-

AnQiCMS's template engine provides an elegant and powerful mechanism to solve this blank line problem, which is to use hyphens in template tags(-Control whitespace. As mentioned in the basic conventions of AnQiCMS template creation,tag-remove.mdThe document clearly states, by adding to the left or right of the tag,-We can precisely control whether to remove the blank lines introduced by the tag.

Specifically, there are three ways to use this control character:

  • {%- tag %}: It will remove all leading whitespace characters (i.e., before the tag).
  • {% tag -%}: It will remove all trailing whitespace characters (i.e., after the tag).
  • {%- tag -%}: It will also remove the whitespace characters on both sides of the tag.

In this way, we can target{% for %}/{% empty %}and{% endfor %}精细逻辑控制标签进行处理，确保在渲染时不会生成多余的空白行。

让我们重新审视之前的例子，并应用空白字符控制：

<ul>{%- for item in archives %}
    <li>{{ item.Title }}</li>{%- empty %}
    <li>目前没有文章可供显示。</li>{%- endfor %}
</ul>

In this optimized code snippet:

  1. {%- for item in archives %}On the left:-Will remove<ul>with the tag and{% for %}All whitespaces between tags (including newlines), makeforLoop content immediately follow:<ul>.
  2. {%- empty %}On the left:-Ensure whenarchivesIt is empty,emptyWhen the block is executed, its content will not be affected byforthe newline at the end of the tag will not produce extra blank lines.
  3. {%- endfor %}On the left:-EnsureendforThere will be no extra blank lines between the tag and the rendered content before it; but on the right side of the-then remove{% endfor %}with the tag and</ul>All spaces between tags.

This way, no matterarchivesWhether there is content, the rendered HTML structure will be more compact, without unnecessary blank lines interfering with the layout.

Broader application scenarios

This technique of controlling blank characters is not limited to{% empty %}block. In all possible scenarios where unnecessary blank lines may be generated due to logical tags (such asif/elif/else/macroetc.), we can apply it flexibly.-Optimize the output. For example, when rendering a small amount of content based on different conditions in a conditional judgment block, you can also go through-to ensure the compactness of the layout:

<div>{%- if user.IsAdmin %}
    <p>欢迎，管理员！</p>{%- else %}
    <p>欢迎，普通用户！</p>{%- endif %}
</div>

By adding in{%- if %}/{%- else %}and{%- endif %}tags usage-we ensured<div>The content within the tag can be rendered tightly in any case, avoiding<div>empty lines inside.

Why is this detail important?

On the surface, a few blank lines may seem unimportant, but from the perspective of professional website operation, their accumulation may affect the following aspects:

  • HTML structure tidinessClean code is easier to read, maintain, and debug.
  • Page loading efficiency: Although a single blank line has a negligible impact on the size of a page, removing unnecessary whitespace characters from high-traffic large websites can effectively reduce the size of HTML files, thereby slightly improving page loading speed and bandwidth consumption.
  • CSS/JS parsing: Although modern browsers and interpreters are very capable of handling extra whitespace, a more compact DOM structure theoretically reduces the workload of browsers in parsing and rendering processes.
  • SEO-friendliness: Search engines tend to prefer more concise and standardized HTML code.Although the blank line itself is not a decisive factor in SEO, it reflects the professionalism and attention to detail in website construction.

AnQiCMS is dedicated to providing efficient and scalable content management solutions, and this fine control over template output is a reflection of its powerful functionality in detail, helping us to create high-quality websites without sacrificing flexibility.

Summary

Handling in AnQiCMS templateemptyBlocks and other logical control tags are skillfully used with hyphens(-) Control of whitespace characters is the key to ensuring that HTML output is compact and tidy.This little trick can not only improve the quality of template code, but also bring better performance and user experience to the website.As experienced website operators, we fully understand that every detail can affect overall performance. Mastering this meticulous template control ability will undoubtedly enhance our content marketing and website operation work.

Frequently Asked Questions (FAQ)

Q1:-The symbol should be placed on which side of the AnQiCMS template tag? A1: -The symbol can be placed on the left or right side of the AnQiCMS template tag, even on both sides.{%- tag %}It will remove all whitespace characters on the left side of the tag, including newlines.{% tag -%}Remove all whitespace to the right of the label; and{%- tag -%}Remove whitespace on both sides of the label. The method to choose depends on the specific position of the whitespace you want to remove.

Q2: Does this method of removing blank lines work for all template tags in AnQiCMS? A2:This method mainly applies toLogical control tags(such asfor/if/elif/else/macroEffective, as these tags do not render any visible content themselves, but their position in the template file may introduce blank lines. For variable tags that output content directly, such as{{ variable }})，usually not necessary to use-, because they output specific content, not logical structure

Q3: Does removing blank lines significantly improve website performance and SEO? A3:Although a single blank line has a negligible impact on website performance and SEO, it can even be ignored, but when the website content is large and the template structure is complex, the accumulated blank lines may slightly increase the size of the HTML file.It is more important to remove unnecessary blank lines, which can make the HTML structure cleaner and more semantic. This is an important improvement for developers' maintenance experience and code quality, and indirectly benefits the overall health of the website.