How to accurately remove extra blank lines and newline characters generated by logical tags in the AnQi CMS template?

When developing website templates, especially when using systems like AnQiCMS that are based on Django template engine syntax, a common annoyance is logical tags (such as{% if ... %}or{% for ... %}After processing, some unnecessary blank lines or newline characters may remain.These seemingly insignificant blanks may affect the final generated HTML structure, and even in some cases, cause slight disturbances to the front-end style layout.Fortunately, AnQiCMS provides a simple and powerful mechanism to solve this problem, allowing us to accurately control the whitespace characters in the template output.

Understanding the origin of whitespace characters

Template engine in parsing{% %}When such logical tags are used, even if these tags themselves do not output any visible content, the lines they occupy and the surrounding line breaks and spaces are often retained. Imagine one{% if condition %}If the condition is not met, the content inside the tag will not be rendered, but the line where the tag is located and any newlines that may exist before and after it may still be present in the final HTML file.

For example, when performingforDuring the loop iteration, the newline characters between each loop item may be retained, resulting in a large number of blank lines in the final HTML source code. ForifThe statement is also true if the condition does not hold, the whole{% if %}to{% endif %}Content between the tags will not be output, but the lines occupied by these logical tags and their related blank spaces may still be output to the browser, which may increase the size of the page file and may even cause some unexpected layout issues, such as when usinginline-blockLayouting may result in gaps between elements due to these extra whitespaces.

Solution: Utilize-Precise symbol control

To deal with this excess blank space, the AnQiCMS template engine introduces a very practical syntactic sugar - add a hyphen after or before the percentage sign in the logical tag-This little symbol has magical power, it can tell the template engine to remove the blank characters around the specified direction when processing this tag.

This-There are two main forms of symbols:

• {%- tag %}When the hyphen is placed inside the left percent sign ({%-) it removes the labelBeforeAll whitespace characters that do not belong to actual content, including newline and space.
• {% tag -%}When the hyphen is placed inside the percentage sign on the right (-%}), it will remove the label.After thatAll whitespace that does not belong to the actual content.

This feature can be used alone or in combination to achieve ultimate control over whitespace. Let's understand its effect through some actual code examples:

Example one: inif-elif-endifApplication of logic

{# 原始情况，可能在条件不满足时产生多余空行 #}
{% if false %}
1st choice
{% elif false %}
2nd choice
{% elif true %}
3rd choice
{% endif %}

{# 使用 `{%-` 和 `-%}` 移除标签前后的空白 #}
{%- if false -%}
1st choice
{%- elif false -%}
2nd choice
{%- elif true -%}
3rd choice
{%- endif -%}

In the above example, if no condition istrueThe original code might produce some blank lines. But by using-After the symbol, even if the condition is not met, the logical label itself will not leave any blank痕迹 in the output.

Example two: inforRemove blank in the loop

Assuming we have aarchivesList, hope to output their IDs in a compact manner:

{# 原始情况，每个 ID 后可能会跟一个换行，导致输出冗余 #}
{% for item in archives %}
{{ item.Id }}
{% endfor %}

{# 移除标签前后的换行符和空格，实现紧凑输出 #}
{% for item in archives -%}
{{- item.Id -}}
{%- endfor %}

By{{- item.Id -}}we ensureditem.IdThere will be no extra spaces or newline characters wrapped around when outputting. But{% for item in archives -%}Removedforthe newline after the tag,{%- endfor %}It can prevent an empty line from being generated after the loop ends, making the entire loop output very compact.

Consideration in practice and **practice

Mastered the AnQi CMS template in-The use of symbols, you have a powerful control over the blank characters of the template output.This not only helps you generate more concise and expected HTML code, but also effectively avoids some small troubles in front-end layout, making your website more perfect in detail.

In practical development, there are several practices worth noting that use this technique:

• Optimize the HTML structure: When you want the generated HTML code to be as compact as possible, reducing unnecessary volume,{%-and-%}It is a very effective tool. Especially when generating some lists that need to be tightly packed (such as navigation menus<li>items) it can avoid extra line breaks between list items, affectinginline-blockWait for the layout effect.
• Avoid CSS layout issues: Some CSS layout techniques, for example