Unlock the essence of AnQiCMS template:{% if %}in the label-Symbol, 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 the template, they 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 do not always affect the final presentation of the page, may become the cause of layout confusion or code redundancy in certain precise layout requirements or when pursuing the ultimate simplicity of HTML structure.Today, let's delve into a simple yet powerful little trick in the AnQiCMS template - in{% if %}Used in logical tags such as-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 precisely this control flow design based on "tags" that, such as{% if %}/{% for %}In default behavior, it will often output the line where the tag itself is located, as well as the adjacent whitespace characters (including newline characters), to the final HTML.

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

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

This code might look neat in the template file, but whenuser.isLoggedInWithtrueAt the time, the actual HTML source code might be something like this: 


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

NotepLabel may have extra newline characters and spaces. These extra whitespace characters are usually ignored by the browser when parsing, so they do not usually cause visual problems in most cases.However, when you need to build a precise inline element layout (for example, usingdisplay: inline-blockNavigation menu item), or when there is a high requirement for the neatness of the HTML source code, these unexpected spaces can lead to unexpected small spaces between elements, or make the code reading less pleasant.

Core decryption:-The妙use of symbols

To accurately control the blank characters generated during template rendering, the AnQiCMS template engine provides an elegant solution: at the beginning of the tag{%and end%}Add a symbol immediately adjacent to it-Symbol. This little-Symbol, like a sharp scissors, can cut off the whitespace on both sides of the tag itself, including newline characters.

In particular, its mechanism of action is as follows:

  1. {%- 标签 %}：When-The symbol is immediately followed by{%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 tagRight(i.e., all whitespace characters after the tag ends, including newline characters.)
  3. {%- 标签 -%}: Using both of these symbols will remove the tagBoth sidesall whitespace characters.

Let us revisit the previous{% if %}example and apply it to-Symbol:

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

After such processing, ifuser.isLoggedInWithtruethe final HTML source code will become very concise:

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

All newline characters and extra spaces have been accurately 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).

Application scenario: When can it be used?

This little trick can play a unique role in various template development scenarios:

  • Navigation menu and list items (<ul><li>)This is the most common application scenario. When the list item<li>is set asdisplay: inline-blockWhen, the whitespace between them (usually newline and space) is rendered into a very small spacing by the browser. Use{%- for -%}and{%- endfor -%}Completely eliminate these spaces to achieve pixel-level precise layout.
  • Dynamic concatenation of inline content.When you need to dynamically insert content generated by conditional judgment into a paragraph of text without causing additional spaces that affect readability,-Symbols can be put to use. For example, generate a descriptive text:
  • Generate non-HTML format contentIf you use AnQiCMS template engine to generate plain text, JSON, XML, or CSS/JavaScript files, precise control over whitespace characters is particularly important.Any extra newline or space may cause the file format error or parsing failure.
  • Fine control of modular templatesIn large projects, templates are often broken down into many small pieces (includeThese code fragments may cause problems if logical tags within or outside of them generate whitespace characters, which may overlap and cause more issues. Use-Can ensure seamless connection between modules.

Summary and suggestions

In the template development of AnQiCMS,{% if %}in the label-The symbol is a powerful tool for controlling the output of whitespace characters. It is not only suitable forifLabel, all control flow tags of AnQiCMS (such asforLoops can be used for this feature. Although it is not necessary in all scenarios, understanding and mastering its usage can give you finer control when facing complex page layouts or when you have high requirements for code cleanliness.

Consider using in the following situations-Symbol:

  1. When you finddisplay: inline-blockThere are inexplicable tiny gaps between elements.
  2. When you generate non-HTML format content (such as JSON, XML), to avoid format errors.
  3. When you pursue the ultimate simplicity and compactness of HTML source code.

By flexibly using this simple but powerful symbol, you will be able to better handle the AnQiCMS template engine and write more elegant, robust, and expected template code.

Frequently Asked Questions (FAQ)

Q1:-The symbol can only be used in{% if %}the tags, right?

A1:Of course not.-The symbol is a universal mechanism used in the AnQiCMS template engine to control whitespace characters, it can be applied to any control flow tag, such as{% for %}/{% macro %}/{% with %}etc. If you want to eliminate any extra whitespace (including newline characters) that a tag may generate when rendering, you can add it at the beginning{%or at the end%}add it at-symbols.

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 layout accuracy of the HTML source code.Although removing extra whitespace characters can indeed slightly reduce the size of the page file and save a little bandwidth, this saving usually does not bring significant performance improvement in modern network environments.Template engine processing during parsing-the symbol overhead is also very small. Therefore, you don't 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-blockwhen, these in HTML