如何在AnQiCMS的单页面中显示自定义的Banner图片和内容？
在网站运营中，精心设计的单页面往往承担着品牌展示、产品介绍或特定活动推广的重要作用。一个引人注目的Banner区域，能够迅速抓住访客的注意力，传达核心信息。AnQiCMS 作为一个灵活的内容管理系统，提供了非常便捷的方式，让您在单页面中轻松设置并展示自定义的Banner图片与内容。
接下来，我们将一起探索如何在 AnQiCMS 中实现这一功能。
第一步：在后台为单页面上传Banner图片
AnQiCMS 提供了一个直观的界面来管理您的静态页面。要为单页面设置Banner，您需要先登录后台。
- 进入页面管理： 登录 AnQiCMS 后台后，您会在左侧导航栏中看到“页面资源”这个菜单项，点击它，然后选择“页面管理”。这里列出了您网站所有的单页面。
- 选择或创建单页面： 您可以选择编辑一个已有的单页面，例如“关于我们”或“联系方式”，也可以点击“添加单页面”来新建一个页面。
- 上传Banner图片： 在单页面的编辑界面中，向下滚动，您会找到一个名为“Banner图”的区域。在这里，您可以点击上传按钮，选择您准备好的Banner图片。
- 您可以上传单张图片作为页面的固定Banner。
- 如果您的设计需要轮播效果，AnQiCMS 也支持您上传多张图片。系统会将它们作为一组Banner图进行管理，方便您在前端模板中调用。
- 为了确保视觉效果统一且美观，建议您上传尺寸和比例一致的图片。
完成图片上传后，记得点击页面底部的“确定”或“保存”按钮，将您的更改保存到系统中。
第二步：设计或修改单页面模板以显示Banner
后台设置好Banner图片后，接下来我们需要在前端模板中告诉 AnQiCMS 如何展示它们。AnQiCMS 的模板文件通常位于 /template 目录下。单页面的默认模板路径通常是 page/detail.html，但您也可以为特定页面指定自定义模板。
我们将主要使用 pageDetail 标签来获取单页面的图片数据。这个标签非常灵活，能够抓取页面所有相关信息。
1. 显示单张Banner图片
如果您只希望显示您上传的第一张Banner图片，并将其作为页面的主要视觉元素，可以这样做：
{%- pageDetail bannerImages with name="Images" %}
{%- if bannerImages %}
{%- set pageBanner = bannerImages[0] %}
<div class="page-banner" style="background-image: url('{{ pageBanner }}'); background-size: cover; background-position: center;">
{# 您可以在这里叠加页面标题、简介等内容 #}
<div class="container">
<h1>{% pageDetail with name="Title" %}</h1>
<p>{% pageDetail with name="Description" %}</p>
</div>
</div>
{%- endif %}
这段代码首先使用 {% pageDetail bannerImages with name="Images" %} 获取单页面关联的所有Banner图片列表。bannerImages 会是一个包含所有图片URL的数组。接着，通过 {% set pageBanner = bannerImages[0] %} 获取列表中的第一张图片URL，并将其作为背景图应用到一个 div 元素上。这样，您就可以在这个 div 内部自由地叠加页面的标题、描述等文本内容了。
2. 显示多张Banner图片（实现轮播基础）
如果您上传了多张Banner图片，并希望在前端实现轮播效果，AnQiCMS 会将这些图片URL全部提供给您。您需要结合前端的 JavaScript 轮播库（如 Swiper, Owl Carousel 等）来驱动它们。这里展示如何获取所有图片并输出：
{%- pageDetail pageImages with name="Images" %}
{%- if pageImages %}
<div class="swiper-container mySwiper"> {# 假设您使用了Swiper轮播库 #}
<div class="swiper-wrapper">
{%- for item in pageImages %}
<div class="swiper-slide">
<img src="{{ item }}" alt="{% pageDetail with name="Title" %} Banner {{ forloop.Counter }}" />
</div>
{%- endfor %}
</div>
{# 添加分页器和导航按钮，需要根据您选择的轮播库文档进行配置 #}
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
{# 别忘了引入Swiper的JS和CSS文件，并初始化Swiper实例 #}
<script>
var swiper = new Swiper(".mySwiper", {
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
{%- endif %}
这里，我们通过循环 pageImages 数组，将每一张图片输出为一个轮播项。具体的前端轮播逻辑（如自动播放、指示器、导航按钮等）则需要依赖您选择的第三方 JavaScript 库来实现。
第三步：结合其他内容提升Banner区域
除了单纯的图片展示，通常我们还会希望在Banner区域叠加一些文本信息，以达到更好的视觉效果和信息传达效率。
- 页面标题和描述： 页面的标题 (
{% pageDetail with name="Title" %}) 和简介 ({% pageDetail with name="Description" %}) 是最常见的叠加元素。它们可以直接通过pageDetail标签获取。 - 自定义字段： 如果您的单页面模型中定义了其他自定义字段（例如，“Banner副标题”、“Call-to-Action按钮文字”等），也可以通过类似
{% pageDetail with name="您的自定义字段名" %}的方式获取并展示。这些自定义字段可以在后台编辑单页面时，在“其他参数”部分进行设置。 - 安全输出： 值得注意的是，所有来源于后台富文本编辑器的文本内容，为了安全和正确显示 HTML 格式，通常需要在输出时加上
|safe过滤器。例如，{{ pageContent|safe }}。
通过这些灵活的配置和模板调用，AnQiCMS 让您能够轻松打造出既美观又实用的单