AnQiCMS template development: completely eliminate the trouble caused by blank lines brought by logical tags

In website front-end development, beauty and performance are often the two main goals pursued by developers.A clean and concise HTML output not only helps to improve page loading speed, but also avoids unexpected visual problems in certain specific layouts.AnQiCMS, as an enterprise-level content management system developed based on the Go language, has won the favor of users with its efficient and customizable features, and its Django-style template engine provides great flexibility.

However, when using its powerful template engine to build dynamic content, some developers may encounter a common problem: logical tags (such as{% if %}/{% for %}As rendering, unintentionally, blank lines may be left in the final generated HTML, although these blank lines usually do not affect the normal display of the page, but in pursuit of extreme optimization or facing specific CSS layouts (such asdisplay: inline-block;When this happens, they may become potential hazards. Today, let's delve into how to thoroughly eliminate these blank lines caused by logical tags in the AnQiCMS template.

Why should blank lines be removed? What problems do they bring?

Maybe you will ask, is it really necessary to go to such lengths to remove just a few lines of blank?The answer is affirmative. These seemingly insignificant blank lines, although they usually do not directly lead to functional errors, may still bring unexpected problems in some specific scenarios:

Firstly, the most common problem is when using CSSdisplay: inline-block;When laying out. Because the browser will interpret the whitespace between HTML tags (including newline characters) as a visible space, this will result ininline-blockThere is a few pixel spacing between elements, which ruins the layout effect calculated precisely during design. Removing these blank lines will allow the elements to be tightly arranged and perfectly restore the design.

Secondly, for a platform like AnQiCMS, which is positioned as an efficient, high-concurrency system and pays attention to SEO optimization, every detail is worth paying attention to.Although a single blank line has a negligible impact on file size, when logical tags are applied in large quantities to scenarios such as lists, loops, and so on, the accumulated redundant whitespace will slightly increase the HTML file size of the page.Although modern browsers and network environments are not very sensitive to these extra bytes, for websites that pursue ultimate performance and SEO-friendliness, reducing unnecessary transmission volume and improving code cleanliness has always been the direction of optimization.

Again, from the perspective of code maintenance, a page source file filled with unnecessary blank spaces will look untidy, reduce the developer's reading experience, and is also not conducive to troubleshooting style-related issues.AnQiCMS template engine is the elegant solution to these problems.

hyphen-The magic: Ultimate blank line elimination technique

AnQiCMS template engine cleverly introduces a simple yet powerful mechanism to solve the problem of blank lines generated by logical tags—the use of special hyphens in logical tags-This small symbol can be placed inside the start or end brackets of logical tags to precisely control whether the whitespace around the tags is removed.

Specifically, hyphen-There are three usages:

  1. Remove from the left:{%- tag %}When-Placed at the start of the tag{%After that, it will remove all whitespace characters before the tag (i.e., to the left of the tag), including newline characters.

  2. Remove from the right:{% tag -%}When-Placed at the end of the tag%}Before, it would remove all whitespace characters to the right of the tag (i.e., after the tag).

  3. Remove both sides:{%- tag -%}When combined with the above two usages,-When it appears inside the start and end brackets of a tag, it will simultaneously remove all whitespace characters on both sides of the tag.

Let's look at a commonforAn example loop to直观感受它的作用.

Assuming we have an article list, we would usually write the template like this:

{# 示例一：未经优化的列表，可能带有空白行 #}
<ul class="article-list">
{% for item in archives %}
    <li class="article-item">
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
{% endfor %}
</ul>

This code is rendered in the browser,{% for %}and{% endfor %}The line where the tag is located may leave a newline in the final HTML output, especially<ul>tag and</ul>before the tag, as well as between each<li>. This can lead to unnecessary spacing under theinline-blocklayout.

Now, we use hyphens-to optimize it:

{# 示例二：优化后的列表，消除逻辑标签产生的空白行 #}
<ul class="article-list">{%- for item in archives -%}
    <li class="article-item">
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>{%- endfor -%}
</ul>

In this optimized code:

  • {%- for item in archives -%}Will remove<ul>And the first tag<li>All the blank lines between tags.
  • {%- endfor -%}Will remove the last one<li>Tags and</ul>All the blank lines between tags.
  • Inside the loop, if each<li>also want to remove blank lines between tags, then further adjustments are needed<li>the layout or content of the tags:

The most extreme blank line removal (usually used when extremely compact output is needed):

{# 示例三：极致优化的列表，完全消除逻辑标签和元素间的空白行 #}
<ul class="article-list">{%- for item in archives -%}<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>{%- endfor -%}</ul>

This will render the entire list as a single line of compact HTML code, completely eliminating all logical tags and unnecessary whitespace between elements.

Application scenarios and **practice

Mastered the hyphen-The usage, you will be more proficient in AnQiCMS template development. The following are some common application scenarios and **practical suggestions:**

  1. List and loop ({% for %}):This is commonly used-Place. As shown in the example given, in<ul>/<ol>List containers and{% for %}Tags are applied between-Can effectively solveinline-blockLayout spacing issue.
  2. Conditional judgment ({% if %},{% elif %},{% else %}):When the content inside the conditional judgment block needs to be presented in a strict layout, it can also be used.-To avoid the blank lines introduced by the conditional tag. For example:
    
<div class="status-indicator">{%- if archive.Status == "published" -%}
    <span>已发布</span>
{%- elif archive.Status == "draft" -%}
    <span>草稿</span>
{%- else -%}
    <span>未知状态</span>
{%- endif -%}</div>
  3. Module reference ({% include %}):AnQiCMS supports through{% include "partial/header.html" %}Introduce public code snippets. If these snippets should not have additional whitespace around them, they can also be used accordingly-.
    
<div class="header-wrapper">{%- include "partial/header.html" -%}</div>

Note:

  • The principle of moderation:Though-Can completely eliminate blank lines, but it is not needed everywhere.Overuse may make the template code itself compact and difficult to read, increasing the difficulty of later maintenance.It is recommended to use it only when it is truly necessary to remove blank lines, or where it may cause layout issues.
  • Debug:During development, you can check the page source code to confirm that the blank lines have been correctly removed.
  • Code readability:In some cases, developers may choose to sacrifice a little in order to maintain the good readability of the template code