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

As an experienced website operations expert, I am well aware of the importance of the homepage banner in terms of website visual appeal, user guidance, and brand promotion.In such an efficient and flexible content management system as AnQiCMS, making good use of its built-in tags can allow us to easily achieve various content display needs.bannerListLabel, display your beautiful 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 striking element of that first impression.It can quickly attract users' attention, convey core information, guide users to key pages, and even directly lead to conversion.For small and medium-sized enterprises, self-media operators, a CMS system that can flexibly manage and display Banners is a powerful tool for content marketing and user experience optimization.

AnQiCMS with its high-performance architecture based on 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 most concise and efficient way through its powerful template tag system.bannerListThe label is one of the core tools to achieve this goal.

Core Function Analysis:bannerListtags

bannerListThe tag is a special tag used in AnQiCMS template engine to obtain and loop to display the banner image list.It is designed simply and functionally, capable of helping us easily display the Banner images configured on the back-end on the website front-end.

1.bannerListThe basic syntax and function

bannerListThe basic usage format of the tag is very intuitive, it requires 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, and you can name it according to your habitbannerList/slidesThis variable will be an array object containing all qualified Banner items.

2. Parameter details: Flexibly control Banner content.

bannerListTags provide several key parameters that allow you to precisely control the Banner content you obtain:

  • siteIdThis parameter is very useful when managing multiple sites. If you have created multiple sites in the AnQiCMS background and want to call Banner data from other sites in the current site,siteId="X"Specify (wherein)Xis the ID of the target site). However, in most cases, if you are just managing the current site, this parameter can be omitted,bannerListThe Banner of the current site will be fetched by default.
  • type: This is the core parameter for Banner grouping display.In AnQiCMS backend, you can create different groups for Banners (such as "Home Slidertype="分组名"[for example]type="幻灯"），You can accurately call the Banner images under a specific group. If not specifiedtypeParameter, the system will call the Banner under the "default" group by default.

3. Fields available for the Banner Item

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

  • Id: Banner的唯一标识ID。English
  • Logo: Banner图片的URL地址。这是展示图片的关键字段。English
  • Link: Banner点击后跳转的目标链接地址。
  • Description: Banner的简短描述，可用于辅助信息展示或SEO。
  • Alt: The alternative text for banner images, crucial for image SEO and accessibility.
  • Title: Banner的标题，通常用于在Banner图片上叠加文字说明，或作为链接的 Englishtitleproperties.

Practice Exercise: Display Banner Image List on AnQiCMS Home Page

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

First step: Configure and manage the Banner in the background

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

  1. Create Banner Group (optional but recommended): Access AnQiCMS backend and find related Banner settings.通常您可以创建不同的Banner分组，例如，为首页轮播图创建一个名为“首页轮播”或“slideshow”的分组。
  2. Upload Banner Image and Fill in Information: In the selected group, upload your Banner image. Make sure to fill in the corresponding information carefully each time you upload an image.Link address (Link)/Alternative text (Alt)andTitle (Title)These information is not only the basis for front-end display, but also the key to improving user experience and SEO.

Step 2: Select the appropriate template file

AnQiCMS's template files are usually located in/templatedirectory, 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 explanation:

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