How to avoid blank lines between list items when using AnQiCMS `for` loop?

As an experienced website operations expert, I am well aware of the impact of the neatness of the website front-end code on page loading performance, SEO friendliness, and even the developer's maintenance experience. When using a high-efficiency content management system like AnQiCMS, we often need to dynamically generate content through template language, among whichforLoops are the core of building list pages. However, a common small problem is that:forThe list items output in a loop sometimes produce unnecessary blank lines, which makes the generated HTML code somewhat redundant.

Today, let's delve deep into this issue and reveal how to elegantly solve it in the Anqi CMS template engine, making your list output as smooth and exquisite as meticulously carved.

Why are there blank lines between list items?

First, we need to understand how these blank lines are generated.The template engine of AnQi CMS borrows the excellent design of Django templates and parses the template file line by line when processing.When we are writing in the template{% for ... %}and{% endfor %}When such control tags are, if these tags occupy a line by themselves, or there are line breaks and other whitespace characters between them and the list item elements, the template engine may output these extra whitespace characters along with the final HTML during rendering.

For example, a common one that can cause an empty lineforThe loop code snippet might look like this:

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

In the above code,{% for item in archives %}The tag is in<ul>While it occupies a line by itself,<li>The label is againforInside the loop body,{% endfor %}Similarly, each line is written separately. This way, when rendering, the newline characters, spaces, and other characters before and after the loop tags may be preserved, causing each<li>There are one to two extra blank lines between elements, although it usually does not affect the visual presentation in browsers, but it can make the source code look messy.

The elegant way of AnQi CMS: {-and-}usefulness

幸运的是，the AnQi CMS template engine provides a simple and powerful mechanism to precisely control the output of whitespace characters, that is, by adding in the start or end symbols of the template tags减号(-).

The core skill lies in using{%-and-%}these special marks:

• {%-(Remove leading whitespace):When the tag is immediately adjacent to the left of减号The template engine will remove this tagOn the leftAll whitespace characters, including the one before itself, until a non-whitespace character or the start of the file is encountered.
• -%}Remove whitespace on the right:When the tag is immediately followed by减号The template engine will remove this tagRightAll whitespace characters, including the ones after the current one, until a non-whitespace character or the end of the file is encountered.

By flexibly using these two symbols, we can accurately "trim" away unnecessary blank lines and whitespace.

Deep understanding of whitespace control: theory and practice

To avoidforWe usually combine to use blank lines caused by loops{%-and-%}Let's take the above example to see how to improve:

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

In this improved code:

1. <ul>{%- for item in archives -%}:

   • {%- for: Removed<ul>Tags andforThe whitespace between the start tags.
   • -%}: RemovedforThe content after the start tag (i.e., the first line)<li>to the previous.

2. {%- endfor -%}:

   • {%- endfor: RemovedforThe loop ending tag and the content before it (i.e., the last one).<li>All whitespace characters between it and the next one.
   • -%}: RemovedforThe loop ending tag and</ul>all whitespace characters between the tags.

In this way, the rendered HTML code will become extremely compact, and there will no longer be extra blank lines between list items.

Furthermore, if you wish to{{ item.Title }}The content itself does not have any leading or trailing spaces, and similar controls can be used when outputting variables:

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

Here{{- item.Title -}}Ensureditem.TitleThe output content at the template level is 'no blank pollution'.

This is not just a loop: A wider range of application scenarios

This blank character control mechanism is notforIt is unique to the loop, it applies to all control flow tags and variable output in the AnQi CMS template engine. For example:

• Conditional judgment (if,elif,else):

  
  {%- if condition -%}
      <!-- 内容 -->
  {%- else -%}
      <!-- 其他内容 -->
  {%- endif -%}
  

• Variable assignment (with,set):

  
  {%- with var_name = "value" -%}
      <!-- 内容 -->
  {%- endwith -%}
  

• Include template fragment (include):If you do not want to introduce extra blank lines when you insert a template snippet, you can also use:

  
  {%- include "partial/header.html" -%}
  

By mastering this skill, your Anq CMS template will be more refined and efficient.

**Practice and Precautions

1. Maintain consistency:In a project, try to maintain consistency in the control style of whitespace, which helps in team collaboration and code maintenance.
2. Use moderately:Not all places require the mandatory removal of whitespace. For example, in HTML structures where whitespace is allowed and does not affect the layout<div>Elements between line breaks), you do not have to optimize excessively to avoid reducing the readability of the template. Focus on those that may affect the layout (such asinline-blockElement spacing (or other) may cause code redundancy.
3. Debug output: If you are unsure about the effect of whitespace control, you can render the page and then view the 'Elements' tab in the browser developer tools, or directly view the source code of the page to intuitively understand whether the whitespace has been correctly removed.

Mastering the control techniques of Anqi CMS for whitespace, not only can it make your website code more tidy, but also avoid rendering issues or minor performance overhead caused by excessive whitespace.This is the pursuit of detail by senior operators, and it is also an embodiment of improving the professionalism of the website.

---

Frequently Asked Questions (FAQ)

Q1: Does this whitespace control apply to all AnQi CMS template tags?

A1:Yes,{-and-}This whitespace control mechanism applies to all control flow tags in the AnQi CMS template engine (such asfor,if,macro,withand variable output labels{{ ... }}is valid. It can help you precisely manage the whitespace around the content of labels or variables.

Q2: If my list item is a block-level element (such as<div>Do you need to remove the blank lines between list items?

A2:For most block-level elements (such as<div>,<p>,<h1>This is a sentence in Chinese, and it is followed by a comma. HTML rendering automatically handles whitespace characters, and extra lines usually do not affect its visual layout. However, removing these lines is still a good practice for the following reasons:

1.  **代码整洁：** 生成的HTML源代码会更加紧凑和清晰，便于开发者阅读和调试。
2.  **细微影响：** 在某些特定CSS布局（如 `display: inline-block`, `flex`, `grid`）中，元素之间的空白符有时会产生意料之外的间距，即使是块级元素也可能受到影响。
3.  **性能优化：** 虽然微乎其微，但减少HTML文件中的字符数量可以略微减小文件大小，加快传输速度。

Q3: Use{-and-}Does controlling whitespace affect the execution efficiency of the template?

A3:In most cases, the control of this whitespace on the execution efficiency of the template is negligible, almost negligible.The template engine needs to handle these special symbols during parsing, which will increase a negligible amount of parsing time.However, when compared to other factors such as page loading, database queries, and network transmission, this overhead is so small that you hardly notice any performance difference in actual operation.Therefore, it is well worth using this control character to obtain cleaner HTML code and a better maintenance experience.