AnQiCMS template inforloop.CounterWith whitespace control: refine your list output

As an experienced website operations expert, I know that the flexibility of templates and the neatness of output in a content management system are crucial for the long-term maintenance of the website and search engine optimization (SEO).AnQiCMS with its efficient architecture based on the Go language and support for Django-like template engine syntax, provides us with powerful content display capabilities.Today, let's delve into a seemingly minor but significant skill in the AnQiCMS template that can significantly improve the quality of the template:forloop.CounterThe potential association between whitespace control.

In daily content presentation, we often need to iterate through list data, such as article lists, product lists, or navigation menus.At this time, we may need to add numbers, special styles to each list item, or just make sure the generated HTML structure is compact and without redundancy.forloop.CounterAnd whitespace control ({%-and-%}) is the powerful tool for dealing with these scenarios.

forloop.Counter: Smart counter in the loop

AnQiCMS template inforLoops can not only help us iterate over data sets but also come with a very practical variable:forloop.Counter. It will automatically increment in each loop, providing a serial number starting from 1. It is also complemented byforloop.RevcounterIt provides a countdown starting from the total number of items in the collection.

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 rendering: Display different content or logic according to the loop count.
  • Progress display: Show the current step in some step-by-step tutorials or progress bars.

Blank control: Optimize your HTML structure

However, template engines often introduce extra blank lines or whitespace characters 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.Although modern browsers can handle these extra spaces well, a bloated HTML structure may lead to:

  1. Code readability decreases: Especially for complex templates, additional blank lines make debugging and understanding the source code difficult.
  2. The file size has slightly increased: Although the impact is small, reducing every byte is meaningful for websites that pursue ultimate optimization.
  3. Potential impact on some tools or scriptsIn rare cases, some libraries or parsers that heavily depend on HTML structure and whitespace may be affected.

The AnQiCMS template provides a powerful blank control mechanism to solve this problem. By adding a hyphen in the template tag's{or}afterwards(-We can tell the template engine to remove the whitespace characters generated by this tag:

  • {%- tag %}Remove all whitespace (including newline characters) before this tag:
  • {% tag -%}Remove all whitespace after the tag (including newline characters).
  • {{- variable }}Remove all whitespace before the variable output.
  • {{ variable -}}Remove all whitespace after the variable output.

For example, in most cases, oneforLoops may generate some extra blank 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 tag itself:

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

These concise writing styles can make the final HTML cleaner, for example:

1
2
3

forloop.CounterSynergy with white space control

Now, we willforloop.CounterCombine with whitespace control and imagine 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 with no extra blank lines.

If used simplyforloop.Counterand includes within the loopifJudging or other tags that may produce blank spaces can cause unnecessary blank lines in the final HTML output. 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 ... %}Blank lines may occur before and after the tag, causing each<li>or within the tag<li>Excessive line breaks between tags.

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 %}

Add around the loop label, variable output label and conditional judgment label of{or}Add around the loop label, variable output label and conditional judgment label of-We enforce the template engine to remove the whitespace generated by these tags. This makes the generated HTML source code as compact as possible, each<li>The content inside the tag should be tightly packed, avoiding unnecessary line breaks, thus achieving a finer and more optimized list output.

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

Consideration in practice and **practice

In AnQiCMS template development, masterforloop.CounterThe combination with whitespace control allows us to build more efficient and maintainable templates. Although whitespace control mainly affects the neatness of HTML source code