AnQiCMS如何通过模板标签自定义显示图片轮播（Banner）？

AnQiCMS 作为一个高效、可定制的企业级内容管理系统，在内容展示的灵活性上有着显著优势。对于网站中常见的图片轮播（Banner）功能，AnQiCMS 提供了多种通过模板标签自定义显示的方式，让您能够根据不同页面和业务需求，轻松实现丰富多样的 Banner 展示效果。

理解 AnQiCMS 的 Banner 管理机制

在 AnQiCMS 中，图片轮播的实现并非单一路径，而是提供了非常灵活的机制，您可以根据不同的场景需求来选择最合适的管理方式。主要有以下几种实现路径：

  1. 全局或分组轮播（Home/General Banner）：适用于网站的首页、通用页面或特定主题模块的轮播。这类轮播图通常在后台的专门区域（如“网站导航设置”中可能有相关入口，或者专门的“Banner管理”模块）进行统一管理，并可通过模板标签进行分组调用。
  2. 分类专属轮播（Category Banner）：针对特定产品分类或文章分类设置的轮播图。这些 Banner 直接绑定到分类详情中，仅在该分类及其子页面显示。
  3. 单页面专属轮播（Single Page Banner）：为“关于我们”、“联系我们”等独立单页面定制的轮播图。它们存储在单页面的内容中，只在该页面生效。

接下来，我们将逐一探讨如何通过 AnQiCMS 的模板标签来实现这些自定义的图片轮播显示。

核心：使用 bannerList 标签实现全局或分组轮播

如果您希望在网站的首页或者某个通用区域展示一组轮播图片，bannerList 标签是您的首选。这个标签能够直接从后台获取您配置好的 Banner 列表。

基本用法：获取默认或首页 Banner

最简单的用法是直接调用 bannerList 标签，它会获取系统中默认或首页配置的 Banner 图片：

{% bannerList banners %}
    {% for item in banners %}
    <a href="{{item.Link}}" target="_blank">
        <img src="{{item.Logo}}" alt="{{item.Alt}}" />
        <h5>{{item.Title}}</h5>
        <p>{{item.Description}}</p>
    </a>
    {% endfor %}
{% endbannerList %}

在这段代码中：

  • {% bannerList banners %} 定义了一个名为 banners 的变量，它将包含所有默认 Banner 的数据。
  • {% for item in banners %} 循环遍历 banners 数组中的每一个 Banner 项。
  • item.Link：轮播图点击后跳转的链接地址。
  • item.Logo：轮播图的图片地址。
  • item.Alt：图片的 alt 属性文本，用于图片无法显示时的替代文本，也有利于 SEO。
  • item.Title：通常是 Banner 的标题或简短文字。
  • item.Description：Banner 的详细描述文本。

您还可以根据循环的次数添加一些动态效果。例如，为第一个 Banner 添加一个 active 类，这在许多前端轮播组件（如 Bootstrap Carousel）中很常见：

{% bannerList banners %}
    {% for item in banners %}
    <a class="{% if forloop.Counter == 1 %}active{% endif %}" href="{{item.Link}}" target="_blank">
        <img src="{{item.Logo}}" alt="{{item.Alt}}" />
        <h5>{{item.Title}}</h5>
    </a>
    {% endfor %}
{% endbannerList %}

这里的 forloop.Counter 会在每次循环时返回当前的迭代次数（从 1 开始）。

自定义分组：实现特定区域的 Banner 轮播

AnQiCMS 强大之处在于，您不仅可以设置全局