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 to enhance user experience, highlight core content, and guide 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.

Background settings: Prepare your Banner image and link

Firstly, we need to enter the images and relevant information for the carousel into the AnQiCMS admin interface.

You can usually find the 'Banner management' or similar configuration options under 'Page Resources' or 'Content Management' modules. 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 that you upload images of consistent size and moderate size.
    • Enter link address (Link)English translation: Set a jump link for each Banner image.This link can be an in-site article, product detail page, or an external promotion page.Ensure the accuracy of the link, as this is the key to achieving the jump.
    • Enter Alt attribute (Alt)Add descriptive Alt text to images. This not only helps search engines understand the image content and improve SEO, but also provides users with information when the image fails to load.
    • Fill in the description (Description)English: Can add a brief description text for Banner image, convenient for frontend template to call and 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' and 'Product Page Slideshow'.When calling on the homepage, you can specify only to call the pictures under the "Homepage Carousel" group, realizing flexible management.By default, the Banner will be grouped into the "default" group.

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

Template Call: Display the Banner on the homepage of the website

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/templatedirectory, with.htmlAs a file extension. It uses a syntax similar to Django template engine tags, which is simple and easy to understand.

  1. Locate the home page template:Find the homepage 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 listbannerListYou can call it in the template by the following method:

    {% 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 group, you can specify which group's banner to call here. For example, if you created a group named "Home Carousel", you can change it towith type="首页轮播"。If this parameter is omitted, the default Banner of the “default” group will be called.

  3. Traverse the data and build an HTML structure: bannersis an array object, you can useforLoop to iterate over each 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 jump link you set in the background.
    • target="_blank"：通常建议Banner链接在新窗口打开，以避免用户离开当前页面。
    • {{ item.Logo }}：会动态输出Banner图片的URL地址。
    • {{ item.Alt }}English: Will dynamically output the Alt text you set for the image.

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

Implement dynamic carousel effect

The AnQiCMS is mainly responsible for providing the data content and structure of banners, while the actual carousel animation and interactive effects usually rely on frontend 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 (usually)base.htmlorindex.htmlof<head>or<body>Before ending), introduce 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.