AnQiCMS template refinement: When should we skillfully use it-How to remove the blank lines occupied by logical tag symbols?

The AnQiCMS template engine adopts a syntax similar to Django, which makes it very easy for developers to get started with template creation. We frequently use it during content display.{% if ... %}/{% for ... %}Logical tags to control conditional rendering or loop output.However, these logical tags are in the template file, even if they do not output any visible content, the lines they occupy themselves are usually left as blank lines in the final generated HTML source code.In most cases, these additional blank lines do not have a significant impact on the functionality or visual presentation of a website, but when striving for extreme optimization, avoiding potential frontend issues, and improving code readability, actively managing these blank lines becomes particularly important.

The impact of logical tags and blank line effects: A detail not to be ignored

Imagine when your AnQiCMS template is nested with multiple layersifJudgment orforLoops, each logical tag may introduce a new line break at its declaration and termination. These seemingly harmless line breaks can accumulate and lead to:

  1. HTML source code redundancy:Although a single blank line has a negligible impact on file size, under large-scale websites or high-concurrency scenarios, the cumulative redundant characters can increase transmission bandwidth and extend the first content paint (FCP) time, even if it is just a little bit.For pages that pursue millisecond-level optimization, this is still a detail worth paying attention to.
  2. Potential frontend layout issues:In certain specific CSS layouts (such asdisplay: inline-blockAmong certain edge cases in the layout of elements, Flexbox or Grid, the newline and space characters in the HTML source code are parsed by the browser as actual whitespace, which may lead to unintended small gaps or layout offsets.Although it is not common, it can be very difficult to troubleshoot once it happens.
  3. The neatness of structured data output such as JSON-LD:AnQiCMS supports JSON-LD to enhance SEO effectiveness.When using templates to dynamically generate JSON-LD scripts, the JSON format is sensitive to whitespace.Even though modern parsers usually handle it, a clean and redundant-free JSON output is not only professional but also reduces the risk of potential parsing errors.tag-jsonLd.mdThe document mentions that we can customize the JSON-LD content, at this point we need to pay more attention to the output neatness.
  4. Readability and maintenance of source code:Although in the development stage, the independent line of logical tags helps the readability of the template, but too many blank lines in the final output HTML may make it less intuitive to check elements, affecting the front-end debugging experience.

AnQiCMS template engine fully considers this requirement and provides an elegant solution: by adding a hyphen in the start or end symbol of logical tags-), that is{%-or-%}Remove spaces accurately.

AnQiCMS's solution:{%-and-%}Syntax

Based ontag-remove.mdDocument description, this feature can effectively remove blank lines caused by logical tags.

  • {%-:When the hyphen is on the left side of the label, it will remove the labelBeforeAll whitespace characters, including newline.
  • -%}:When the hyphen is on the right side of the label, it will remove the labelAfter thatAll whitespace characters, including newline.

This means that by cleverly combining these two syntaxes, we can control the blank lines of the template output at the pixel level. For example, if we have aforLoop, we hope its output is compact and does not introduce additional line breaks:

{# 正常情况下，这里可能会有很多空行 #}
{% for item in archives %}
    <li class="item">
        {{ item.Id }}
    </li>
{% endfor %}

{# 使用移除空白行符号后，输出将更加紧凑 #}
{%- for item in archives -%}
    <li class="item">
        {{- item.Id -}} {# 变量输出也可以使用 - 符号来移除其前后的空白 #}
    </li>
{%- endfor -%}

In the above code,{%- for ... -%}CleanedforAnd all white space around the loop tag itself, including line breaks,{{- item.Id -}}Further ensures that the variable output content before and after the blank spaces are removed, making the final HTML output extremely concise.

When should you consider removing: Practical scenarios and decision guidelines

Mastering this grammar, the key is to understand when and where to apply it to maximize its value, avoiding over-optimization which may reduce the readability of the template.

  1. Extremely optimized landing page or single-page application (SPA) snippet:For pages that require extremely high loading speed and are sensitive to user experience, such as ad landing pages and some e-commerce product detail pages, every reduced kilobyte can bring actual benefits.In this scenario, carefully reviewing the template output and removing unnecessary blank lines is a manifestation of refining to the utmost.
  2. Generate output content sensitive to whitespace:The JSON-LD structured data mentioned earlier is typical. In addition, if the AnQiCMS template is used to generate XML site maps, CSV data files, or other non-HTML text formats, and these formats have strict requirements for line breaks or spaces, use{%-and-%}Can ensure the accuracy and consistency of the output.
  3. Solve specific frontend layout issues:When you find two elements that should be closely connecteddisplay: inline-blockbetween elements, or when usingfloatWhen laying out, there appeared inexplicable small spacing, and after excluding CSS reasons, it should be considered whether it is whitespace characters in the HTML source code that are causing trouble.Try using the dash symbol at the relevant logical tag, it often solves the problem.
  4. Generate inline (inline) or script (script) tag content:Sometimes, we may want to<style>or<script>Dynamically generate CSS or JavaScript code within the tag and ensure that the code is as compact as possible.In this case, removing the blank lines introduced by logical tags helps to maintain the neatness of inline code, reducing potential issues when embedded in external code.
  5. As a practice of “code cleanliness”:For developers or teams with a 'clean code obsession', maintaining the extreme cleanliness of the HTML source code is in itself a pursuit. It makes the final output easier to review manually, even though automated tools can handle formatting, the efficiency and experience of manual review are still better