In modern website operation, Banner (banner ad) serves as a visual focus, which is crucial for attracting users' attention and conveying core information.Effectively manage and display Banner, especially when it is necessary to bring users a sense of novelty, random display has become a highly sought-after requirement.bannerListThe function of the label, and answer a common question:)bannerListDoes the label support random display of one item from the Banner list?
Unveil the AnQiCMSbannerListLabel: Its core responsibility
First, let's understand the AnQiCMS providedbannerListTags are used for what. According to the design philosophy of AnQiCMS, its template tags are intended to provide powerful and flexible data call capabilities.bannerListThe core function of the tag, as the name implies, is forObtaining the Banner list data under the homepage of the website or a specific group.
When you use{% bannerList banners %}Such syntax, AnQiCMS will extract the corresponding Banner data from the background configuration and encapsulate it into a namedbannersThe array object is provided for the front-end template use. This tag also supports some parameters, such assiteId(Used for multi-site data calls) andtype(Used to retrieve a specific group's Banner). For example, if you create a Banner group named "幻灯" in the background, you can access it by{% bannerList banners with type="幻灯" %}Call all 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, to display these Banners on the frontend, we usually cooperate withforIterate through this array in a loop, output the image, link, and 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 primary design goal of the label itself is to provide a collection of Banner data, which does not have a built-in function to directly 'select one randomly'.
Explore the implementation path of random display
Then, let's go back to our original question:bannerListDoes the tag support random display of one item in the Banner list?
The answer is:bannerListtagsDoes not support directlyRandomly display an item, because it returns a complete list.However, AnQiCMS powerful template engine provides a variety of filters and auxiliary tags, which we can cleverly combine to achieve the need for random display.
The core of realizing this function lies in the template engine provided by AnQiCMS.randomFilterThis filter can randomly select and return an element from a string or array. SincebannerListThe label has provided us with a Banner array, so we can use thisbannersas an arrayrandomThe input of the filter, thus easily realizing the purpose of randomly selecting one of the Banners.
Practice: How to randomly display a Banner
Now, let's see how to implement the random display of banners in AnQiCMS through specific code examples.
First, we need to use it as usualbannerListLabel retrieves all Banner data and stores it in a variable. Then, we use this variable as input,randomThe filter to pick one 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 %}
Through the above code, AnQiCMS will first callbannerListGet all available Banners, then userandomFilter selects a Banner randomly from this set and assigns itrandomBannerto a variable. Finally, we can display it just like we would for a single Banner datarandomBannerThe picture, link, and other information. This method fully utilizes thebannerListdata acquisition capabilities and leverages the flexibility of the template engine to meet customized needs.
Why choose such an implementation method?
One of the design philosophies of AnQiCMS is to provide an 'efficient, customizable, and easy to extend' content management solution.bannerListTags focus on obtaining data lists, leaving the flexibility of data processing and display to the template engine's filters and logical judgments. The benefits of this modular design are:
- Label function is clear:Each label has a clear responsibility,
bannerListIt is only responsible for "collecting data", avoiding the label function from being too bloated. - Template is highly flexible:Operators and developers can use a variety of filters and logical statements (such as
if/for/setas well as various filters) for secondary processing of the data obtained, achieving infinite possibilities. This is much more flexible than built-in all possible display logic in each label. - Performance optimization:If
bannerListThe label itself has a random function, which may increase the complexity of its internal logic. Placing the random logic in the front-end template layer can better utilize the optimization mechanisms of the template engine.
In summary, althoughbannerListThe label does not have a direct "random" parameter, but AnQiCMS template engine provides a "combative" solution. BybannerListObtaining data, and then cooperaterandomThe filter makes random selection, which can elegantly realize the need to display a single Banner randomly, bringing dynamic and fresh user experience to the website.
Common Questions (FAQ)
bannerListIs the label supported to display Banner according to the group?Of course it is supported.bannerListTags providetypeParameters, you can throughtype="你的分组名称"Specify exactly which group's Banner to call. For example:{% bannerList banners with type="最新活动" %}This allows you to display different sets of Banners based on different areas of the website or activity themes.How to ensure that the Banner image displays well on different devices?AnQiCMS provides 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 by the longest side, cropping by the shortest side, etc.). In the template, you can directly call the Banner item's
LogoorThumbfields, they will usually automatically point to optimized image resources. In addition, you can also combinethumbFilter (if the image URL needs additional processing to generate a specific thumbnail size) to ensure image loading speed and display quality. For example: `