Displaying dynamic banner images on the website homepage with clickable links is a common requirement for enhancing the visual appeal and user interaction of the website.Using the powerful functions and flexible template mechanism of AnQiCMS, we can easily achieve this goal.The entire process is mainly divided into two parts: background configuration and front-end template invocation.
第一步：Background configuration of Banner image and link
To display a dynamic banner on the homepage of the website, you first need to perform the corresponding image upload and link settings in the AnQiCMS backend.
English, there is a special 'Banner Management' or 'Slide Management' feature entry in the 'Content Management' or 'Page Resource' module of AnQiCMS backend.If your template supports custom Banner grouping, you can also create a new group here, for example, named 'Home Carousel', to manage it more clearly.
Next, you need to add Banner images one by one. When adding or editing each Banner, the key information settings include:
- Image upload:Upload the Banner image you have prepared. To ensure the visual consistency of the carousel effect, it is recommended that all Banner images maintain consistent dimensions.
- Image title/description:Fill in the banner title and description, which can be displayed above the image on the front end and provide more information.
- Alt text:This is the alternative text for the image, which is very important for search engine optimization (SEO) and improving the accessibility of the website.Please fill in meaningful Alt text for each image, briefly describing the content of the image.
- Redirect link:This is the core of implementing click-to-jump.Here is the URL that the user should be redirected to after clicking the Banner image.This link can be an in-site article, a product page, or an external promotion page.
Complete all Banner image uploads and information configuration, and save your settings.
Step 2: Call in the front-end template file
Configure the background data first, and the next step is to display these Banner data on the homepage of the website. This requires you to edit the homepage template file of the website.
In AnQiCMS, the homepage template file is usually located intemplatethe directory of the theme you are currently using in the folder, for exampledefault/index/index.htmlordefault/index.html. You can edit online through the 'Template Design' feature in the background, or directly modify the file through FTP and other methods.
In the home page template file, you can use AnQiCMS providedbannerListLabel to get the Banner data configured in the background. This label can flexibly retrieve the Banner list you set in the background, and provide information such as image address and link.
The following is a basic template call example, showing how to obtain Banner data and construct an HTML structure:
<div class="banner-carousel">
{% bannerList banners with type="default" %} {# 如果您创建了自定义分组，将 "default" 替换为您的分组名，例如 "首页轮播" #}
{% for item in banners %}
<a href="{{ item.Link }}" target="_blank"> {# item.Link 就是您在后台设置的跳转链接 #}
<img src="{{ item.Logo }}" alt="{{ item.Alt }}" /> {# item.Logo 是图片地址，item.Alt 是Alt文本 #}
{# 您也可以在这里添加 item.Title 或 item.Description 来显示文本信息 #}
{% if item.Title %}
<div class="banner-title">{{ item.Title }}</div>
{% endif %}
</a>
{% endfor %}
{% endbannerList %}
</div>
In this code block:
{% bannerList banners with type="default" %}This is the tag for calling the Banner list.bannersThis is the variable name we specify for this list.type="default"Represents the Banner of the default group we retrieve. If you have created a custom group, pleasedefaultreplace it with your group name.{% for item in banners %}AnQiCMS will take each Banner data obtained asitemLoop.{{ item.Link }}: It will output each Banner's jump link.{{ item.Logo }}：Will output the image address of each Banner.{{ item.Alt }}：Will output the Alt text of each Banner.target="_blank"This is an optional property used to set the link to open in a new window or a new tab after clicking.
Implement a dynamic carousel effect:
AnQiCMSbannerListThe label is mainly responsible for providing Banner data, while dynamic carousel effects (such as smooth transitions, automatic playback, left and right switch buttons, and bottom indicators, etc.) usually need to be implemented through front-end JavaScript libraries and CSS styles.Common carousel libraries include Swiper, Owl Carousel, etc.
You need to include the CSS and JavaScript files of these libraries on the front-end page, and then follow their documentation to initialize the HTML structure containing the Banner image as a dynamic carousel with a few lines of simple JavaScript code. For example, an initialization of Swiper might look like this:
// 假设您已经引入了Swiper的CSS和JS文件
var mySwiper = new Swiper('.banner-carousel', {
loop: true, // 循环模式选项
autoplay: {
delay: 3000, // 自动播放间隔
disableOnInteraction: false, // 用户操作后不停止自动播放
},
pagination: { // 底部小圆点
el: '.swiper-pagination',
clickable: true,
},
navigation: { // 左右箭头
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
Remember that the above JavaScript code needs to be adjusted according to the carousel library you choose and its specific configuration.
Optimization and注意事项
- Image size and loading speed:The home page banner image is usually large. To ensure the website loads quickly, it is recommended to compress the image appropriately.AnQiCMS provides options such as 'Whether to automatically compress large images', 'Whether to start Webp image format' in 'Content Settings', which can help you optimize the size of images.
- Responsive design:Ensure that your Banner image and its container display well on various devices (such as smartphones, tablets, computers).This is usually achieved through CSS media queries and the responsive features of carousel libraries.
- SEO-friendly:In addition to filling
altText, It is best for the text on the banner to also exist in HTML text form (not as part of an image), as this is more conducive to search engine crawling and understanding. - Accessibility:Consider adding pause/play buttons to the carousel and ensuring that keyboard navigation and other functions work properly to enhance the experience for all users.
By following the above steps, you can easily display a dynamic carousel banner image with click-through functionality on the homepage of the AnQiCMS-driven website, adding vitality and user attraction to your site.
Common Questions (FAQ)
Q1: Why does the banner image not have dynamic effects after uploading?
A1:AnQiCMSbannerListLabels are mainly used to retrieve Banner data from the background and render it into an HTML structure.The actual dynamic carousel effect (such as smooth transition, auto-play, navigation arrows, etc.) usually needs to be implemented through frontend JavaScript code and CSS styles.You need to integrate a frontend carousel library (such as Swiper, Owl Carousel) into the template and initialize it according to its documentation to see the dynamic effects.
Q2: How to set different banner slides for different pages (such as category pages, single pages)? A2:Except for the global Banner on the homepage, AnQiCMS also supports setting Banners for specific pages.
- Category page Banner:Edit a category under "Content Management" -> "Document Categories
categoryDetailLabel gets the banner group image of this category, for example{% categoryDetail categoryImages with name="Images" %}. - Single page Banner:Similarly, when editing a single page under “Page Resources”->“Page Management”, there is also a “Banner Image” option, in the single page template,
pageDetailTags, for example{% pageDetail pageImages with name="Images" %}. - Home Global Banner:If you used the parameter during backend configuration,
tag-/anqiapi-other/3498.htmlmentionedtypeto create different Banner groups, for example,type="首页轮播"then you can use it in the home page template.{% bannerList banners with type="首页轮播" %}Come specifically to call these pictures, to implement a unique homepage carousel.
Q3: What's wrong if the Banner picture cannot jump after clicking? A3:This is usually because the jump link is not configured correctly or the template is not used correctly. Please check the following points:
- Background link configuration:Confirm that you have filled in the complete, accessible URL in the corresponding 'jump link' field when editing each Banner in the AnQiCMS background.
- Template tag usage:Ensure that the properties are correctly used in the template file,
<a>Tagshref`{{ item.Link