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

The Banner content preparation of AnQiCMS background

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.bannerListFortypeSupport 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 CarouselaltText. A key step is to assign a "Group Name" to these Banner imagestag-/anqiapi-other/3498.htmlas it is calledtypeParameter").For example, you can create a group named "Home Slide" or "Home Banner.Please ensure that the dimensions of the uploaded images are consistent to prevent layout jumps when displayed on the frontend, and try to compress and optimize the images as much as possible to improve loading speed.

Select an appropriate template file for editing

To dynamically display these configured Banners on the homepage of the website, you need to modify the homepage template file of the website. According to the template making conventions of AnQiCMS, the homepage template is usually located in the root directory of your template directory, with the file nameindex/index.html(Using folder organization mode) or directly forindex.html(Using flattened file organization mode). You need to locate and edit this file according to the specific structure of your current template.

You can insert the Banner code at a suitable position in the template file, for example, at the page header (header) below or in the main content (mainThe top area of the banner should be visible immediately when the user enters the website. At the same time, the CSS styles and JavaScript files required for the banner image (if a carousel effect is needed) should be stored inpublic/static/In the catalog, and referred in the template.<head>or<body>Refer inside the tag.

UsebannerListDynamic display of Banner in the tag.

AnQiCMS provides a special and powerful template tag for dynamically retrieving and displaying the Banner list.bannerListThis tag allows you to call the corresponding Banner collection based on different "groups".

bannerListBasic usage of the tag

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

bannerListLabel-supported parameters:

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

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

  • IdThe unique identifier of the banner.
  • Logo：The complete URL address of the Banner image. This is the key field for displaying the Banner image.
  • Link：The target URL where the Banner will redirect after being clicked.
  • DescriptionEnglish: Banner's description text