How to use the `forloop.Counter` variable in the AnQiCMS navigation list tag in multi-level navigation?

As an experienced website operations expert, I am well aware of the importance of an efficient and flexible CMS system for content management and user experience.AnQiCMS (AnQiCMS) provides powerful support for content creators and operators with its high-performance architecture based on the Go language and Django-style template engine.In AnQiCMS template development, flexibly using various tags is the key to improving website interactivity and maintainability.forloop.CounterHow to play a unique role in the multi-level navigation list of AnQiCMS.

In the AnQiCMS navigation list tag.forloop.CounterVariable: Fine-grained control of multi-level navigation.

In AnQiCMS, the construction of website navigation usually takes advantage of strongnavListThe label allows us to dynamically retrieve and render out hierarchical navigation menus, which is crucial for maintaining a clear and easy-to-navigate website.navListLabel collaborationforThe loop can easily traverse the top-level navigation items and their nested sub-navigation lists. During this traversal,forloop.CounterVariables are like a Swiss Army knife in our hands, helping us to have more fine-grained control and customization over navigation items.

Understanding the navigation structure of AnQiCMS'sforloop.Counter

First, wenavListLabel to get navigation data, usually assigned to a variable, for examplenavs. ThisnavsThe variable is an array object containing all top-level navigation items. Each navigation item may also contain a name calledNavListThe sub-navigation list, thus forming a multi-level navigation structure.

When we use in the template{% for item in navs %}When such a loop statement is used to traverse the navigation items, the AnQiCMS template engine will automatically provide a special variable namedforloopfor the current loop.forloopVariables embedded multiple useful properties, among whichforloop.Counteris the current loop iteration count, starting from 1. At the same time, there is also aforloop.RevcounterIt indicates the remaining number of iterations from the current item. These counters are especially convenient when dealing with the start, end, or specific elements of a list.

It is worth emphasizing that every timeforEach loop will have its own context. This means that when you are using a nestedforlooploop (for example, iterating through secondary navigation items)forin a loop.forloop.CounterIt will start counting from 1 again, instead of continuing the count from the outer loop. This feature is the basis for our implementation of multi-level navigation fine-grained control.

Usefully in multi-level navigationforloop.Counter

In the operation of actual websites, we often encounter such needs: to add numbering to the navigation menu, to apply special styles to the first or last menu item, or to generate a unique ID for menu items of a specific level.forloop.CounterVariables can perfectly handle these scenarios.

Imagine that we want to add clear numbering to the main navigation menu of the website and its sub-menus, such as "1. Home", "2. About Us", "2.1. Company Profile", "2.2. Development History", and so on.At this time, we can get the top-level navigation items in the outer loop.forloop.CounterAnd get the second-level navigation items in the inner loop.forloop.CounterAnd then combine them cleverly.

The following is a specific code snippet demonstrating how to implement this feature in the AnQiCMS template:

{% navList navs %}
<ul>
    {%- for item in navs %}
        {# 捕获外层循环的当前计数，以便在内层循环中使用 #}
        {% set parent_counter = forloop.Counter %}
        <li class="nav-item-{{ parent_counter }} {% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{ parent_counter }}. {{ item.Title }}</a>
            {%- if item.NavList %}
            <dl class="sub-nav">
                {%- for inner in item.NavList %}
                    <dd class="sub-nav-item-{{ parent_counter }}-{{ forloop.Counter }} {% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{ parent_counter }}.{{ forloop.Counter }}. {{ inner.Title }}</a>
                    </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

In this code, we first use{% set parent_counter = forloop.Counter %}Assign the current iteration count of the outer loop (i.e., the top-level navigation) to a temporary variable namedparent_counter. Thissettag (orwithTags allow us to define a variable within the current scope and this variable can be accessed within the nested loop inside it.

Then, in the display of the top-level navigation items, we used it directly{{ parent_counter }}to display the main number. When entering the secondary navigationforloop, we used it again{{ forloop.Counter }}. Since this is another independentforThe loop, itsforloop.Counterwill start counting from 1 again, perfectly providing us with secondary numbering. By combining{{ parent_counter }}.{{ forloop.Counter }}We can generate clear multi-level numbering, such as '1.1', '1.2', and so on.

In addition to the numbering,forloop.Counterit can also help us achieve more creativity and functions in navigation:

• Dynamic CSS class name: Generate a unique CSS class for each navigation item, for examplenav-item-1/sub-nav-item-2-1It facilitates front-end developers to customize the styles of specific or specific navigation items without manually modifying the HTML structure.
• Special treatment for first and last items: By judgingforloop.Counter == 1Identify the first element or utilizeforloop.Revcounter == 1(orforloop.Last