In the template development of AnQiCMS, we are committed to creating efficient and tidy code.AnQiCMS is based on Go language and Django template engine syntax, providing flexible content management and display capabilities.The template syntax is concise and powerful, allowing content managers and developers to easily build diverse website pages.emptyBlocks do not generate extra empty lines in the final rendered HTML when there is no content, thus maintaining the compact and beautiful structure of the page.

UnderstandingemptyThe challenge of blocks and blank lines

AnQiCMS template's{% for ... empty ... endfor %}structure is a very practical tag when dealing with list data.archivescontains data,forThe content within the block will be rendered repeatedly; whereas when the collection is empty,emptythe content within the block will be executed, usually used to prompt 'No content available' 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, the code seems to be okay. However, whenarchivesthe collection 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 newline characters in the final generated HTML.<li>目前没有文章可供显示。</li>This content has unnecessary blank lines before and after.These blank lines may not directly affect the page functionality, but they may destroy the neatness of the HTML structure. For developers who pursue ultimate optimization, they can even affect the rendering effect of the page and the details of the minor 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 white space. As mentioned in the basic conventions of AnQiCMS template creation,tag-remove.mdthe document explicitly states, by adding to the left or right of the tag,-We can precisely control whether to remove the blank line introduced by the tag.

In particular, there are three ways to use this control character:

  • {%- tag %}: It will remove all whitespace characters to the left of the tag (i.e., before the tag).
  • {% tag -%}: It will remove all whitespace characters to the right of the tag (i.e., after the tag).
  • {%- tag -%}Then both leading and trailing whitespace characters will be removed.

In this way, we can target{% for %}/{% empty %}and{% endfor %}Apply fine-grained control using logical control tags to ensure no extra blank lines are generated during rendering.

Let's revisit the previous example and apply blank character control:

<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 be removed<ul>Tags and{% for %}all whitespace betweenforis followed by the<ul>.
  2. {%- empty %}on the left:-Ensure that whenarchivesThe content inside the loop will not be rendered, instead, the content of the block will be displayed.emptythe block is executed, its content will notforproduce extra blank lines due to a newline at the end of the tag line.
  3. {%- endfor %}on the left:-Ensureendforthere are no extra blank lines between the tag and the rendered content before it; whereas the-should be removed.{% endfor %}Tags and</ul>All whitespace between tags.

This way, no matterarchiveswhether there is content, the rendered HTML structure will be more compact, without any extra blank lines to interfere with the layout.

A broader range of application scenarios

This technique of controlling blank characters is not limited to{% empty %}Blocks. It applies to all possible cases due to logical tags such asif/elif/else/macroIn scenarios where unnecessary blank lines are generated due to【en】-to optimize the output. For example, when rendering a small amount of content based on different conditions within a conditional judgment block, the same can be achieved by-to ensure the compactness of the layout:

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

By using in{%- if %}/{%- else %}and{%- endif %}used on tags,-we ensured that<div>The content inside 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 trivial, but from the perspective of professional website operation, they may affect the following aspects when accumulated:

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

AnQiCMS is dedicated to providing an efficient and easy-to-expand content management solution, and this fine control over template output is a reflection of its powerful features in detail. It helps us create high-quality websites without sacrificing flexibility.

Summary

In AnQiCMS template processingemptyblock and other logic control tags, use hyphens cleverly-The control of whitespace characters is crucial for ensuring compact and tidy HTML output.This tiny trick not only improves the quality of template code, but also brings better performance and user experience to the website.As seasoned website operation experts, we fully understand that every detail can affect the overall performance. Mastering this meticulous template control ability will undoubtedly give a powerful boost to our content marketing and website operation work.

Common Questions (FAQ)

Q1:-where should the symbol be placed on the side of the AnQiCMS template tag? A1: -Symbols can be placed on the left or right of AnQiCMS template tags, or even on both sides at the same time.{%- tag %}It will remove all whitespace characters on the left side of the tag, including new lines.{% tag -%}Remove all whitespace to the right of the label; or{%- tag -%}Remove whitespace on both sides of the label. The choice 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 of AnQiCMS? A2:This method is mainly forLogic control tags(such asfor/if/elif/else/macroThe most effective ones are those that do not render any visible content themselves, but may introduce blank lines in the template file. For variable tags that directly output content (such as{{ variable }}），usually no need to use-，because they output specific content, not logical structure.

Q3: Does removing blank lines significantly improve website performance and SEO? A3:Although the impact of a single blank line on website performance and SEO is negligible, even to the point of being negligible, 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 make the HTML structure cleaner and more semantic by removing unnecessary blank lines, which is an important improvement for developers' maintenance experience and code quality, and indirectly benefits the overall health of the website.