In the AnQiCMS templateforloop.CounterWith blank control: Refine your list output

As an experienced website operations expert, I know that flexibility in templates and clean output in content management systems are crucial for the long-term maintenance of websites and Search Engine Optimization (SEO).AnQiCMS based on the efficient architecture of Go language and its support for Django template engine syntax, provides us with powerful content display capabilities.forloop.CounterPotential correlation between blank control.

In daily content presentation, we often need to iterate through list data, such as article lists, product lists, or navigation menus.This is when we might need to add numbering, special styles, or just ensure the generated HTML is compact and free of redundancy.forloop.CounterAnd blank control ({%-and-%}) Is the effective tool for these scenarios.

forloop.Counter: Smart counter in the loop

In the AnQiCMS templateforLoops not only help us iterate over data collections, but also come with a very useful variable:forloop.Counter。It will automatically increment with each loop, providing a serial number starting from 1 for the current loop. This is complemented byforloop.RevcounterIt provides a descending count starting from the total number of elements in the set.

For example, when we want to generate a numbered list for a series of articles,forloop.Counterit can be very useful:

{% archiveList archives with type="list" limit="5" %}
<ul>
    {% for item in archives %}
    <li>
        <span>{{ forloop.Counter }}.</span>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
    {% endfor %}
</ul>
{% endarchiveList %}

This counter is very flexible, we can use it to achieve various display effects, such as:

  • Style ControlAdd a special CSS class to the first or last list item, such as:{% if forloop.Counter == 1 %}active{% endif %}.
  • Conditional renderingEnglish translation: Display different content or logic based on the number of cycles.
  • English translation: Progress displayEnglish translation: In some step-by-step tutorials or progress bars, show which step is currently being processed.

Blank control: Optimize your HTML structure

However, template engines often introduce additional blank lines or whitespace characters before or after the tags when parsing tags.This may not be obvious visually, but if we check the page source code, we will find a large number of blank lines.

  1. Decreased readability of source code: Especially for complex templates, additional blank lines make debugging and understanding the source code difficult.
  2. File size slightly increased: Although the impact is small, for websites that strive for extreme optimization, every byte reduction is meaningful.
  3. Potential impact on some tools or scriptsIn extremely rare cases, some highly dependent JavaScript libraries or parsers that rely on HTML structure and whitespace may be affected.

AnQiCMS template provides a powerful blank control mechanism to solve this problem. Through adding a hyphen in the template tag's{or}a hyphen (-），我们可以告诉模板引擎移除该标签产生的空白字符：

  • {%- tag %}：移除标签前的所有空白（包括换行符）。
  • {% tag -%}：Remove all spaces (including newline characters) after removing tags.
  • {{- variable }}：Remove all spaces before variable output.
  • {{ variable -}}：Remove all spaces after variable output.

For example, in most cases, aforLoops may generate some additional empty lines:

正常下
{% for item in archives %}
{{ item.Id }}
{% endfor %}

The generated HTML may look like this:


1

2

3

And after using whitespace control:

紧凑：
{%- for item in archives %}
{{- item.Id }}
{%- endfor %}

Or even more succinctly, only controlling the tags themselves:

不带换行
{% for item in archives -%}
{{ item.Id }}
{%- endfor %}

These two concise writing methods can both make the final HTML cleaner, for example:

1
2
3

forloop.CounterSynergy with white space control

Now, we willforloop.CounterCombine with white space control. Imagine that you are usingforLoop through a list of articles and add a serial number to each article item, while ensuring that the generated HTML source code is clean and tidy without any extra blank lines.

If it is simply usedforloop.CounterAnd the loop inside containsifJudgment or other labels that may produce blank spaces, the final HTML output may appear unnecessary blank lines. For example, if you want to add a special style to even items in a list:

{% archiveList archives with type="list" limit="5" %}
<ul>
    {% for item in archives %}
    <li>
        {{ forloop.Counter }}.
        <a href="{{ item.Link }}">{{ item.Title }}</a>
        {% if forloop.Counter % 2 == 0 %}
            <span class="even-item">（偶数项）</span>
        {% endif %}
    </li>
    {% endfor %}
</ul>
{% endarchiveList %}

This code is in{% if ... %}tags may produce blank lines before<li>or after the tags<li>resulting in extra newline spaces between tags.

In order to solve this problem, we can cleverly combine whitespace control:

{% archiveList archives with type="list" limit="5" %}
<ul>
    {%- for item in archives -%}
    <li>
        {{- forloop.Counter -}}.
        <a href="{{- item.Link -}}">{{- item.Title -}}</a>{%-
        if forloop.Counter % 2 == 0 -%}
            <span class="even-item">（偶数项）</span>{%-
        endif -%}
    </li>
    {%- endfor -%}
</ul>
{% endarchiveList %}

By adding around loop labels, variable output labels, and conditional judgment labels,{or}surrounding-we enforce the template engine to remove the whitespace generated by these tags. This makes the generated HTML source code as compact as possible, with each<li>The content within the label will be tightly packed, avoiding unnecessary line breaks, thus achieving a finer and more optimized list output.

This fine control makes the rendered HTML not only logically clear but also maintains an extremely high level of tidiness in the source code, which is undoubtedly a great boon for the maintenance and debugging of large projects.

Considerations in practice and **practice

Mastering template development in AnQiCMSforloop.CounterThe combination with whitespace control allows us to build more efficient and easier-to-maintain templates. Although whitespace control mainly affects the neatness of the HTML source code