What fields are included in the Banner data obtained from the `bannerList` tag (such as `Id`, `Title`, `Link`, etc.)?

As an experienced website operation expert, I am happy to give you a detailed interpretation of AnQiCMS (AnQiCMS) asbannerListThe Banner data fields that tags can obtain and their application strategies.In AnQiCMS such an efficient and flexible content management system, the Banner serves as the visual focus of the website, and the effective call of its data directly affects the overall presentation and user experience of the website.

MasterbannerListTags: website "front door" data refinement

In AnQiCMS,bannerListThe tag is a special template tag used to retrieve and display website Banner data.It can help us easily retrieve various carousel images or static banners configured in the backend and flexibly layout them on the front-end page.For website operations, this means you can quickly update and adjust the visual promotion of the website based on festivals, events, or product promotion needs.

bannerListThe basic usage of the label is very intuitive. You will usually call it in the form of{% bannerList 变量名称 %}, for example{% bannerList banners %}. In this way, all 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 Banner data fields

When we go throughbannerListThe tag gets the Banner data, and these data are organized in the form of a list (or an array). Each item 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 canitem.字段名to access these data:

  1. Id(Unique identifier for Banner)Each Banner has a uniqueId。This is a numeric identifier that is unique, just like each ID number. Although you may not often display it directly on the front-end page,IdWhen performing more complex logical judgments, referencing specific Banner data, or interacting with the backend, it can provide precise positioning.

  2. Logo(Banner image address)This field stores the complete URL address of the Banner image, which is the core visual content of the Banner. You will frequently refer to it in the properties.<img>TagssrcFor example,{{item.Logo}}Display the exquisite Banner image on the website and capture the visitor's attention first.

  3. Link(Click to jump to link) LinkThe field carries the interactive function of the Banner.It stores the target URL address where the user will be redirected after clicking the Banner.<a>Tagshrefattribute, such as{{item.Link}}It can make your Banner come to life, becoming an important part of the user journey.

  4. Description(Banner description)This text field is usually used to store a brief description or supplementary information for a Banner. It may not be asTitleSo prominent, but in some designs, it can be used as additional description of the image, or when there is noAltText as an alternative description for an image. An appropriate description can also provide more context for the image content in search engine optimization (SEO).

  5. Alt(Alternative text for image) AltThe field is crucial for the website's SEO and user experience. It provides text that describes the image content, which is displayed when the image cannot be loaded due to network issues.AltText will replace the image display. At the same time, the screen reader will read out.AltText, helps visually impaired users understand the image content, thereby improving the accessibility of the website. It should be set correctly.alt="{{item.Alt}}"It is a **practical** website development.

  6. Title(Banner title)Although in the AnQiCMS documentation,TitleThe field is not always explicitly listed in the "Available Fields" list, but is provided in the template examples (such as<h5>{{item.Title}}</h5>In it, we can clearly see its application.This field is usually used to display the main title of the Banner or an eye-catching copy. It is an important piece of text content that attracts user clicks and conveys core information.

bannerListthe flexible application and parameter parsing

in addition to the aforementioned core data fields,bannerListLabels also provide some parameters to help you finely control the Banner data you get:

  • type(Group name)This isbannerListOne of the most commonly used parameters.AnQiCMS backend allows you to group manage Banners, for example, you can create different groups such as "Home Carouseltype="分组名"(For example}]}{% bannerList banners with type="首页轮播" %}You can only get the Banner data under a specific group by doing so.This greatly improves the organization and reusability of Banner content, allowing you to display different sets of Banners for different regions or scenarios.typeTags will usually default to the "default" group Banner.

  • siteId(Site ID)For users who have deployed the AnQiCMS multi-site feature,siteId参数是一个强大的工具。它允许您跨站点调用Banner数据。通过指定siteId="特定站点ID"

在模板中实践bannerList

To display these rich Banner data on your website, you usually combine a template engine withforin a loop to iterate overbannersVariables. Here is a typical code example that demonstrates 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 usedforloop.Counterto determine if the current is the first Banner in the loop, so as to add itactiveCategories, which is very common in implementing the initial activation state of the carousel. In addition, it also adds support forDescriptionField condition judgment display, as well as the judgment of whether the entire Banner list is empty, to provide more friendly user prompts.

Concluding remarks

bannerList标签是AnQiCMS内容运营中不可或缺的工具。通过深入理解其可用的数据字段（Id,Logo,Link,Description,Alt,Title）以及灵活的参数（type,siteId），You can accurately control the display content and style of the website Banner.This not only enhances the visual appeal of the website, but also effectively conveys brand information and guides user behavior, ultimately achieving the operational goals of the website.Master these skills, your AnQiCMS website will come alive with even greater vitality and become a more attractive content platform in the eyes of users.

Common Questions (FAQ)

  1. Q: 为什么我使用bannerListAfter the tag, is there no Banner displayed on the page?A: This usually has several common reasons: First, please check the Banner management module of AnQiCMS background to confirm whether you have uploaded and enabled the Banner image. Second, if you are inbannerListLabel specifiedtypeParameters (e.g.,)with type="推广轮播"Make sure that the name matches the background Banner group name exactly, including case sensitivity. Finally, check the template code in{% for item in banners %}Is this loop structure correct, ensuring that the data is traversed correctly.

2