在安企CMS中，网站首页的Banner轮播图是吸引访客目光、展示核心内容的重要元素。正确地获取并展示这些Banner图，能极大提升网站的视觉效果和用户体验。安企CMS提供了直观的功能和灵活的模板标签，让我们可以轻松实现这一目标。
第一步：在后台配置您的Banner轮播图
在开始在网站前端展示Banner之前，我们首先需要在安企CMS的后台管理系统中进行配置。通常，您可以在“页面资源”或类似的“Banner管理”区域找到配置入口。
在这里，您可以创建新的Banner条目，并为每个Banner上传图片（即Logo）、设置点击后跳转的链接（Link）、添加图片替代文本（Alt）以便于搜索引擎理解和无障碍访问，以及撰写简短的描述（Description）。
一个关键的设置是“分组名称”（type）。安企CMS允许您为不同的Banner轮播图设置不同的分组。例如，您可以创建一个名为“首页轮播”的分组，专门用于展示首页的Banner。这样，当您在模板中调用时，就可以精确地指定要显示哪个分组的Banner。确保为首页轮播图选择一个明确的分组名称，例如“default”或者“首页Banner”，并保持图片尺寸的一致性，以保证轮播图的视觉协调性。
第二步：在模板中调用并展示Banner轮播图
完成后台配置后，接下来就是将这些精美的Banner图呈现在您的网站首页上。这主要通过安企CMS的模板标签来实现。通常，这些代码会放置在您网站模板文件中的 index.html 或其包含的公共片段文件中。
安企CMS为此提供了一个专门的 bannerList 标签，它能够帮助我们获取后台配置的Banner列表。
基本调用方式
要获取所有默认分组的Banner列表，您可以使用以下代码片段：
{% bannerList banners %}
<div class="homepage-banner-carousel">
{% for item in banners %}
<a href="{{item.Link}}" target="_blank">
<img src="{{item.Logo}}" alt="{{item.Alt}}" />
<h5>{{item.Description}}</h5>
</a>
{% endfor %}
</div>
{% endbannerList %}
在上面的代码中：
{% bannerList banners %}标签会将后台配置的Banner列表数据赋值给一个名为banners的变量。{% for item in banners %}循环会遍历banners列表中的每一个Banner项。- 在循环内部，
item变量代表了当前正在处理的单个Banner的数据。我们可以通过item.Logo获取图片地址，item.Link获取跳转链接，item.Alt获取图片替代文本，以及item.Description获取Banner的描述文字。
调用指定分组的Banner
如果您在后台为首页Banner设置了特定的分组名称，例如“首页幻灯”，那么在模板中调用时，需要通过 type 参数来指定该分组：
{% bannerList banners with type="首页幻灯" %}
<div class="homepage-banner-carousel">
{% for item in banners %}
<a href="{{item.Link}}" target="_blank">
<img src="{{item.Logo}}" alt="{{item.Alt}}" />
<h5>{{item.Description}}</h5>
</a>
{% endfor %}
</div>
{% endbannerList %}
通过 with type="分组名" 参数，您可以确保只显示属于特定分组的Banner，这在管理多个轮播区域时非常有用。
为第一个Banner添加特殊样式
在很多轮播图中，第一个Banner项可能需要加载时就处于激活状态，或者有特殊的样式。您可以通过 forloop.Counter 来判断当前是否是循环的第一个元素：
{% bannerList banners %}
<div class="homepage-banner-carousel">
{% for item in banners %}
<a class="carousel-item {% if forloop.Counter == 1 %}active{% endif %}" href="{{item.Link}}" target="_blank">
<img src="{{item.Logo}}" alt="{{item.Alt}}" />
<h5>{{item.Description}}</h5>
</a>
{% endfor %}
</div>
{% endbannerList %}
这里，我们通过 {% if forloop.Counter == 1 %} 判断当前循环是否是第一次，如果是，则添加 active 类名，以配合前端JavaScript或CSS实现默认激活效果。
实用建议与注意事项
- 图片优化： 上传的Banner图片应经过适当压缩，保持文件大小适中，以确保网站加载速度。同时，统一图片的尺寸和比例能够让轮播图看起来更加专业和美观。