Completely eliminate the trouble caused by logical tags in AnQiCMS template development:

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

However, when using its powerful template engine to build dynamic content, some developers may encounter a common problem: logic tags (such as{% if %}/{% for %}In rendering, by accident, 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 ultimate optimization or facing specific CSS layout (such asdisplay: inline-block;）when they may become potential risks. Today, let's delve into how to completely eliminate these blank lines caused by logical tags in the AnQiCMS template.

Why should we remove blank lines? What problems do they bring?

Perhaps you might ask, is it really necessary to go to such lengths to remove just a few blank lines?The answer is affirmative.

Firstly, the most common problem is when using CSSdisplay: inline-block;During layout. Since the browser interprets whitespace characters (including newlines) between HTML tags as a visible space, this can lead toinline-blockElements appear with a few pixels of spacing between them, destroying the precise layout effect calculated during design. Removing these blank lines will allow elements to be tightly arranged and perfectly restore the design.

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

Moreover, from the perspective of code maintenance, a page source file filled with unnecessary whitespace appears unorganized, reduces the developer's reading experience, and is not conducive to troubleshooting issues related to style.AnQiCMS template engine is designed to provide elegant solutions to these problems.

hyphen-The magic: Ultimate Blank Line Elimination Technique

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

Specifically, the hyphen-There are three usages:

  1. Remove from the left:{%- tag %}When-Place inside the tag{%When placed after the tag, it will remove all whitespace characters to the left of the tag (i.e., before the tag), including newline characters.

  2. Remove from the right:{% tag -%}When-Put after the tag end symbol%}If it is before, it will remove all whitespace characters to the right of the tag (i.e., after the tag), including newline characters.

  3. Remove both sides:{%- tag -%}Combining the above two usages,-It will remove all whitespace characters on both sides of the tag when the tag appears both inside and outside the label brackets.

Let us look at a commonforLoop examples to intuitively understand its function.

Suppose we have a list of articles, 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>After the tag and</ul>before the tag, as well as each<li>between them. This isinline-blockLayout below may cause unnecessary spacing.

Now, we use hyphen-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 be removed<ul>Tags and the first<li>The label between all blank lines.
  • {%- endfor -%}It will remove the last one.<li>Tags and</ul>The label between all blank lines.
  • Inside the loop, if each.<li>The label between also want to remove the blank lines, then you need to adjust further.<li>The layout of the label or its content:

The most extreme blank line elimination (usually used when extremely compact output is required):

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

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

Actual application scenarios and **practice

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

  1. List and loop ({% for %}):This is the most commonly used-. As shown in the above examples, in<ul>/<ol>etc. list containers and{% for %}between tags-, it 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 line 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 %}):EnglishQiCMS supports through{% include "partial/header.html" %}Introduce public code snippets. If these snippets should not be surrounded by additional spaces, you can also use-.
    
<div class="header-wrapper">{%- include "partial/header.html" -%}</div>

Caution:

  • Principle of moderation:Although-能够彻底消除空白行，但并非所有地方都需要它。Overuse may make the template code itself become compact and difficult to read, increasing the difficulty of later maintenance.Suggest using it only when it is indeed necessary to remove blank lines, or where it may cause layout issues.
  • Debug:In the development process, you can check the page source code to confirm whether the blank lines have been properly removed.
  • Code readability:In some cases, developers may choose to sacrifice a little in order to maintain the good readability of the template code