So Outside Technology Security CMS
AnQiCMS
Online Demonstration

How to dynamically display the home page banner list in AnQiCMS template?

Calendar 👁️ 60

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

Related articles

How to call the switch link of multi-language sites in AnQiCMS template?

As a senior CMS website operator for an enterprise security company, I know that the multilingual site switching link is crucial for expanding the international market and improving user experience.AnQi CMS provides us with a convenient and efficient solution with its powerful multi-site and multi-language support function.Below, I will elaborate on how to call the multilingual site switch link in the AnQiCMS template.Flexible construction of multi-language site switching function Anqi CMS has fully considered the needs of enterprises and operators in global layout from the beginning of its design, originally supporting multi-site management and multi-language content switching

2025-11-06

How to get the thumbnail version of the image in AnQiCMS template?

As an experienced CMS website operation personnel, I am well aware of the importance of high-quality content and excellent user experience.In the visual presentation of a website, images play a core role, and the optimization of images, especially the application of thumbnails, is invaluable for improving page loading speed, enhancing user experience, and improving search engine rankings.The AnQi CMS provides strong and flexible support in this aspect, allowing operation personnel to easily obtain and display thumbnail versions of images in templates.In today's content-driven internet environment, it has become commonplace for web pages to contain a large number of images. However

2025-11-06

How to judge if a variable is empty in AnQiCMS template and set a default value?

As a senior AnQi CMS website operation personnel, I know that handling variables with flexibility and robustness is crucial in template development and content display.Especially when the data source may be uncertain or missing, how to elegantly judge whether a variable is empty and provide a reasonable default value, which directly affects the user experience and the stability of page rendering.The AnQi CMS, with its template engine similar to Django, provides us with powerful and intuitive tools to meet these challenges.

2025-11-06

How to ensure safe output of HTML content without escaping in AnQiCMS templates?

As an experienced website operator proficient in AnQiCMS, I am well aware of the importance of secure content output, while also ensuring the complete presentation of high-quality content.In AnQiCMS template development, dealing with HTML content often encounters a core issue: how to ensure that these HTML contents are rendered as expected and not escaped to plain text by the template engine?This not only involves the display effect of the content, but also concerns the security of the website.AnQiCMS uses a syntax similar to the Django template engine, one of its core design philosophies is security.This means

2025-11-06

How to remove the blank lines that may be generated by logic tags in the AnQiCMS template?

As an experienced CMS website operation personnel of an enterprise, I know that every detail of content presentation is crucial, including seemingly trivial blank lines.In a meticulously constructed template, unnecessary blank lines not only affect the neatness of the HTML code, but may also cause unexpected visual problems in certain layouts.Today, let's delve into how to efficiently remove blank lines that may be generated by logical tags in the AnQiCMS template.

2025-11-06

How to create a multi-level website navigation menu in AnQiCMS template?

As an experienced AnQiCMS website operations staff, I know that a clear and efficient multi-level website navigation menu is crucial for user experience and website SEO.AnQiCMS provides a comprehensive mechanism in template design and backend management, helping us easily build such a menu.I will elaborate in detail on how to create a multi-level website navigation menu in the AnQiCMS template.

2025-11-06

How to customize the directory structure and file naming rules of AnQiCMS templates?

Hello, as a senior operator of AnQiCMS, I am very happy to be able to elaborate in detail on how to customize the directory structure and file naming rules of AnQiCMS templates.Understanding these basics is the key to efficient management and optimization of website content. ### AnQiCMS Template Custom Overview AnQiCMS is an enterprise-level content management system based on the Go language, which provides high flexibility in template customization.It uses a syntax similar to the Django template engine, making it easy for front-end developers to get started.

2025-11-06

How to specify an independent template file for a specific category, article, or single page in AnQiCMS?

As a deep user of Anqi CMS website operators, I know that the flexibility of content display is crucial for attracting and retaining users.Strong support is provided by Anqicms in this aspect, allowing us to specify exclusive template files for specific categories, articles, even independent pages, thereby achieving highly customized content presentation.This not only helps to improve the user experience, but also provides great convenience for our refined operation and SEO optimization.

2025-11-06