In AnQiCMS, setting dynamic banner images on the homepage can effectively enhance the visual appeal of the website and convey key information.AnQiCMS provides flexible and intuitive features to help us achieve this goal.Next, we will step by step understand how to set up from the backend to the front-end template editing, creating an animated carousel effect for the homepage.
1. Backend configuration of Banner image: Content and group
Firstly, we need to prepare the images and relevant information for the carousel in the AnQiCMS backend.AnQiCMS provides a special function for managing Banner images.
You need to log in to the website backend, find the entry of 'Banner Management' under 'Content Management' or 'Page Resources' in the management menu.The specific location may vary depending on the theme or system version you are using, but there is usually a centralized place to manage carousel images.
After entering the Banner management interface, we can create or edit Banner images. Here, you will be able to:
- Upload Image (Logo): This is the core part of the Banner image. It is recommended to upload images of uniform size and high quality to ensure visual consistency during the carousel.
- Set link address (Link): Add a click-through link for each Banner image, which can be an in-site page or an external link.
- Fill in the description (Description): This is a brief description of the Banner image content, which can be displayed on the front end and also serve as supplementary information for SEO.
- Define Alt text (Alt)This is an important description of the image, which helps search engines understand the content of the image, enhances SEO, and also provides alternative text when the image fails to load.
It is particularly worth mentioning that AnQiCMS's Banner management supportsGrouping function.When creating or editing a Banner, you will see an option for "Group Name (type)".If you want the Banner image on the homepage to be independent of other page Banner images (such as category pages or single pages), you can specify a unique 'group name' for the homepage Banner image, such as 'Homepage Carousel' or 'HomepageCarousel'.So, when calling the front-end template, we can precisely only display the Banner images belonging to this group, maintaining the content's neatness and manageability.
2. Locate and edit the homepage template file
Complete the backend Banner image setup, and the next step is to edit the frontend template files, displaying these images on the homepage of the website. AnQiCMS template files are usually located in the root directory of the system./templateIn the folder, each topic has its own subdirectory. The template file on the homepage is usually namedindex.htmlorindex/index.html.
AnQiCMS's template system adopts syntax similar to Django, making the template writing both powerful and easy to understand.You can edit the template online in the "Template Design" feature in the background, or download it to your local machine using FTP/SFTP tools for editing.
3. Call the Banner list tag in the template
Open your homepage template file after, find the position where you want the Banner image to display. Next, we will use the built-in AnQiCMS.bannerListLabel to get the Banner data configured on the backend.
If you have set a specific group name for the home page banner image in the background, such as "Home Carousel", you need to specify the tag when calling it.typeParameters:
{% bannerList banners with type="首页轮播" %}
{# 这里的代码会循环显示属于“首页轮播”分组的Banner图 #}
{% endbannerList %}
If your home page banner image is not set to a specific group, or if you want to call the banner image of the default group, you can omit ittypeParameters:
{% bannerList banners %}
{# 这里的代码会循环显示默认分组的Banner图 #}
{% endbannerList %}
Here,bannersIt is a variable name we define, which will contain a list (array object) of Banner images. EachitemhasId/Logo/Link/DescriptionandAltThese fields correspond to the various information you fill in on the backend.
4. Build the HTML structure and dynamic effects of the carousel
Just calling Banner data is not enough, we also need to combine HTML structure and front-end JavaScript to implement a dynamic carousel effect. Most front-end carousel libraries (such as Swiper, Slick Carousel, or Bootstrap Carousel) require a specific HTML structure, and usually require the first carousel item to have aactiveClass to represent the initial state.
We can cleverly utilize the template language of AnQiCMS toforloop.CounterAutomatically add to the first Banner itemactiveclass.
The following is a general HTML structure example, it assumes that you will integrate a frontend carousel library thatcarousel-itemandactiveuses classes:
`html