Unlock the essence of AnQiCMS template:{% if %}the tag in-Symbols, say goodbye to annoying blank lines!

During the template development process of AnQiCMS, whether it is an experienced developer or an operator who is new to templates, one may encounter a seemingly minor but occasionally annoying problem: extra blank lines or spaces generated by template tags during rendering.These 'hidden' characters, although they will not always affect the final presentation of the page, may still become the culprit of layout disorder or code redundancy in some precise layout requirements or when pursuing the ultimate simplicity of HTML structure.{% if %}in logical tags using-symbol, what practical problems can it solve for us?

AnQiCMS uses a template engine syntax similar to Django, which makes its template language both intuitive and expressive. But it is this tag-based control flow design that,{% if %}/{% for %}Tags, by default, will often output the line where the tag itself is located, as well as adjacent whitespace characters (including newline characters) to the final HTML.

Imagine when you write a conditional judgment code in a template, like:

{# 默认行为下的 if 标签 #}
{% if user.isLoggedIn %}
    <p>欢迎回来，{{ user.name }}！</p>
{% else %}
    <p>请登录。</p>
{% endif %}

This code may look neat in the template file, but whenuser.isLoggedInresponse fortrueWhen, the actual generated HTML source code may look like this:


    <p>欢迎回来，张三！</p>

NotepLabel prefix and suffix may contain extra newline characters and spaces.These extra whitespace characters are usually ignored during browser parsing and do not usually cause visual issues in most cases.display: inline-blockThe navigation menu item), or when you have extremely high requirements for the cleanliness of the HTML source code, these unexpected whitespace characters can cause unexpected slight spacing between elements or make your code less pleasant to read.

Core Decryption:-The wonder of symbols

To accurately control the blank characters generated during template rendering, AnQiCMS template engine provides an elegant solution: at the start of the tag{%and end%}Symbol within, add one on both sides-This little-Symbol, like a sharp pair of scissors, can cut off the whitespace on both sides of the label itself, including newline characters.

Specifically, its mechanism of action is as follows:

  1. {%- 标签 %}: when-The symbol follows directly{%After that, it will remove the tagon the left(i.e., before the tag starts) all whitespace characters, including newline characters.
  2. {% 标签 -%}: when-The symbol is adjacent to-%}Before that, it will remove the tagOn the right side(i.e., after the tag ends) all whitespace characters, including newline characters.
  3. {%- 标签 -%}: Using both of these symbols will remove the tagon both sidesall whitespace characters.

Let us take another look at the previous{% if %}Example, and apply it to-symbols:

{# 应用了 - 符号的 if 标签 #}
{%- if user.isLoggedIn -%}
    <p>欢迎回来，{{ user.name }}！</p>
{%- else -%}
    <p>请登录。</p>
{%- endif -%}

After such processing, ifuser.isLoggedInresponse fortrueThe final generated HTML source code will become very concise:

<p>欢迎回来，张三！</p>

All newline characters and extraneous spaces have been precisely removed, thus avoiding unnecessary HTML redundancy and potential layout issues.This not only makes the generated HTML cleaner, but also helps to improve the page loading efficiency (although the improvement is negligible for small pages).

Actual application scenarios: When can it be used?

This technique can play a unique value in various template development scenarios:

  • Navigation menu and list items (<ul><li>)This is one of the most common application scenarios. When the list item<li>is set todisplay: inline-blockWhen rendered by the browser, the whitespace (usually newline characters and spaces) between them will be displayed as a very small spacing. Using{%- for -%}and{%- endfor -%}Completely eliminate these spaces to achieve pixel-level precise layout.
  • Dynamic concatenation of inline contentWhen you need to dynamically insert content generated by conditional judgments into a paragraph of text and do not want extra spaces to affect readability,-Symbol can be put to use.For example, generate a descriptive text: "The product was released on {%- if product.releaseDate %} {{ product.releaseDate }}{%- else %} today{%- endif %}."}]
  • Generate non-HTML format contentIf you use AnQiCMS's template engine to generate plain text, JSON, XML, or CSS/JavaScript files, etc., in non-HTML formats, then precise control over whitespace is particularly important.Any extra newline or space may cause file format error or parsing failure.
  • Module-based template fine controlIn large projects, templates are often split into many small pieces (include）In introducing these code snippets, if there are any whitespace characters produced by internal or external logic tags, they may be stacked together, leading to more problems. using-It can ensure seamless connection between various modules.

Summary and Suggestions

In AnQiCMS template development,{% if %}the tag in-The symbol is a powerful tool for controlling the output of whitespace characters. It is not only suitable forif标签，所有 AnQiCMS 的控制流标签（如 English)forLoops (）can also use this feature.Although not all scenarios require it, understanding and mastering its usage can give you finer control when facing complex page layouts or when you have high requirements for code cleanliness.

建议您在以下情况考虑使用 English-symbols:

  1. 当您发现 Englishdisplay: inline-block元素之间存在无法解释的微小间距时。 English
  2. When you generate non-HTML format content (such as JSON, XML), to avoid formatting errors.
  3. When you pursue the ultimate simplicity and compactness of HTML source code.

Through flexible use of this simple yet powerful symbol, you will be able to better master the template engine of AnQiCMS and write more elegant, robust, and expected template code.

Common Questions (FAQ)

Q1:-Symbols can only be used in{% if %}tags, can't they?

A1:Of course not.-The symbol is a general mechanism used in AnQiCMS template engine to control whitespace characters, which can be applied to any control flow tag, such as{% for %}/{% macro %}/{% with %}English. As long as you want to eliminate any extra whitespace characters (including newline characters) that may be generated by a tag during rendering, you can add in the tag's start{%or end%}position-add the symbol.

Q2: Use-Does the symbol affect page performance?

A2:From a macro perspective, using-The impact of symbols on page performance is negligible, almost negligible.Its main purpose is to optimize the neatness and accuracy of the HTML source code layout.Although removing extra whitespace characters can indeed slightly reduce the size of the page file and save a little bandwidth, this saving usually will not bring significant performance improvement in modern network environments.-symbols has a negligible overhead. Therefore, you have no need to worry that it will become a performance bottleneck.

Q3: Why do some inline elements always have a slight space between them in my page layout?

A3:This is usually due to the default handling of 'whitespace' (including spaces, tabs, and newline characters) by the browser in the HTML source code. When you use CSS to set multiple block-level or inline elements todisplay: inline-blockat the time, these in HTML