In website operation, the homepage banner acts as the 'face' of the website, and its visual effect and guiding role are crucial.A well-designed and tastefully presented Banner can not only attract visitors' attention but also effectively convey the core information of the website, guiding users to the next step.For friends using AnQiCMS, how to flexibly customize the display content and links of the home page banner is a key step to enhance the website user experience and marketing effect.
AnQiCMS provides great flexibility in template design, allowing us to easily control the display of the homepage banner.This is mainly due to its powerful template tag system.Next, we will explore how to customize the display content and link of the homepage Banner in AnQiCMS templates.
Understanding the Banner management mechanism in AnQiCMS
In AnQiCMS, the management of the home page banner is usually carried out in a specific module of the backend.Here, we can upload Banner images, set the Banner's title, description, link address, and alternative text (Alt), which together constitute the data required for the Banner to be displayed on the front end.
An extremely practical feature is that AnQiCMS allows for 'grouping' of Banners.This means you can create multiple Banner collections, such as 'Homepage Carousel', 'Sidebar Ad Slots', and so on.Each group can include a set of independent Banner images and settings, greatly enhancing the flexibility of content operation.When configuring in the background, we need to pay attention to filling in clear titles, descriptions, and accurate links for each Banner entry, and choosing its associated group.
Call the homepage Banner list in the template
In the AnQiCMS template files, we can usebannerListThis tag calls the Banner list configured by the backend. This tag is very intuitive and it returns an array of Banner entries, which we can loop through in the template.
An example call is as follows:
{% bannerList banners %}
{% for item in banners %}
<!-- 这里是Banner的显示内容和链接 -->
{% endfor %}
{% endbannerList %}
In this code,bannersis a custom variable name, which will carry all the Banner data obtained from the background.forLoops allow us to access each Banner entry (named here) one by one.item), and extract the various fields to build the display of the Banner.
Custom Banner Display Content
Each Banner EntryitemContains multiple fields available for calling, which correspond to the content you fill in on the backend:
item.Logo【en】：Banner image URL.item.Title【en】：Banner title text.item.Description【en】：Banner description text.item.Alt[en] : Banner image alternative text, important for SEO and accessibility.item.Link[en] : The link address where the banner will redirect after clicking.item.IdThe unique ID of the banner.
We can use these fields to design the display style of the Banner in combination with HTML and CSS. For example, a typical Banner structure may include images, titles, and descriptions:
{% bannerList banners %}
{% for item in banners %}
<a href="{{item.Link}}" target="_blank" title="{{item.Title}}">
<img src="{{item.Logo}}" alt="{{item.Alt}}" />
<div class="banner-content">
<h2>{{item.Title}}</h2>
<p>{{item.Description}}</p>
</div>
</a>
{% endfor %}
{% endbannerList %}
In the above code,item.Linkis used as<a>Tagshrefattribute to ensure that the correct jump is made when clicking the Banner.item.Logois used for<img>Tagssrcwhileitem.AltThen it is filledaltproperties.item.Titleanditem.DescriptionThen it is used to display text information.
Add and modify the link of Banner
The link of Banner is directly throughitem.LinkField acquisition. In the construction<a>When labeling, we usually set it ashrefthe value of the attribute.
If you want the Banner link to open in a new window or a new tab, you can add it in the<a>tag.target="_blank"Property. Additionally, to inform search engines that this link does not pass weight, you can also optionally addrel="nofollow"property, which is more common in some advertising or external link scenarios.
Practical Advanced Techniques
1. Call Banner of Specific Group
The Banner mentioned earlier can be grouped, which is a very powerful feature. If you want to call different Banner collections at different positions on the homepage, such as the main carousel at the top of the page and the activity promotion Banner in the middle of the page,typeTo specify which group's Banner to call, use the parameter.
Suppose you created a Banner group named "幻灯" in the background. You can call it like this:
{% bannerList banners with type="幻灯" %}
{% for item in banners %}
<a href="{{item.Link}}" target="_blank">
<img src="{{item.Logo}}" alt="{{item.Alt}}" />
<h3>{{item.Title}}</h3>
</a>
{% endfor %}
{% endbannerList %}
By adjustingtypeThe value of the parameter, which can flexibly display different Banner content scenarios in the template.
2. Apply special style processing to the first Banner.
In carousel scenes and similar, we may need to apply special styles such as 'active' to the first Banner entry.forIn the loopforloop.CounterVariables can help us determine which loop we are currently in:
{% bannerList banners %}
{% for item in banners %}
<div class="banner-item {% if forloop.Counter == 1 %}active{% endif %}">
<a href="{{item.Link}}" target="_blank">
<img src="{{item.Logo}}" alt="{{item.Alt}}" />
<h4>{{item.Title}}</h4>
</a>
</div>
{% endfor %}
{% endbannerList %}
3. Handling the case when there is no Banner
If no Banners are configured under a Banner group or due to other reasonsbannersThe list is empty, we can use{% empty %}Provide alternative content through tags to enhance user experience:
{% bannerList banners with type="幻灯" %}
{% for item in banners %}
<a href="{{item.Link}}" target="_blank">
<img src="{{item.Logo}}" alt="{{item.Alt}}" />
</a>
{% empty %}
<div class="no-banner-placeholder">
<p>暂无Banner内容，敬请期待！</p>
<img src="/static/images/default-banner.jpg" alt="默认Banner图" />
</div>
{% endfor %}
{% endbannerList %}
4. Optimize images using filters
AnQiCMS also provides various filters for image processing, such as|thumbCan obtain the thumbnail address of the processed image, which is very useful for responsive design and optimizing page loading speed:
<img src="{{item.Logo|thumb}}" alt="{{item.Alt}}" />
This filter will return a processed image address based on the thumbnail rules set in the background, to avoid directly loading large original images on the front end.
By utilizing these methods, we can fully take advantage of the flexibility of AnQiCMS templates, finely control the display content and links of the homepage banner, provide visitors with a better browsing experience, and strongly support the marketing goals of the website.
Common Questions (FAQ)
Q1: I uploaded a Banner image on the backend, but it's not displaying on the frontend. What's the issue?A1: First, please check if you have used the template file correctly.bannerListLabel to call Banner data. Next, confirm whether you selected the correct group when uploading Banner on the backend, and in the template call,type) and when calling the template.bannerListTagstypeAre the parameters consistent with the group name set in the background. Finally, check if the Banner status is enabled, and if there is a cache, you can try to update the system cache.
Q2: How to set different styles for different Banners, such as some Banners are full-screen and some are small-sized?A2: AnQiCMSbannerListThe label calls the Banner data, and the specific style is controlled by the front-end HTML and CSS. You can control each Banner entry (itemSet a custom field (for example, add a text field named "Banner Style" in the backend), and dynamically add different CSS classes based on the value of this field in the template. Or, make use offorloop.CounterApply special styles to the Banner at a specific location. For Banners in different groups, as you have alreadytypeThe parameters have been differentiated and can be directly applied different CSS rules on the corresponding HTML structure.
**