作为一名长期深耕AnQiCMS内容运营的资深人士，我深知首页Banner对于网站视觉吸引力与营销推广的重要性。一个设计精良且能动态更新的Banner列表，不仅能迅速抓住访问者的眼球，更能灵活传达最新的产品、服务或活动信息。今天，我将基于AnQiCMS的强大模板功能，向您详细阐述如何在网站首页动态展示Banner列表。
AnQiCMS后台的Banner内容准备
在着手模板代码之前，我们首先需要在AnQiCMS的后台管理系统中配置好Banner内容。AnQiCMS提供了直观便捷的方式来管理各类图片资源。虽然文档中没有直接列出名为“Banner管理”的独立功能模块，但通过“分类管理”和“单页面管理”中对“Banner图”的设置，以及模板标签bannerList对type参数的支持，我们可以推断AnQiCMS具备一套灵活的Banner图片管理机制。
通常情况下，您会在后台找到一个类似“图片轮播”、“广告位管理”或在“页面资源”下的某个功能区域，允许您上传Banner图片。在这些管理界面中，您可以为每个Banner图片设定其标题、描述、点击后跳转的链接地址，以及用于SEO优化的alt文本。关键的一步是为这些Banner图片分配一个“分组名称”（在tag-bannerList.md中被称为type参数）。例如，您可以创建一个名为“首页幻灯”或“主页Banner”的分组。请确保上传的图片尺寸一致，以防止在前端显示时出现布局跳动，并尽量对图片进行压缩优化，提升加载速度。
选择合适的模板文件进行编辑
要将这些配置好的Banner动态展示在网站首页，您需要修改网站的首页模板文件。根据AnQiCMS的模板制作约定，首页模板通常位于您的模板目录根目录下，文件名为index/index.html（采用文件夹组织模式）或直接为index.html（采用扁平化文件组织模式）。您需要根据您当前模板的具体结构来定位并编辑这个文件。
您可以在模板文件的合适位置插入Banner代码，例如在页头（header）下方或内容主体（main）的顶部区域，以确保它在用户进入网站时立即可见。同时，Banner图片所需的CSS样式和JavaScript文件（如果需要实现轮播效果）应该存放在public/static/目录中，并在模板的<head>或<body>标签内部进行引用。
使用bannerList标签动态展示Banner
AnQiCMS为动态获取和展示Banner列表提供了一个专用且功能强大的模板标签——bannerList。这个标签允许您根据不同的“分组”来调用相应的Banner集合。
bannerList标签的基本用法
bannerList标签的基本语法结构是{% bannerList 变量名称 %}...{% endbannerList %}。您需要为从后台获取的Banner列表指定一个变量名，例如banners。随后，您可以使用for循环来遍历这个变量，从而逐一渲染每个Banner的详细信息。
bannerList标签支持的参数：
type：这是区分不同Banner分组的核心参数。默认值为"default"。如果您在后台将首页Banner分组命名为“幻灯”，那么在模板中调用时，您需要明确指定type="幻灯"。siteId：此参数用于多站点场景。如果您启用了AnQiCMS的多站点管理功能，并希望调用特定站点的Banner数据，则可以指定siteId。对于单站点，通常无需设置此参数。
在for循环中，每个Banner项目（item）都包含以下可用字段，您可以根据需求进行调用：
Id：Banner的唯一标识符。Logo：Banner图片的完整URL地址。这是展示Banner图片的关键字段。Link：Banner被点击后将跳转的目标URL。Description：Banner的描述文本