The `bannerList` tag fetches which available fields of Banner data (such as `Id`, `Title`, `Link`, etc.)?

As an experienced website operations expert, I am happy to give you a detailed interpretation of AnQiCMS (AnQiCMS) inbannerListThe label can obtain the Banner data field and its application strategy.In AnQiCMS such an efficient and flexible content management system, the Banner serves as the visual focus of the website, and the effective calling of its data directly affects the overall presentation and user experience of the website.

MasterbannerListLabel: Fine-grained data call of the website "front page"

In AnQiCMS,bannerListThe tag is specifically used to retrieve and display website Banner data template tags.It can help us easily retrieve various carousel images or static banners configured on the backend and flexibly layout them on the front-end page.For website operation, this means you can quickly update and adjust the visual promotion of the website according to holiday, event, or product promotion needs.

bannerListThe basic usage of tags is very intuitive. You usually call it in the form of{% bannerList 变量名称 %}for example{% bannerList banners %}. In this way, all the Banner data that meets the conditions will be collected and assigned tobannersThis variable, so that you can iterate and display it in the template.

In-depth analysis of the Banner data field

When we go throughbannerListAfter the label gets the Banner data, this data is organized in the form of a list (or an array). Each one in the listitemAll represent an independent Banner, and internally encapsulate multiple practical fields. These fields are the key to our front-end display and logical processing. You can accessitem.字段名The way to access this data:

1. Id(Unique Banner Identifier)Each Banner has a uniqueId. This is a numeric identifier, like each ID number. Although you may not often display it directly on the front-end page, butIdWhen it is necessary to make more complex logical judgments, specific Banner data references, or interactions with the backend, it can provide accurate positioning.

2. Logo(Banner image address)This field stores the complete URL address of the Banner image, which is the most core visual content of the Banner. You will frequently refer to it in<img>label'ssrcproperties, such as{{item.Logo}}Present a beautiful Banner image on the website and capture the visitor's attention immediately.

3. Link(Click to jump to the link) LinkThe field carries the interactive function of the Banner. It stores the target URL address to which the user will be redirected after clicking the Banner.Whether it is to guide users to the product detail page, event topic page, or external cooperative link, it is applied to<a>label'shrefproperties such as{{item.Link}}Can make your Banner come to life, becoming an important part of the user journey.

4. Description(Banner description)This is a text field, usually used to store a brief description or supplementary information for the Banner. It may not be likeTitleSo prominent, but in some designs, it can be used as additional description for an image, or withoutAltText can serve as an alternative description for images. In terms of Search Engine Optimization (SEO), an appropriate description can also provide more context for the image content.

5. Alt(Image alternative text) AltThe field is crucial for the website's SEO and user experience. It provides text that describes the image content, in case the image fails to load due to network issues.AltText will display instead of an image. At the same time, a screen reader will read aloud.AltText helps visually impaired users understand the image content, thereby improving the website's accessibility. It should be set correctly.alt="{{item.Alt}}"Is website development **practice.

6. Title(Banner title)Although in the AnQiCMS documentation,TitleFields are not always explicitly listed in the “Available Fields” list, but from the provided template examples (such as<h5>{{item.Title}}</h5>We can clearly see its application. This field is usually used to display the main title of the Banner or eye-catching copy, which is important text content to attract users to click and convey core information.

bannerListthe flexible use with parameter parsing

in addition to the above core data fields,bannerListThe tag also provides some parameters to help you finely control the Banner data obtained:

• type(Group name)This isbannerListOne of the most commonly used parameters. AnQiCMS background allows you to manage Banner groups, for example, you can create different groups such as 'Home Carousel', 'Product Promotion', 'Sidebar Advertisement', etc.Specify in the tagtype="分组名"(For example){% bannerList banners with type="首页轮播" %}You can only get the Banner data under the specific group.This greatly improves the organization and reusability of Banner content, allowing you to display different Banner collections for different areas or scenarios on the website.If not specifiedtype, the tag usually defaults to the Banner under the "default" group.

• siteId(Site ID)For users who have deployed the AnQiCMS multi-site function,siteIdA parameter is a powerful tool. It allows you to call Banner data across sites. By specifyingsiteId="特定站点ID"You can obtain Banners from other sites, which is very useful for achieving content sharing or centralized management between multiple sites.However, for most single-site websites, this parameter is usually not required to be filled in manually.

Practice in the templatebannerList

To display these rich Banner data on your website, you usually combine with template engines'forto loop throughbannersVariable. The following is a typical code example that shows how to retrieve and display the Banner and its key information:

{# 假设我们获取默认分组下的Banner列表 #}
{% bannerList banners %}
    {% if banners %} {# 判断是否有Banner数据，避免空循环 #}
    <div class="banner-carousel">
        {% for item in banners %}
        <a class="banner-item {% if forloop.Counter == 1 %}active{% endif %}" href="{{item.Link}}" target="_blank" title="{{item.Title}}">
            <img src="{{item.Logo}}" alt="{{item.Alt}}" class="lazyload" data-src="{{item.Logo}}" />
            <div class="banner-info">
                <h5>{{item.Title}}</h5>
                {% if item.Description %}
                    <p>{{item.Description}}</p>
                {% endif %}
            </div>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <p>抱歉，暂无Banner图片可显示。</p>
    {% endif %}
{% endbannerList %}

In the above code, we not only usedLink/Logo/AltandTitleField, also utilizedforloop.CounterTo determine if the current is the first Banner in the loop, so as to add it foractiveThis is very common when implementing the initial active state of a carousel. In addition, it also adds the ability toDescriptionThe condition judgment display and the judgment of whether the entire Banner list is empty to provide a more friendly user prompt.

Conclusion

bannerListTags are an indispensable tool in AnQiCMS content operation. By deeply understanding its available data fields (Id,Logo,Link,Description,Alt,Title) and flexible parameters (type,siteId），You can accurately control the display content and style of the website Banner.This can not only enhance the visual appeal of the website, but also effectively convey brand information, guide user behavior, and ultimately achieve the operational goals of the website.Master these skills, your AnQiCMS website will焕发出更强的生命力，become more vibrant, and become a more attractive content platform in the eyes of users.

Frequently Asked Questions (FAQ)

1. Q: Why do I usebannerListAfter the label, there is no Banner displayed on the page?A: This usually has several common reasons: First, please check the Banner management module of AnQiCMS background, confirm whether you have uploaded and enabled the Banner image. Second, if you arebannerListThe label specifiedtypeParameters (for examplewith type="推广轮播"Make sure the name matches the background Banner group name exactly, including case. Finally, check the template code in{% for item in banners %}Does this loop structure correct, ensure data is traversed correctly.

2