How to display the Banner image list through the `bannerList` tag on the Anqi CMS homepage?

As an experienced website operations expert, I fully understand the importance of the homepage banner for the visual appeal, user guidance, and brand promotion of the website.In AnQiCMS such an efficient and flexible content management system, making good use of its built-in tags can allow us to easily achieve various content display needs.Today, let's delve into how to skillfully use it on the homepage of AnQiCMSbannerListLabel, display your exquisite Banner image list.

The importance of AnQiCMS and Banner management.

In today's highly competitive online environment, the homepage of a website is the first impression visitors have of you, and the Banner image is undoubtedly the most impactful element of that first impression.It can quickly attract the user's attention, convey key information, guide the user to the key page, and even directly promote conversion.For small and medium-sized enterprises, as well as self-media operators, a CMS system that can flexibly manage and display banners is a tool for content marketing and user experience optimization.

AnQiCMS with its high-performance architecture based on the Go language and flexible content model, provides a solid foundation for Banner management.Whether it is a global Banner on the website, a Banner for a specific category, or a single-page Banner, AnQiCMS can present the designed visual content to users in the simplest and most efficient way through its powerful template tag system.bannerListThe tag is one of the core tools to achieve this goal.

Core function analysis:bannerListTag

bannerListThe tag is a special tag used in the AnQiCMS template engine to retrieve and loop through the list of Banner images.It is designed simply, powerful, and can help us easily display the banner images configured in the background on the website front-end.

1.bannerListThe basic syntax and function.

bannerListThe basic format of the tag is very intuitive, it needs a starting tag.{% bannerList %}And an ending tag.{% endbannerList %}wrap the loop body. For example:

{% bannerList banners %}
    {# 在这里循环输出每一个 Banner 项目 #}
{% endbannerList %}

Here, bannersis the variable name you specify for the Banner list, you can name it according to your own habitsbannerList/slidesThis variable will be used as an array object, containing all the qualified Banner items.

2. Parameter details: Flexibly control Banner content.

bannerListThe tag provides several key parameters that allow you to precisely control the Banner content you retrieve:

• siteId: This parameter is very useful when managing multiple sites. If you have created multiple sites in the AnQiCMS background and want to call the Banner data of other sites in the current site, you can do so bysiteId="X"Specify (whereinXis the ID of the target site). However, in most cases, if you are only managing the current site, this parameter can be omitted,bannerListIt will default to fetching the Banner of the current site.
• typeThis is the core parameter for implementing Banner grouping display.In the AnQiCMS backend, you can create different groups for banners (such as "home page slider", "sidebar promotion images", etc.). Throughtype="分组名"for exampletype="幻灯"），You can accurately call the Banner images under a specific group. If not specifiedtypeParameter, the system will default to calling the Banner under the "default" group.

3. Available fields for Banner Item

InbannerListWithin the loop body, each Banner item (usually nameditem) contains the following common fields, you can directly call them throughitem.字段名.

• Id: The unique identifier ID of the Banner.
• Logo: The URL address of the Banner image. This is a key field for displaying the image.
• Link: Target link address after clicking the Banner.
• Description: Brief description of the Banner, which can be used for auxiliary information display or SEO.
• Alt: Alternative text for banner images, crucial for image SEO and accessibility.
• Title: Banner title, usually used to overlay text on Banner images or as link texttitleProperty.

Practice exercise: Display the Banner image list on the AnQiCMS homepage

UnderstoodbannerListAfter the core function of the label, we now apply it to practice, step by step displaying the Banner image on the homepage of your AnQiCMS website.

Step 1: Configure and manage the Banner in the background

In the AnQiCMS backend, you usually find the 'Banner management' or settings related to 'Categories', 'Single page', and 'Banner images' in the 'Content Management' or 'Page Resources' module.

1. Create Banner Group (optional but recommended): Access AnQiCMS backend, find related Banner settings.You can usually create different Banner groups, such as creating a group named "Home Carousel" or "slideshow" for the home page carousel.
2. Upload Banner Image and Fill in Information: Upload your Banner image under the selected group. Make sure to fill in the correspondingLink Address/Alternative text (Alt)andTitle (Title)This information is not only the basis of front-end display, but also the key to improving user experience and SEO.

Step 2: Choose the appropriate template file.

AnQiCMS template files are usually located/templatein the directory, the home page template is usuallyindex.htmlorindex/index.html. You need to edit this file to insert the Banner code.

Step 3: InsertbannerListtag code

Open your homepage template file, find the location where you want to display the Banner image. Then, insert the following code snippet:

<div class="main-banner-area">
    <ul class="banner-carousel">
    {% bannerList banners with type="首页轮播" %} {# 假设您在后台创建了一个名为“首页轮播”的分组 #}
        {% for item in banners %}
        <li class="banner-item">
            <a href="{{item.Link}}" target="_blank" title="{{item.Title}}">
                <img src="{{item.Logo}}" alt="{{item.Alt}}" />
                {# 如果Banner图片上需要显示标题或描述，可以这样添加 #}
                <div class="banner-info">
                    <h5>{{item.Title}}</h5>
                    <p>{{item.Description}}</p>
                </div>
            </a>
        </li>
        {% endfor %}
    {% endbannerList %}
    </ul>
</div>

Code description:

• {% bannerList banners with type="首页轮播" %}: This line of code tells AnQiCMS to retrieve all the Banner data under the "Home Carousel" group and store it inbannersthe variable.
• `{% for item in banners