As a senior person who has been deeply engaged in AnQiCMS content operation for a long time, I know the importance of the homepage banner for the visual appeal and marketing promotion of the website.A well-designed and dynamic Banner list that can quickly catch the visitor's attention and effectively convey the latest product, service, or event information.Today, I will elaborate on how to dynamically display the Banner list on the homepage of the website based on the powerful template function of AnQiCMS.

AnQiCMS back-end Banner content preparation

Before starting the template code, we first need to configure the Banner content in the AnQiCMS backend management system.AnQiCMS provides an intuitive and convenient way to manage various image resources.Although the document does not directly list a separate functional module named "Banner Management", but through the settings of "Banner image" in "Category Management" and "Single Page Management", as well as template tagsbannerListYestypeSupport for parameters, we can infer that AnQiCMS has a flexible Banner image management mechanism.

In most cases, you will find a feature area similar to 'Image Carousel', 'Ad Management', or under 'Page Resources', where you can upload Banner images. In these management interfaces, you can set the title, description, click-through link address, and SEO optimization for each Banner image.altText. A key step is to assign a "group name" to these Banner images (intag-/anqiapi-other/3498.htmlalso known astypeParameter). For example, you can create a group named "Home Slide" or "Home Banner".Make sure the image sizes uploaded are consistent to prevent layout jumps when displayed on the front end, and try to compress and optimize the images to improve loading speed.

Choose an appropriate template file to edit

To dynamically display these configured Banners on the website homepage, you need to modify the homepage template file of the website. According to the template production conventions of AnQiCMS, the homepage template is usually located in the root directory of your template directory, namedindex/index.html(Organize using folder mode) or directly asindex.html(Organize files flatly). You need to locate and edit this file based on the specific structure of your current template.

You can insert the Banner code at an appropriate location in the template file, such as at the top of the page (headerbelow or in the main content (mainThe top area, to ensure it is visible when the user enters the website. At the same time, the CSS styles and JavaScript files required for the Banner image should be stored inpublic/static/In the catalog and in the template's<head>or<body>Referenced within the tag.

UsebannerListTag dynamically displays Banner

AnQiCMS provides a dedicated and powerful template tag for dynamically acquiring and displaying the Banner list——bannerListThis tag allows you to call the corresponding Banner collection according to different "groups".

bannerListBasic usage of tags

bannerListThe basic syntax structure of the tag is{% bannerList 变量名称 %}...{% endbannerList %}. You need to specify a variable name for the Banner list obtained from the background, for examplebannersThen you can useforLoop through the variable to render the details of each Banner one by one.

bannerListLabel supported parameters:

  • type: This is the core parameter that distinguishes different Banner groups. The default value is"default"If you name the homepage Banner group as "Slideshow" in the background, you need to specify it explicitly when calling it in the templatetype="幻灯".
  • siteIdThis parameter is used for multi-site scenarios. If you have enabled the AnQiCMS multi-site management feature and want to call the Banner data of a specific site, you can specifysiteId. For a single site, this parameter is usually not set.

InforIn the loop, each Banner item (item) includes the following available fields, you can call them according to your needs:

  • Id: Banner's unique identifier.
  • Logo: Full URL of the Banner image. This is a key field for displaying the Banner image.
  • Link: The target URL where the Banner will redirect after being clicked.
  • Description: Banner description text