Does the `bannerList` tag support random display of an item from the Banner list?

In modern website operations, Banner (banner ad) as a visual focus, is crucial for attracting user attention and conveying core information.Elegantly manage and display banners, especially when it is necessary to bring users a sense of novelty, random display has become a highly sought-after need.Today, as an experienced website operation expert, I will take everyone deep into the exploration of AnQiCMSbannerListThe function of the tag, and answer a common question: bannerListDoes the tag support random display of an item from the Banner list?

Unveiling AnQiCMS'sbannerListLabel: Its core responsibility

First, let's understand what AnQiCMS providesbannerListWhat are tags used for? According to the design philosophy of AnQiCMS, its template tags are designed to provide powerful and flexible data calling capabilities.bannerListThe core function of the tag, as the name implies, is used forGet the Banner list data under the home page of the website or a specific group.

When you use{% bannerList banners %}When this syntax is used, AnQiCMS will extract the corresponding Banner data from the background configuration and encapsulate it into an object namedbannersThe array object is used for front-end template. This tag also supports some parameters, such assiteId(used for multi-site data calls) andtype(Used to retrieve the Banner of a specific group). For example, if you create a Banner group named "幻灯" in the background, you can access it through{% bannerList banners with type="幻灯" %}Call all the Banners under this group accurately.

It is important that the document clearly states.bannersIs an "array object", which means it returns a collection of Banners, not a single Banner. Therefore, in order to display these Banners on the front end, we usually cooperate withforLoop to traverse this array, output the picture, link, title information of each Banner one by one, like this:

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

From here we can see,bannerListThe main design goal of the label itself is to provide a Banner data collection, and it does not have a built-in feature to directly select an item randomly.

Explore the implementation path of random display

Then, let's go back to our original question:bannerListDoes the tag support random display of an item in the Banner list?

The answer is:bannerListTagDoes not support directlyRandomly display an item because it returns a complete list.However, AnQiCMS's powerful template engine provides a variety of filters and auxiliary tags, and we can cleverly combine these features to achieve the need for random display.

The core of implementing this feature lies in the AnQiCMS template engine providedrandomFilter. This filter can randomly select and return an element from a string or array. SincebannerListThe tag has provided us with a Banner array, we can use thisbannersarray asrandomThe input of the filter, thus easily achieving the purpose of randomly selecting one Banner.

Practice: How to randomly display a Banner

Now, let's look at how to implement the random display of banners in AnQiCMS through specific code examples.

Firstly, we need to use as usual.bannerListLabel retrieves all Banner data and stores it in a variable. Then, we use this variable as input, applyingrandomThe filter is used to select a random Banner.

{% bannerList allBanners %} {# 首先，获取所有Banner数据并存储到allBanners变量中 #}

{% if allBanners %} {# 确保allBanners不为空，避免运行时错误 #}
    {% set randomBanner = allBanners|random %} {# 使用random过滤器从allBanners中随机选择一个Banner #}

    {# 现在，我们可以像访问普通Banner item一样，访问randomBanner的各个属性 #}
    <div class="hero-banner">
        <a href="{{ randomBanner.Link }}" target="_blank" title="{{ randomBanner.Alt }}">
            <img src="{{ randomBanner.Logo }}" alt="{{ randomBanner.Alt }}" />
            <h4>{{ randomBanner.Title }}</h4>
            <p>{{ randomBanner.Description }}</p>
        </a>
    </div>
{% else %}
    <p>暂无Banner可显示。</p>
{% endif %}

By the above code, AnQiCMS will first callbannerListGet all available Banners and then userandomThe filter randomly selects a Banner from this set and assigns it torandomBannerthe variable. Finally, we can display it like we would for a single Banner data.randomBannerThe image, link, and other information was provided. This method fully utilizesbannerListthe data acquisition capabilities, and also takes advantage of the flexibility of the template engine to achieve customized requirements.

Why choose such an implementation method?

One of the design philosophies of AnQiCMS is to provide a content management solution that is 'efficient, customizable, and easily scalable'.bannerListLabels focus on obtaining data lists, leaving the flexibility of data processing and display to the filters and logical judgments of the template engine. The benefits of this modular design include:

1. Label function is clear:Each label has a clear responsibility,bannerListResponsible only for “data collection”, avoiding the label function from being too bloated.
2. Template is highly flexible:Operators and developers can utilize rich filters and logical statements (such asif/for/setAnd various filters) to process the obtained data twice, realizing infinite possibilities. This is more flexible than embedding all possible display logic in each tag.
3. Performance optimization:IfbannerListThe tag itself has a random function, which may increase the complexity of its internal logic, and placing the random logic in the front-end template layer can better utilize the optimization mechanism of the template engine.

In conclusion, althoughbannerListThere is no direct "random" parameter for the label, but the AnQiCMS template engine provides a "combo" solution. BybannerListgathering data, then coordinatingrandomThe filter randomly selects, thus elegantly achieving the need to randomly display a single Banner, bringing dynamic and fresh user experience to the website.

Frequently Asked Questions (FAQ)

1. bannerListDoes the tag support displaying a Banner based on a group?Of course, it does.bannerListTags providedtypeParameters, you can go throughtype="你的分组名称"Specify precisely which group's Banner you want to call. For example:{% bannerList banners with type="最新活动" %}This allows you to display different banner sets based on different areas or event themes.

2. How to ensure that the Banner image displays well on different devices?AnQiCMS offers powerful image processing features in the content settings, such as enabling Webp image format conversion, automatically compressing large images, and various thumbnail processing methods (such as proportional scaling based on the longest edge, trimming based on the shortest edge, etc.). In the template, you can directly call the Banner item'sLogoorThumbfields, they usually automatically point to optimized image resources. In addition, you can also combinethumbThe filter (if the image URL needs additional processing to generate a specific thumbnail size) to ensure image loading speed and display quality.For example: `<img src=“{{ item.Logo