如何在AnQiCMS的单页面中显示自定义的Banner图片和内容？

在网站运营中，精心设计的单页面往往承担着品牌展示、产品介绍或特定活动推广的重要作用。一个引人注目的Banner区域，能够迅速抓住访客的注意力，传达核心信息。AnQiCMS 作为一个灵活的内容管理系统，提供了非常便捷的方式，让您在单页面中轻松设置并展示自定义的Banner图片与内容。

接下来，我们将一起探索如何在 AnQiCMS 中实现这一功能。

第一步：在后台为单页面上传Banner图片

AnQiCMS 提供了一个直观的界面来管理您的静态页面。要为单页面设置Banner，您需要先登录后台。

  1. 进入页面管理： 登录 AnQiCMS 后台后，您会在左侧导航栏中看到“页面资源”这个菜单项，点击它，然后选择“页面管理”。这里列出了您网站所有的单页面。
  2. 选择或创建单页面： 您可以选择编辑一个已有的单页面，例如“关于我们”或“联系方式”，也可以点击“添加单页面”来新建一个页面。
  3. 上传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 让您能够轻松打造出既美观又实用的单