How to use the 'Remove logical tag line occupation' feature to clean up extra blank lines rendered by the template?

When using AnQi CMS to manage a website, we all hope that the page presented to the visitor is both beautiful and efficient.The loading speed of the page and the neatness of the source code not only affect the user experience, but also have a subtle but important impact on search engine optimization (SEO).You may have encountered such a situation in template development: although the template code looks neat, there are always some unwanted blank lines in the rendered HTML source code.These blank lines are mostly from the logic control tags in the template, and Anqi CMS provides a very practical function to help us easily solve this problem.

How are blank lines generated?

The Anqi CMS template engine uses a syntax similar to the Django template engine, which will include in the parsing of templates,{% if ... %}/{% for ... %}/{% set ... %}as well as{% with ... %}Logical tags are considered independent lines. When these tags occupy a line alone in the template file, even if they do not generate visible content themselves, the template engine may leave whitespace characters on the line and adjacent lines during processing, resulting in unnecessary blank lines when rendered into HTML.

For example, suppose you have a piece of code in your template that determines whether to display some content:

<header>
    <h1>网站标题</h1>
    {% if show_ad %}
    <div class="banner-ad">
        广告内容
    </div>
    {% endif %}
    <nav>
        <!-- 导航内容 -->
    </nav>
</header>

Whenshow_adWithfalsethen,{% if show_ad %}and{% endif %}These tags and the content between them will not be rendered. However, you may find<h1>Tags and<nav>There are still two or more lines of blank space between the tags because{% if ... %}and{% endif %}The line originally occupied by the label was 'cleaned' into an empty line.

<header>
    <h1>网站标题</h1>


    <nav>
        <!-- 导航内容 -->
    </nav>
</header>

These blank lines usually do not affect the actual display effect of the page, but they increase the size of the HTML file. For websites that strive for extreme performance, every byte of extra data is worth optimizing.Moreover, they will make your website's source code look unprofessional and untidy.

Solution: Use the '-' symbol to remove the line occupied by the logical label.

To solve the problem of extra blank lines generated after template rendering, Anqi CMS provides a very concise and powerful feature: using it inside logical tags-The minus sign symbol. This symbol is like a 'tight' magic switch that tells the template engine to remove adjacent whitespace characters, including newline characters when processing this tag.

This-The symbol can be placed on the left side of the tag, such as{%- tag %}It can also be placed on the right side of the tag, such as{% tag -%}.

• When{%-When placed on the left side of the tag, it will remove all whitespace characters to the left (or above) of the tag.
• When-%}When placed on the right side of a tag, it will remove all whitespace characters to the right (or below) the tag.

Let's go back to the above example, by using-symbols to optimize it:

<header>
    <h1>网站标题</h1>
    {%- if show_ad %}
    <div class="banner-ad">
        广告内容
    </div>
    {%- endif %}
    <nav>
        <!-- 导航内容 -->
    </nav>
</header>

After such modification, whenshow_adWithfalsethe HTML output after template rendering will be:

<header>
    <h1>网站标题</h1>
    <nav>
        <!-- 导航内容 -->
    </nav>
</header>

As can be seen, the extra blank lines have been perfectly removed.

Similarly, forforLoop tags, this trick is also very useful. For example, if you want to generate a tight list without blank lines between each list item:

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

Here{% for item in archives -%}Removed the whitespace on the right of the tag,{%- endfor %}Removed the whitespace on the left of the tag. This ensures that the internal and external whitespaces of the loop are precisely controlled, generating the most compact HTML structure.

Practical scenarios and **practice

The function of removing the line occupied by logical labels is very practical in many scenarios:

1. <head>Area optimization:Website<head>The part usually contains variousmetatags,linktags,scriptTags, as well as TDK (Title, Description, Keywords) information.These tags' logical judgments (for example, only certain pages load certain styles or JS) if there are blank lines, it will increase the initial loading burden of the page and the confusion of the source code. Use-Can maintain<head>The compactness of the area.
2. List and Navigation:During generation<ul><li>or<nav><a>When a structure is used, looping and conditional judgments are very common. By removing blank lines, it ensures that there are no unnecessary blanks between list items, making the source code clearer.
3. Inline elements:When the logical tag controls some inline elements or closely arranged block-level elements, removing blank lines can make the source code more in line with expectations.
4. Responsive layout:In some CSS frameworks, the whitespace between different elements can sometimes affect layout calculations.Although browsers usually ignore extra spaces, a clean HTML source code can always provide a clearer view when debugging layout issues.
5. Code aesthetics and debugging:Clean source code can improve development and maintenance efficiency. When debugging rendering issues, the absence of distracting blank lines can also help you locate problems faster.

In practice, we do not need to use each logical label-. The key is to balance the readability of the code and the compactness of the output. Usually, at the top of the template file (such as<head>Areas, lists, navigation, etc., which have higher requirements for structure and performance, should give priority to using this feature.In some content areas, a moderate number of blank lines may actually improve the readability of template code, and can be selectively used according to specific circumstances.

How to operate

You need to use the 'Remove logical tag occupying line' feature, you need to:

1. Find the template file:The template files of AnQi CMS are usually stored in/templatethe directory, and.htmlAs a file extension. You can find the corresponding file according to the website design or the template name configured in the background.
2. Edit template:The AnQi CMS provides the function of online template editing in the background, you can find and edit your template files in the "Template Design" module of the background.Of course, if you are more accustomed to using local development tools, you can also connect to the server via FTP or SSH, download and edit files, and then re-upload them.
3. Add the “-” symbol：“Add on the left or right side of the logical tag (such as{% if ... %}/{% for ... %}/{% endif %}/{% endfor %}and so on)-symbols.
4. Save and update the cache:After modifying the template file, be sure to save it. Then, go to the "Update Cache" feature in the Anqi CMS backend, clear the system cache to ensure that your changes take effect immediately.

By reasonably utilizing the "Remove logical tag occupation line" function provided by AnQi CMS, you can easily optimize the HTML source code rendered by the template, making your website not only run efficiently but also have a clear and tidy internal structure.

Frequently Asked Questions (FAQ)

1. Will removing extra blank lines affect the actual display effect of the website?In most cases, extra blank lines in HTML do not directly affect the actual display effect of the website, because browsers automatically ignore most continuous whitespace characters when rendering pages.This feature mainly optimizes the neatness and file size of the generated HTML source code, which is helpful for enhancing the professional image of the website and minor performance optimizations (such as reducing network transmission volume).But in rare cases, if your CSS layout or JavaScript code has a strict dependency on whitespace characters, then removing blank lines may have unexpected effects, so it is recommended to test after making changes in critical areas.

2. Do I need to use the “-” symbol to remove blank lines for all logical tags in the template?There is no need to use all logical tags. Overuse may make the template code itself difficult to read and maintain.**Practice is in areas that have clear requirements for code compactness (such as websites' <head>Area, navigation menu, list, etc.) use this feature. In other content areas, if blank lines do not affect performance or aesthetics, they can be retained to enhance the readability of the template.

3. Why did I modify the template and use the "-" symbol, but the front-end page did not change?This is likely because you forgot to clear the system cache of AnQi CMS.The Anqi CMS to improve website access speed will cache the template rendering results.After modifying the template file, you need to log in to the AnQi CMS backend, find the "Update Cache" feature, click to clear the system cache, so that the new template file can be reloaded and take effect.