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

How are empty lines generated?

The template engine of Anqi CMS uses syntax similar to Django's template engine, which will parse the template, including{% if ... %}/{% for ... %}/{% set ... %}and{% with ... %}Treat logical tags as independent lines.When these tags occupy a line by themselves in the template file, even if they do not produce any visible content, the template engine may leave whitespace characters on the line they are on and the adjacent lines during processing. This may result 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_adresponse forfalsewhen{% if show_ad %}and{% endif %}These tags and their content will not be rendered. However, you may still find that in the final HTML output,<h1>Tags and<nav>there are still two or more blank lines between the tags, because{% if ... %}and{% endif %}The line originally occupied by the label was "cleaned" to be 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 will increase the size of the HTML file. For websites that strive for ultimate performance, every extra byte is worth optimizing.It is more important, they will make your website source code look unprofessional and untidy.

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

To resolve the issue of extra blank lines generated after template rendering, Anqi CMS provides a very concise and powerful feature: using within logical tags-The symbol. This symbol acts like a 'compact' magic switch, which tells the template engine to remove adjacent whitespace characters, including newline characters, when processing this tag.

This-Symbols can be placed on the left side of the tag, such as{%- tag %}, and they 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 label, it will remove all whitespace characters to the right (or below) of that label.

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

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

After such modification, whenshow_adresponse forfalsethe template is rendered, the output HTML will be:

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

As you can see, the extra blank lines have been perfectly removed.

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

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

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

Practical scenarios and **practice

The function of "removing logical label occupied lines" is very practical in various scenarios:

  1. <head>Area optimization:the website's<head>parts usually contain variousmetatags,linktags,scriptTags, as well as TDK (Title, Description, Keywords) information.The logical judgment of these tags (such as only loading certain styles or JS on specific pages) if it generates empty lines, it will increase the initial loading burden and code confusion of the page.-Can maintain<head>Compactness of the area.
  2. List and navigation:In generating<ul><li>or<nav><a>When structuring, using loops and conditional judgments is very common. By removing blank lines, unnecessary blank spaces between list items can be ensured, making the source code clearer.
  3. Inline elements:When the logical tag controls some inline elements or tightly packed 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 affect layout calculations.Although browsers usually ignore extra whitespace, a clean HTML source code can always provide a clearer view when troubleshooting 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 actual operations, we do not need to use a logical tag for each operation.-The key is to balance the readability of the code and the compactness of the output. Usually, in the header of the template file (such as<head>Areas with high requirements for structure and performance such as regions, lists, and navigation, 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

To use the 'Remove logic label occupied line' feature, you need:

  1. Find the template file:The template files of Anqi CMS are usually stored in:/templatedirectory, and named with.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, where you can find and edit your template files in the "Template Design" module of the background.Of course, you can also connect to the server via FTP or SSH if you are more accustomed to using local development tools, download and edit files, and then re-upload them.
  3. Add the “-” symbol:On the left or right of the logical tags (such as{% if ... %}/{% for ... %}/{% endif %}/{% endfor %}) that need to remove blank lines-add the symbol.
  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 Logic Tag Line Occupation' feature provided by AnQi CMS, you can easily optimize the HTML source code after template rendering, making your website not only run efficiently but also have a clear and tidy internal structure.

Common 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, as browsers automatically ignore most consecutive whitespace characters during rendering.This feature mainly optimizes the neatness of the generated HTML source code and the file size, which is helpful for enhancing the professional image of the website and minor performance optimizations (such as reducing network transmission volume).But in very rare cases, if your CSS layout or JavaScript code has a strict dependency on whitespace characters, removing blank lines may have unexpected effects, so it is recommended to perform tests after making changes in critical areas.

2. Do I need to use the "-" symbol to remove blank lines for all logic 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.<head>Use this feature for areas such as navigation menus, lists, etc. In other content areas, if blank lines do not affect performance or aesthetics, they can be retained to enhance the readability of the template.

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 the AnQi CMS.The Anqi CMS improves website access speed by caching 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.