如何获取并显示网站首页配置的Banner轮播图列表？

在安企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图片应经过适当压缩，保持文件大小适中，以确保网站加载速度。同时，统一图片的尺寸和比例能够让轮播图看起来更加专业和美观。