在AnQiCMS中为网站首页设置动态轮播Banner图，能够有效提升网站的视觉吸引力，并传达关键信息。AnQiCMS提供了灵活且直观的功能来帮助我们实现这一目标。接下来，我们将一步步了解如何从后台设置到前端模板编辑，为首页打造一个生动的轮播效果。
1. 后台配置Banner图：内容与分组
首先，我们需要在AnQiCMS的后台准备好用于轮播的图片和相关信息。AnQiCMS提供了一个专门用于管理Banner图的功能。
您需要登录网站后台，在管理菜单中寻找“内容管理”或“页面资源”下的“Banner管理”入口。具体位置可能因您当前使用的主题或系统版本而略有不同，但通常会有一个集中管理轮播图片的地方。
进入Banner管理界面后，我们可以创建或编辑Banner图。在这里，您将能够：
- 上传图片 (Logo)：这是Banner图最核心的部分。建议上传尺寸统一、高质量的图片，以确保轮播时的视觉一致性。
- 设置链接地址 (Link)：为每张Banner图添加一个点击后跳转的链接，可以是站内页面，也可以是外部链接。
- 填写描述 (Description)：这是对Banner图内容的简要说明，可以在前端显示，也可以作为SEO的补充信息。
- 定义Alt文本 (Alt)：这是图片的重要描述，有助于搜索引擎理解图片内容，提升SEO效果，同时也能在图片加载失败时提供替代文本。
特别值得一提的是，AnQiCMS的Banner管理支持分组功能。在创建或编辑Banner时，您会看到一个“分组名称 (type)”的选项。如果您希望首页的Banner图独立于其他页面的Banner图（例如分类页或单页的Banner），可以为首页的Banner图指定一个独特的“分组名称”，比如“首页轮播”或“HomepageCarousel”。这样，在前端模板调用时，我们就能精确地只显示属于这个分组的Banner图，保持内容的整洁和易管理。
2. 定位并编辑首页模板文件
完成后台的Banner图设置后，下一步是编辑前端模板文件，将这些图片呈现在网站首页。AnQiCMS的模板文件通常位于系统根目录下的/template文件夹中，每个主题都有自己的子目录。首页的模板文件通常命名为index.html或index/index.html。
AnQiCMS的模板系统采用了类似Django的语法，这使得模板的编写既强大又易于理解。您可以在后台的“模板设计”功能中在线编辑模板，或者通过FTP/SFTP工具下载到本地进行编辑。
3. 在模板中调用Banner列表标签
打开您的首页模板文件后，找到您希望Banner图显示的位置。接着，我们将使用AnQiCMS内置的bannerList标签来获取后台配置好的Banner数据。
如果您在后台为首页Banner图设置了特定的分组名称，比如“首页轮播”，那么调用标签时需要指定type参数：
{% bannerList banners with type="首页轮播" %}
{# 这里的代码会循环显示属于“首页轮播”分组的Banner图 #}
{% endbannerList %}
如果您的首页Banner图没有设置特定分组，或者您想调用默认分组的Banner图，可以省略type参数：
{% bannerList banners %}
{# 这里的代码会循环显示默认分组的Banner图 #}
{% endbannerList %}
在这里，banners是我们自定义的一个变量名，它会包含一个Banner图的列表（数组对象）。列表中的每个item都具有Id、Logo、Link、Description和Alt等字段，这些字段对应着您在后台填写的各项信息。
4. 构建轮播的HTML结构与动态效果
仅仅调用Banner数据还不够，我们还需要结合HTML结构和前端JavaScript来实现动态轮播效果。大多数前端轮播库（如Swiper、Slick Carousel或Bootstrap Carousel）都需要特定的HTML结构，并且通常要求第一个轮播项带有一个active类来表示初始状态。
我们可以巧妙地利用AnQiCMS模板语言中的forloop.Counter来自动为第一个Banner项添加active类。
以下是一个通用的HTML结构示例，它假定您将集成一个需要carousel-item和active类的前端轮播库：
”`html