How to use `for` loop to iterate over multiple home page Banner items obtained from `bannerList`?

In modern web design, the home page banner is undoubtedly an important window for attracting users' attention and conveying core information.A dynamic and beautiful Banner area can greatly enhance the visual appeal and user experience of a website.As an experienced website operation expert, I deeply understand the strong and flexible content management of AnQiCMS (AnQi CMS).Today, let's delve into a very practical skill in the AnQiCMS template: how to cleverly useforLoop tag, cooperate withbannerListLabel, accurately obtain and display multiple home page Banner items of yours.

Understand the Banner mechanism of AnQiCMS withbannerListTag

In AnQiCMS, the management of the home page Banner is usually done in the background, where you can upload images, set links, add description text, and even group Banners according to different scenarios.How do you present these data saved on the front-end template? At this point,bannerListthe label comes into play.

bannerListThe tag is a dedicated tag provided by AnQiCMS, which is responsible for fetching all or specific group Banner data from your website backend. When you use it in the template,{% bannerList banners %}This syntax, AnQiCMS will organize the obtained Banner information into a convenient handlingarray or list objectAssign it to the variable you specify (for example, here)bannersEach element in this array represents an independent Banner item.

Core operation: useforLoop through the Banner item

SincebannerListThe tag provides us with a collection of Banner data, so next, we can make use of the powerful template engine of AnQiCMS,forLoop tags, visit and display these Banner items one by one.

forThe basic structure of the loop is:{% for item in collection %}...{% endfor %}. Here,collectionthat isbannerListThe returned Banner collection (i.e., as mentioned above in thebannersvariable), anditemIt represents the single Banner data being processed in each loop.

Let's look at a basic example to show how to iterate and output the key information of each Banner item:

{% bannerList banners %}
    {% for item in banners %}
        <a href="{{ item.Link }}" target="_blank">
            <img src="{{ item.Logo }}" alt="{{ item.Alt }}" />
            <h5>{{ item.Description }}</h5>
        </a>
    {% endfor %}
{% endbannerList %}

In this code block:

• {% bannerList banners %}Firstly, we callbannerListLabel, assign all the Banner data obtained to a variable namedbanners.
• {% for item in banners %}: Then, we start to traversebannersthis collection.