如何在模板中显示后台自定义的横幅（Banner）图片列表？

网站的横幅（Banner）图片是吸引访客目光、展示核心信息的重要元素。在安企CMS中，您可以灵活地在后台自定义这些横幅图片，并将其优雅地呈现在网站的各个模板位置。下面，我们将详细探讨如何在模板中显示后台自定义的横幅图片列表，让您的网站更具吸引力。

后台横幅图片的配置与管理

在安企CMS的后台，横幅图片的管理主要分为两种情况：全局首页横幅和特定内容横幅。

  1. 全局首页横幅（Banner）管理 这通常指的是网站首页或其他公共区域需要展示的轮播图或重要宣传图。您可以在后台找到专门的“横幅（Banner）管理”或类似的模块进行配置。在这里，您可以上传多张图片，为每张图片设置链接地址、图片描述（用于SEO和辅助说明）、以及指定它们所属的“分组”。通过分组功能，您可以将不同用途的横幅进行归类，例如“首页大图”、“侧边栏广告”等，这为前端模板的灵活调用提供了基础。

  2. 特定内容（分类、单页面）横幅管理 安企CMS还提供了为特定内容（如文章分类、产品分类或独立的单页面）设置专属横幅的功能。

    • 当您编辑一个分类时，在分类的编辑界面会有一个“Banner图”的选项。您可以在这里为该分类上传一组或多张图片，这些图片只会在该分类及其子分类的页面中被调用显示。
    • 同样，在编辑单页面时，也有一个“Banner图”的设置项。您可以为“关于我们”、“联系方式”等独立页面设置独特的横幅图片。 在上传这些特定横幅时，请务必注意图片尺寸的一致性，以确保在前端展示时视觉效果协调美观。

在模板中显示全局横幅列表

要在模板中显示您在后台设置的全局横幅列表，安企CMS提供了一个非常便捷的标签：bannerList。

这个标签的使用方式非常直观。您可以通过它来获取一个横幅图片的集合，然后通过循环遍历的方式将它们呈现在页面上。

基本的调用示例如下：

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

在上面的代码中：

  • {% bannerList banners %} 定义了一个名为 banners 的变量来存储获取到的横幅列表。
  • {% for item in banners %} 循环遍历这个列表，每次迭代都会把当前横幅的数据赋值给 item 变量。
  • item 变量包含了横幅的各种信息，例如：
    • {{item.Logo}}：横幅图片的URL地址。
    • {{item.Link}}：横幅点击后跳转的链接地址。
    • {{item.Alt}}：图片的Alt属性，对于SEO和无障碍访问非常重要。
    • {{item.Title}}：横幅标题，可用于显示图片说明或文字覆盖。
  • target="_blank" 确保点击链接时在新窗口打开，提高用户体验。

按分组调用横幅

如果您在后台为横幅设置了不同的“分组”，可以通过 type 参数来精确调用特定分组的横幅。例如，如果您创建了一个名为“首页轮播”的分组，可以这样调用：

{% bannerList banners with type="首页轮播" %}
    {% for item in banners %}
    <a href="{{item.Link}}" target="_blank">
        <img src="{{item.Logo}}" alt="{{item.Alt}}" />
        <h5>{{item.Title}}</h5>
    </a>
    {% endfor %}
{% endbannerList %}

这样，只有属于“首页轮播”分组的横幅图片才会被加载并显示在模板中。

特殊样式处理：例如第一个横幅

在某些轮播图中，您可能希望第一个横幅有特殊的样式（例如“active”状态）。您可以使用 for 循环中的 forloop.Counter 属性来实现这个效果：

{% bannerList banners with type="首页轮播" %}
    {% 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 时，表示当前是循环中的第一个元素，为其添加 active 类，方便通过CSS定义其样式。

在模板中显示特定内容的横幅列表（分类/单页面）

对于您在分类或单页面设置的专属横幅，调用方式略有不同。这些横幅图片通常作为该内容自身的属性，因此需要使用 categoryDetail 或 pageDetail 标签来获取。

无论是分类还是单页面，它们都有一个 Images 字段，用于存储上传的多张横幅图片，这个字段返回的是一个图片URL的数组。

调用分类横幅图片：

{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %} {# 判断是否有图片上传 #}
<ul>
{% for item in categoryImages %}
  <li>
    <img src="{{item}}" alt="{% categoryDetail with name="Title" %}" />
  </li>
{% endfor %}
</ul>
{% endif %}

这里，categoryDetail 标签获取当前分类的详细信息，并通过 name="Images" 获取到横幅图片数组。然后，我们通过 for 循环遍历 categoryImages 数组，将每张图片显示出来。

调用单页面横幅图片：

{% pageDetail pageImages with name="Images" %}
{% if pageImages %} {# 判断是否有图片上传 #}
<ul>
{% for item in pageImages %}
  <li>
    <img src="{{item}}" alt="{% pageDetail with name="Title" %}" />
  </li>
{% endfor %}
</ul>
{% endif %}

其逻辑与分类横幅调用完全一致，只是将 categoryDetail 替换为 pageDetail。

只显示第一张横幅或作为背景图

有时，您可能只需要显示特定横幅中的第一张图片，或者将其用作页面的背景图。您可以结合 if 语句和数组索引来实现：

{% pageDetail bannerImages with name="Images" %}
{% if bannerImages %}
  {% set pageBanner = bannerImages[0] %} {# 获取数组中的第一张图片URL #}
  <div class="page-banner" style="background-image: url('{{pageBanner}}'); background-size: cover; background-position: center;">
    {# 这里可以放置其他页面内容，例如页面标题等 #}
  </div>
{% endif %}

这段代码会获取单页面的第一张横幅图片，并将其设置为一个 div 元素的背景图，实现美观的视觉效果。

实操小贴士

  • 图片优化：无论哪种横幅，大尺寸的图片会严重影响网站加载速度。在上传图片前，建议对其进行压缩处理，并考虑使用WebP等现代图片格式。安企CMS后台内容设置也提供了自动压缩大图的功能，开启后可以省去部分手动压缩的步骤。
  • Alt 属性：为 <img> 标签添加有意义的 alt 属性非常重要。这不仅有助于搜索引擎理解图片内容，还能在图片无法加载时提供文字替代，提升无障碍访问性。
  • 响应式设计：确保您的CSS样式能让横幅图片在不同设备（PC、平板、手机）上都能良好显示，例如使用 max-width: 100%; height: auto; 等样式规则。

通过上述方法，您可以轻松地在安企CMS模板中调用和展示后台自定义的各种横幅图片列表，为您的网站增添生动和活力。

常见问题 (FAQ)

Q1: 我在后台上传了横幅图片，但为什么前台模板没有显示？ A1: 首先，请检查您是否使用了正确的模板标签 (bannerList 或 categoryDetail/pageDetail 结合 Images 字段)。其次，如果使用了 bannerList 且指定了 type 参数，请确保后台横幅的“分组名称”与模板中的 type 值完全匹配。最后，检查图片是否成功上传且图片地址有效，并清除浏览器缓存或安企CMS的系统缓存后再次尝试。

Q2: 如何只显示分类或单页面横幅列表中的第一张图片？ A2: 当通过 categoryDetail 或 pageDetail 标签获取到 Images 字段时，它是一个图片URL的数组。您可以通过数组索引 [0] 来访问第一张图片。例如，{% set firstBanner = categoryImages[0] %} 即可获取第一张图片的URL。在使用前最好加一个 {% if categoryImages %} 判断，避免在没有图片时报错。

Q3: 我能否在不同设备（如PC和手机）上显示不同的横幅图片？ A3: 安企