如何显示首页或特定分组的Banner轮播图片？

网站首页和特定分组的Banner轮播图片，是网站吸引访客、展示核心内容的关键元素。一套管理便捷、显示灵活的系统，能让您的网站运营事半功倍。安企CMS（AnQiCMS）凭借其直观的设计和强大的模板标签功能，让您轻松驾驭这些视觉元素，无论是打造醒目的首页大图，还是为特定分类页面量身定制专属宣传图，都能游刃有余。

今天，我们就来深入了解如何在安企CMS中，让您的Banner轮播图片生动起来。

一、后台设置：为您的Banner内容做好准备

在安企CMS中管理Banner图片非常灵活，您可以为全站设置通用的轮播，也可以针对特定的内容（如分类页面或独立页面）添加专属Banner。

1. 配置首页或自定义分组的Banner轮播图

这是最常见的Banner应用场景，通常用于网站首页展示核心价值或最新活动。

  • 进入Banner管理界面： 登录安企CMS后台，您会找到一个专门用于管理Banner的区域。在这里，您可以添加、编辑、排序和分组您的Banner图片。
  • 添加新的Banner图片： 点击“添加”按钮，您可以上传图片，并为每张图片填写以下信息：
    • 图片文件： 这是Banner的主体。建议上传尺寸一致的图片，以确保轮播效果的协调性。
    • 链接地址： 当访客点击Banner时，会跳转到哪个页面？您可以设置一个相关的内部页面链接或外部活动链接。
    • Alt文本： 这是图片的重要描述，不仅有助于搜索引擎理解图片内容，提升SEO效果，也能在图片无法加载时提供替代信息。
    • 介绍： 简短的文字描述，可以作为Banner的标题或副标题在前端显示。
    • 分组名称： 这是管理Banner轮播图片的关键。安企CMS允许您为Banner图片设置不同的“分组名称”（例如，您可以创建一个名为“首页幻灯”的分组，再创建一个名为“活动推广”的分组）。默认情况下，所有未指定分组的Banner都会归入“default”分组。合理利用分组，可以帮助您在不同页面调用不同的Banner集合。

2. 为特定分类或独立页面配置专属Banner

有时，您可能希望某个产品分类页或“关于我们”独立页拥有独一无二的Banner，以增强其主题性。安企CMS也提供了这样的便捷功能。

  • 分类页面Banner：
    • 前往后台的“内容管理” -> “文档分类”界面。
    • 选择您要编辑的分类，点击“编辑”按钮进入分类详情页。
    • 在页面中找到“Banner图”设置项。您可以在这里上传一张或多张图片作为该分类页的专属Banner轮播图。这些图片将只在该分类页面生效，不会干扰到其他页面的Banner。
  • 独立页面Banner：
    • 前往后台的“页面资源” -> “页面管理”界面。
    • 选择您要编辑的独立页面，点击“编辑”按钮进入页面详情页。
    • 同样在页面中找到“Banner图”设置项。您可以在这里上传专属的Banner轮播图片，它们将仅在该独立页面展示。

二、模板调用：将您的Banner展示在网站前端

后台配置完成后，下一步就是在网站前端的相应模板文件中，使用安企CMS提供的标签来调用并显示这些Banner图片。安企CMS采用类似Django模板引擎的语法，让模板编写直观高效。

1. 在首页调用Banner轮播图

通常，首页Banner会放置在页面的顶部，例如在您模板文件中的index.html或者公共头部文件partial/header.html里。

要调用在后台“Banner管理”中配置的首页轮播图，您可以使用bannerList标签。

{% bannerList banners %}
    <div class="swiper-container"> {# 假设您使用Swiper或其他前端轮播库 #}
        <div class="swiper-wrapper">
            {% for item in banners %}
            <div class="swiper-slide {% if forloop.Counter == 1 %}active{% endif %}">
                <a href="{{item.Link}}" target="_blank">
                    <img src="{{item.Logo}}" alt="{{item.Alt}}" />
                    {# 如果您在后台Banner的“介绍”字段填写了文字，也可以在这里显示 #}
                    {% if item.Description %}
                    <div class="banner-description">
                        <h5>{{item.Description}}</h5>
                    </div>
                    {% endif %}
                </a>
            </div>
            {% endfor %}
        </div>
        {# 如果需要，可以添加分页器和导航按钮 #}
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
{% endbannerList %}

代码解析：

  • {% bannerList banners %}：这是核心标签，它会从后台获取所有属于“default”分组的Banner图片数据，并将其赋值给banners这个变量（您可以自定义变量名，例如homepageBanners）。
  • {% for item in banners %}：通过循环遍历banners变量，您可以逐一访问每张Banner图片的信息。
  • item.Link：获取Banner点击后的跳转链接。
  • item.Logo：获取Banner图片的URL地址。
  • item.Alt：获取Banner图片的Alt文本。
  • item.Description：获取Banner图片的介绍文字。
  • {% if forloop.Counter == 1 %}active{% endif %}：这是一个小技巧，forloop.Counter会返回当前循环的次数（从1开始）。您可以利用它为第一张Banner图片添加一个active类名，这在许多前端轮播组件（如Swiper、Owl Carousel等）中常用于初始化显示。
  • {% endbannerList %} 和 {% endfor %}：与 bannerList 和 for 标签配对使用，表示代码块的结束。

调用指定分组的Banner：

如果您在后台为Banner设置了不同的分组（例如“活动幻灯”），在模板中调用时，只需要给bannerList标签添加一个type参数即可：

”`twig {% bannerList activityBanners with type=“活动幻灯” %}

{# 同样地，在这里