How to customize the display content and link of the homepage Banner in AnQiCMS template?
In website operation, the homepage banner acts as the 'face' of the website, and its visual effects and guiding role are crucial.A well-designed, tasteful Banner can not only attract visitors' attention but also effectively convey the core information of the website and guide users to take 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 improve the user experience and marketing effect of the website.
AnQiCMS provides great flexibility in template design, allowing us to easily control the display of the home page banner.This is mainly due to its powerful template tag system. Next, we will discuss how to customize the display content and link of the home page Banner in AnQiCMS template.
Understand the Banner management mechanism in AnQiCMS
In AnQiCMS, the management of the home page banner is usually carried out in a specific module on the backend.Here, we can upload Banner images, set the title, description, link address, and alternative text (Alt), which together constitute the data required for Banner display on the front end.
A very practical feature is that AnQiCMS allows for "grouping" of Banners.This means you can create multiple Banner collections, such as "Home 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 selecting the group it belongs to.
Call the homepage Banner list in the template
In the template files of AnQiCMS, we can usebannerListThe tag is used to call the background configuration of the Banner list. This tag is very intuitive, it will return an array of Banner entries for us to loop and display in the template.
A basic call method is as follows:
{% bannerList banners %}
{% for item in banners %}
<!-- 这里是Banner的显示内容和链接 -->
{% endfor %}
{% endbannerList %}
In this code block,bannersIt is a custom variable name that carries all the Banner data obtained from the backend. ThroughforLoop, we can visit each Banner entry one by one (here nameditem), and extract the various fields to construct the Banner display.
Custom Banner Display Content
Each Banner EntryitemContains multiple callable fields, which correspond to the content you fill in on the backend:
item.Logo: Banner image address.item.TitleBanner title text.item.DescriptionBanner description text.item.Alt: Alternative text for banner image, important for SEO and accessibility.item.Link: Banner click to jump link address.item.Id: Banner's unique ID.
We can use these fields, combined with HTML and CSS to design the display style of the Banner. 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 code above,item.Linkwas used as<a>label'shrefThe property ensures that the Banner can be correctly redirected when clicked.item.Logoused for<img>label'ssrcwhileitem.AltThen it was filled.altProperty.item.Titleanditem.DescriptionIt is used to display text information.
Add and modify the Banner link.
The link of the banner is directly accesseditem.LinkField is obtained. In constructing<a>When labeling, we usually set it tohrefthe value of the attribute.
If you want the Banner link to open in a new window or new tab, you can in the<a>the tag withtarget="_blank"attribute. At the same time, to inform the search engine that the link does not pass weight, you can optionally addrel="nofollow"Properties, this is quite common in some advertising or external link scenarios.
Practical advanced skills
1. Call the Banner of the specified group
The feature of Banner grouping mentioned earlier is a very powerful function. 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, you can make use oftypeSpecify the parameter to call the Banner group.
Suppose you have created a Banner group named "Slide" 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 be flexibly displayed in the template to show different Banner content in different scenarios.
2. Apply special style processing to the first Banner.
In carousel and other scenarios, we may need to apply special styles such as 'active' to the first Banner entry.forin the loopforloop.CounterThe variable helps 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 a Banner group is not configured with any Banner or due to other reasonsbannersThe list is empty, we can use{% empty %}Label to provide alternative content, 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. Use filters to optimize images
AnQiCMS also provides a variety of filters to process images, for example|thumbYou can get the thumbnail address of the processed image, which is very useful for responsive design and page loading speed optimization:
<img src="{{item.Logo|thumb}}" alt="{{item.Alt}}" />
This filter will return an image address after processing according to the thumbnail rules set in the background, to avoid loading large original images directly on the front-end.
By using these methods, we can fully utilize the flexibility of AnQiCMS templates, finely control the display content and links of the home page Banner, provide website visitors with a better browsing experience, and also provide strong support for the marketing goals of the website.
Frequently Asked Questions (FAQ)
Q1: I uploaded a Banner image on the backend, but it did not display on the front end. What could be the reason?A1: First, please check if your template file is using it correctly.bannerListTag to call Banner data. Next, confirm whether you have selected the correct group when uploading Banner on the backend(type), and when calling the template,bannerListlabel'stypeDoes the parameter match the group name set in the background. Finally, check if the Banner status is enabled, and if there is a cache, try to update the system cache.
Q2: How to set different styles for different Banners, such as some full-screen Banners and some small-sized Banners?A2: AnQiCMS'bannerListThe tag calls the Banner data, and the specific style is controlled by front-end HTML and CSS. You can set each Banner entry (item）Set a custom field (such as adding 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, useforloop.CounterApply a special style to the Banner at a specific location. For Banners in different groups, since you have already passedtypeThe parameters are called differently and can be applied directly to the corresponding HTML structure with different CSS rules.
**