How to avoid extra blank lines when template logical tags (such as if, for) are rendered on the page?

When developing templates in AnQiCMS, we often find that even though the template code itself looks neat, the final rendered HTML page may contain some unexpected blank lines.These blank lines do not affect the functionality of the page, but they may make the HTML source code look less neat, and in some extreme optimization scenarios, they may even cause a slight increase in file size.For users who pursue code aesthetics and concise output, how to effectively avoid these unnecessary blank lines is a topic worth exploring.

These extra blank lines are mostly from the logic tags in the template, especially{% if %}condition judgment and{% for %}A loop structure. When these tags occupy a line independently, even if they themselves do not produce visible content, they may leave traces of line breaks during rendering. For example, a simpleforloop, if the list is empty,{% for ... %}and{% empty %}/{% endfor %}the position occupied by these lines of tags may result in multiple blank lines in the final HTML. Similarly, a tag that does not meet the condition,ifThe block of text, it will also cause a blank line due to the existence of the tag itself.

Fortunately, AnQiCMS provides a simple and effective mechanism to eliminate these unnecessary blank lines, which is to use hyphens within template tags(-)Perform whitespace character control.This little symbol, placed at the beginning or end of a template tag, can precisely tell the rendering engine whether to remove the whitespace characters around the tag, including newline characters.

In particular:

1. {%- tag %}When the hyphen is placed on the left side of the tag (between the percentage sign and the tag name), it will remove the tagBeforeAll whitespace characters, including the newline character from the previous line.
2. {% tag -%}When the hyphen is placed on the right side of the tag (between the tag name and the percent sign), it will remove the tagAfter thatAll whitespace characters, including the newline character at the end of the line.

By flexibly combining these two usages, we can achieve precise control over blank lines.

Let's see some actual examples:

For conditional judgment tags (if,elif,else,endif): If you haveifJudgment statements and their content should be on separate lines, and you do not want to leave any blank lines when rendering the content, you can modify it like this:

{%- if some_condition -%}
    <p>这是一个满足条件的内容。</p>
{%- elif another_condition -%}
    <p>这是另一个满足条件的内容。</p>
{%- else -%}
    <p>没有任何条件满足。</p>
{%- endif -%}

In this example,{%- if ... -%}It will remove all leading whitespace (including new lines),{%- elif ... -%}It will remove whitespace before and after it,{%- else -%}Similarly, and{%- endif -%}It will remove all the preceding whitespace. So, whether any branch is executed or none is executed, the blank lines generated by the label itself will be removed.

For loop traversal tags (for,empty,endfor):forLoops are the main culprits for producing extra blank lines, especially when the loop list is empty or when no additional line breaks are needed after each item within the loop. By using hyphens, we can make the loop output more compact:

<ul>
{%- for item in archives -%}
    <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{%- empty -%}
    <li>暂无相关内容。</li>
{%- endfor -%}
</ul>

here,{%- for ... -%}It will remove the blank before it,{%- empty -%}and{%- endfor -%}Similarly. Even ifarchivesThe list is empty, or the loop generates multiple<li>items, it will not produce extra blank lines inside the<ul>tags. If<li>Label internal variable{{ item.Title }}Don't want to have an empty line either, you can further refine the variable output:<li><a href="{{ item.Link }}">{{- item.Title -}}</a></li>.

Master this little trick, and your AnQiCMS template will become more streamlined, and the output HTML will also meet higher standards, whether from the perspective of visual neatness or from the perspective of subtle performance optimization, it is a good habit worth cultivating.

Frequently Asked Questions (FAQ)

Q1: Removing blank lines will it affect the rendering speed of the template?A: Usually, such optimization has a negligible impact on rendering speed, almost negligible.Because the template engine handles these hyphens by performing more refined control over whitespace characters during the parsing phase and does not introduce complex calculations.Its main value lies in improving the neatness and readability of generated HTML code.

Q2: Should I use hyphens on all template tags?A: Do not overuse.The hyphen is powerful in function, but overuse may reduce the readability of the template code itself, making the code look too tight and difficult to maintain.Should be selectively applied to those that actually generate extra blank lines, or have strict requirements for page output format.For example, when you need to generate compact JSON or text output in a specific format, hyphens can be very useful.

Q3: This method is only suitable forifandforAm I supposed to use the label?A: This blank character control mechanism (i.e., using before and after tags) is applicable to all logical tags in the AnQiCMS template, including but not limited to-)if/for/with/blockAs long as possible to produce blank line tags, you can try to use hyphens to control.