What is the difference between `{%- tag %}` and `{% tag -%}` in AnQiCMS templates?

In the practice of AnQiCMS template development, every detail may affect the final presentation effect and code quality of the page.As an experienced website operations expert, I know that the standardization of template writing is not only related to the beauty of the page, but also closely related to the performance optimization of the website and the search engine friendliness.Today, let's delve deeply into the two seemingly minor, yet significant symbols in the AnQiCMS template that can make a big difference:{%- tag %}and{% tag -%}They are the tools to control the output of whitespace in AnQiCMS (based on Django-like template engine).

The 'hidden' issue in template output: extra whitespace characters

Firstly, we need to understand why such control is needed. In the AnQiCMS template rendering process, template tags (such as{% if ... %}/{% for ... %}The trailing whitespace characters (such as newline characters, spaces, and tabs) may be left in the generated HTML code after the processing logic.Imagine if you were dynamically generating multiple list items in a loop, and each item might have an extra blank line due to the processing of these template tags.

For example, a simple list rendering code may look like this:

<ul>
{% for item in archives %}
    <li>{{ item.Title }}</li>
{% endfor %}
</ul>

Due to rendering in practice,{% for ... %}and{% endfor %}Labels each occupy a line, and after processing, the blank spaces generated are not explicitly removed, the generated HTML source code may be as follows:

<ul>

    <li>文章标题1</li>

    <li>文章标题2</li>

    <li>文章标题3</li>

</ul>

Although this usually does not affect the final display effect of the page (browsers automatically ignore most extra whitespace), for developers and operators who pursue extreme optimization and code cleanliness, this will lead to:

1. HTML code redundancy:Characters that are not necessary have been added, causing the HTML file size to slightly increase. Under large websites or high-concurrency scenarios, this can accumulate into considerable bandwidth consumption and loading time.
2. Readability decreased:For those who directly view the HTML source code for debugging or SEO analysis, too many blank lines and whitespace can distract the eyes and reduce the readability of the code.
3. Potential layout issues:Even though it is not common, in certain scenarios where CSS or JavaScript processing is sensitive to whitespace, these additional whitespaces may cause unexpected layout or behavior issues.

Solution: The magic of precise control over whitespace -{%- tag %}and{% tag -%}

The AnQiCMS template engine provides a concise and powerful way to solve this problem, that is, in the template tags of%Add a hyphen inside the symbol(-). The hyphen can be placed at the beginning of the tag, at the end, or both.

1.{%- tag %}: Remove all whitespace before the tag

When you add a hyphen to the template tag'sbeginningit means{%-at that time, the template engine will remove itsleft side (previous)All whitespace characters. This includes all newline characters, spaces, and tabs before the label on the line.

For example:

<!-- 这是一个注释，标签在这里开始 -->{%- for item in archives %}
    <li>{{ item.Title }}</li>
{% endfor %}

If{%- for ... %}Any leading newline or spaces will be removed. This is very useful when you need to tightly connect the template tag with the previous HTML element.

2.{% tag -%}Remove all whitespace after the tag

Similar to the leading hyphen, when you are in the template tag'sendingit means- %}at that time, the template engine will remove itsto the right (after)all whitespace. This usually refers to the newline character at the end of the line where the tag is located.

Continue with the previous example:

<ul>
{% for item in archives -%}
    <li>{{ item.Title }}</li>
{% endfor %}
</ul>

Here{% for item in archives -%}It will remove itself and the newline characters that follow, making<li>The tag follows immediately<ul>The tag, without any empty lines.

3.{%- tag -%}: Full control, removing whitespace around the tags

When you add a hyphen at both the beginning and end of the template tag, i.e.{%- ... -%}it will remove the tags at the same timeboth on the left and rightAll whitespace characters. This is the most thorough method of whitespace control, usually used in scenarios where it is necessary to completely 'hide' the line with the template tags, without producing any whitespace output.

Return to our list example, if we want the output HTML code to have no extra blank lines, we can write it like this:

<ul>
{%- for item in archives -%}
    <li>{{ item.Title }}</li>
{%- endfor -%}
</ul>

The generated HTML source code will be:

<ul><li>文章标题1</li><li>文章标题2</li><li>文章标题3</li></ul>

You can see that the HTML code has become very compact, with no extra blank lines.

Control of whitespace characters in variable output:{{- variable }}and{{ variable -}}

It is worth mentioning that this blank control mechanism is not only applicable to template tags but also to variable output.

• {{- variable }}: Remove variable outputBeforeof the blank spaces.
• {{ variable -}}: Remove variable outputAfter thatof the blank spaces.

For example, if you are dynamically generating text in a loop and want it to be closely connected:

{% for word in words %}
    <span>{{- word -}}</span>
{% endfor %}

This will ensure that each<span>words within the tag are close to each other, as well as<span>The tag itself and the content before and after it do not have any unnecessary spaces.

Actual application scenarios and benefits

After mastering these blank character control skills, the template development of AnQiCMS will become more refined and efficient.

• Optimize HTML output: Reducing the size of web page files is beneficial for improving website loading speed and reducing CDN costs.
• Enhancing SEO friendliness:When search engines crawl and parse pages, although they usually can handle redundant whitespace, cleaner HTML code is always considered to have a better structure.
• Avoid front-end conflicts: In complex CSS layouts (such as flexbox or grid layouts, or certain inline-block elements), unexpected whitespace can cause spacing issues, precise control can effectively avoid these pitfalls.
• Code maintainability:Consciously controlling whitespace can also cultivate stricter coding habits, making the template code itself more tidy and organized.

In summary,{%- tag %}and{% tag -%}Is the AnQiCMS template engine a seemingly simple feature that contains deep optimization logic.They give developers unprecedented control over the final HTML output, an indispensable tool for building high-performance, high-quality websites.Proficiently apply these skills, and your AnQiCMS website will be able to better serve users and perform better in search engines.

Frequently Asked Questions (FAQ)

Q1: Use{%- tag -%}Do you always**practice**removing all whitespace?A1: It is not always so. Although removing all whitespace can make HTML output as compact as possible, sometimes you may want to keep some whitespace to maintain the readability of the HTML source code, especially in complex nested structures or during debugging stages.**Practice is used when precise control over the output structure is needed (such as lists, table rows) or when blank spaces cause layout issues, while in other less sensitive areas, restrictions can be relaxed appropriately to balance the compactness and readability of the code.

Q2: If I forget to use these whitespace control symbols, will the AnQiCMS website report an error?A2: Generally, the template will not cause an error. Browsers have a strong error tolerance in parsing HTML, most of the extra whitespace is ignored.But as mentioned in the article, this may lead to redundant HTML source code, reduced readability, and in rare cases, specific front-end layout issues.Therefore, this is not an error but a state of 'unoptimized'.

Q3:{{- variable }}and{{ variable -}}Are there any other practical uses besides beautifying the output?A3: In addition to making the output HTML more compact and tidy, in some specific scenarios, controlling the spacing on both sides of the variable output is also very critical.For example, when you need to embed dynamically generated text or values directly into JavaScript code or CSS property values, any unexpected whitespace can lead to syntax errors.By precise control, it can ensure that the variable value is inserted accurately, avoiding potential front-end logic issues.