How to implement dynamic display and link jump of the website homepage Banner carousel in AnQiCMS?

In website operation, an attractive homepage banner carousel is a key element for improving user experience, highlighting core content, and guiding user behavior.AnQiCMS as an efficient and flexible content management system provides an intuitive way to manage and display these dynamic contents.Next, we will explore how to easily implement the dynamic display and link jump of the website homepage Banner carousel using AnQiCMS.

Backstage settings: Prepare your Banner image and link

Firstly, we need to enter the images and related information used for the carousel into the AnQiCMS backend management interface.

You can usually find the configuration items such as 'Banner Management' or similar names under function modules like 'Page Resources' or 'Content Management'. Here, you can perform the following operations:

1. Add or edit Banner item:
   • Upload image (Logo): Select your Banner image file. To ensure the visual effects and loading speed of the carousel, it is recommended to upload images of consistent size and appropriate size.
   • Fill in the link address (Link)Configure a redirect link for each Banner image.This link can be an in-site article, product detail page, or an external promotional page.Ensure the accuracy of the link, as this is the key to achieving the jump.
   • Fill in the Alt attribute (Alt): Add descriptive Alt text to images. This not only helps search engines understand the content of the image, improves SEO, but also provides information to users when the image fails to load.
   • Fill in the description (Description): You can add a brief description for the Banner image, which is convenient for the front-end template to display when needed.
   • Group Name (Type)This is a very practical feature. AnQiCMS supports setting 'group name' for Banner images, for example, you can create different groups such as 'Home Carousel', 'Product Page Slider', and so on.When calling on the homepage, you can specify only to call the pictures under the "Homepage Carousel" group to achieve flexible management.By default, the Banner will be grouped into the "default" category.

After completing the entry of this information, your Banner data is ready and can be used by the front-end template.

Template call: Display the Banner on the homepage

Next, we need to write code in the homepage template file of the website to call and display these Banner data.

AnQiCMS template files are usually stored in/templateUnder the directory, with.htmlAs a file suffix. It uses a syntax similar to the Django template engine, which is simple and easy to understand.

1. Locate the home page template:Find the home page template file for your website, usually/template/您的模板目录/index/index.htmlOr/template/您的模板目录/index.html.

2. UsebannerListLabel call data:AnQiCMS provides a special function to get the Banner list:bannerListLabel. You can call it in the template as follows:

   {% bannerList banners with type="default" %}
       {# 在这里编写循环，展示您的Banner图 #}
   {% endbannerList %}
   

   • banners: You can customize the variable name, which will carry the Banner list data obtained from the background.
   • with type="default": If your Banner image is set to a group, you can specify which group's Banner to call here. For example, if you have created a group named "Home Carousel", you can change towith type="首页轮播"If this parameter is omitted, the Banner of the 'default' group will be called.

3. Traverse the data and build an HTML structure: bannersIt is an array object, you can useforLoop to iterate over each piece of Banner image data and construct the corresponding HTML structure:

   <div class="banner-carousel">
       {% bannerList banners with type="default" %}
           {% for item in banners %}
               <a href="{{ item.Link }}" target="_blank" class="banner-item">
                   <img src="{{ item.Logo }}" alt="{{ item.Alt }}" />
               </a>
           {% endfor %}
       {% endbannerList %}
   </div>
   

   • {{ item.Link }}: Will dynamically output the redirect link you set in the background.
   • target="_blank": It is recommended to open the Banner link in a new window to avoid users leaving the current page.
   • {{ item.Logo }}: It will dynamically output the URL address of the Banner image.
   • {{ item.Alt }}: It will dynamically output the Alt text you set for the image.

Through the above code, AnQiCMS will dynamically render the background-configured Banner image and link to your website homepage.At this time, each image has the function of clicking to jump.

Implement dynamic carousel effect

AnQiCMS is mainly responsible for providing the data content and structure of the Banner, while the actual carousel animation and interactive effects usually rely on front-end JavaScript libraries and CSS styles to implement.There are many common carousel libraries, such as Swiper, Slick Carousel, Owl Carousel, etc.

Here we take the basic idea of implementing dynamic effects as an example:

1. Introduce front-end resources:In your template file (usuallybase.htmlorindex.htmlof<head>or<body>Before ending, include the CSS and JavaScript files required for the carousel library you choose. Please note that these static resources are usually stored in/public/static/the directory.