安企CMS如何显示文档的封面图、缩略图或多图集？

安企CMS如何显示文档的封面图、缩略图或多图集，是许多运营者关心的问题。一个视觉上吸引人的网站，离不开精心排版的图片。好在安企CMS在这方面提供了非常灵活且强大的功能，无论是为文章设置一张醒目的封面图、自动生成用于列表展示的缩略图，还是构建一个内容丰富的多图集，都能轻松实现。

一、文档图片的基础设置与智能处理

当我们向安企CMS后台添加或编辑文档时，会发现几个与图片相关的关键设置项，它们共同构成了文档图片展示的基础。

首先是“文档图片”字段，这里通常用来上传文档的缩略图。如果你上传了一张图片，它就会作为该文档的主要缩略图。但即使你没有手动上传，安企CMS也足够智能：如果文档内容中包含图片，系统会自动提取第一张图片作为文档的缩略图。这极大地简化了日常发布流程，减少了重复操作。

除了手动上传，安企CMS还在全局设置的“内容设置”中提供了更精细的图片处理选项，让你可以根据网站的整体风格和性能需求进行调整：

  • 缩略图处理方式和尺寸： 你可以定义缩略图是按最长边等比缩放、按最长边补白（图片不足部分用白色填充）、还是按最短边裁剪。同时，还能设置统一的缩略图尺寸，确保网站视觉风格的一致性。
  • 默认缩略图： 如果文档既没有上传图片，内容中也没有图片，系统可以调用你预设的“默认缩略图”，避免页面出现图片缺失的空白。
  • WebP图片格式和自动压缩： 为了优化网站加载速度和节省存储空间，你可以选择开启WebP图片格式转换和自动压缩大图功能。开启后，上传的图片会自动转换并压缩到指定宽度，这些处理都是在后台自动完成的。
  • 批量重新生成缩略图： 如果你修改了缩略图的处理方式或尺寸，不必逐一重新上传，安企CMS提供了“批量重新生成缩略图”功能，一键即可更新全站的缩略图，非常省心。

这些后台设置确保了无论图片从何而来，都能以最适合网站展示的方式呈现。

二、在文档详情页灵活展示图片

在文档的详细内容页，我们通常需要展示最完整的图片信息，可能是一张大气的封面图，也可能是一组展示细节的多图集。安企CMS通过archiveDetail标签，让我们能够轻松地调用这些图片。

  • 调用封面首图（Logo）： Logo通常是指文档最主要的封面大图。在文档详情页中，你可以直接通过{{archive.Logo}}或使用{% archiveDetail with name="Logo" %}标签来获取并显示它。这张图通常用于页面的顶部，给用户留下第一印象。

    {# 示例：展示文档封面首图 #}
<div class="document-cover">
    <img src="{% archiveDetail with name='Logo' %}" alt="{% archiveDetail with name='Title' %}" />
</div>

  • 调用缩略图（Thumb）： 虽然在详情页可能不常用，但Thumb字段依然可用，它提供了经过后台设置处理的缩略图版本。如果你的详情页布局需要一个较小的图片，可以直接调用：

    {# 示例：展示文档缩略图（如果需要） #}
<div class="document-thumb">
    <img src="{% archiveDetail with name='Thumb' %}" alt="{% archiveDetail with name='Title' %}" />
</div>

  • 展示多图集（Images）： 当一个文档需要展示一组图片时，例如产品多角度展示、活动照片集等，Images字段就派上用场了。这是一个数组，包含了多张图片的地址，你可以通过循环来逐一展示它们。

    {# 示例：展示文档内置的多图集 #}
<div class="document-gallery">
    {% archiveDetail archiveImages with name="Images" %}
    {% for imgUrl in archiveImages %}
        <img src="{{ imgUrl }}" alt="图片描述" />
    {% endfor %}
    {% endarchiveDetail %}
</div>

  • 通过自定义字段实现更灵活的多图集： 安企CMS的内容模型支持自定义字段，如果你希望有更个性化的图片集，可以在后台为文档模型添加一个“多图集”类型的自定义字段（例如命名为product_gallery）。在文档详情页中，你可以通过archiveDetail标签来获取这个自定义字段的值，它同样是一个图片URL数组，然后进行循环展示：

    {# 示例：展示通过自定义字段实现的图集（假设自定义字段名为product_gallery） #}
<div class="product-gallery">
    {% archiveDetail customGallery with name="product_gallery" %}
    {% for img in customGallery %}
        <img src="{{ img }}" alt="产品详情图" />
    {% endfor %}
    {% endarchiveDetail %}
</div>

三、在文档列表页简洁展示图片

在文章列表、产品列表等页面，图片通常以缩略图的形式出现，既能吸引用户，又能保持页面的整洁和加载速度。archiveList标签是这里的主角，它帮助我们批量获取文档数据，并在循环中展示每篇文档的缩略图。

在archiveList循环中，每个文档项item都会包含Logo和Thumb字段，你可以根据设计需求选择使用：

”`twig {# 示例：在文档列表中展示缩略图 #} 

    {% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<li class="document-item">
    <a href="{{item.Link}}">
        <div class="item-image">
            {% if item.Thumb %} {# 优先使用缩略图 #}
                <img src="{{item.Thumb}}" alt="{{item.Title}}" />
            {% elif item.Logo %} {# 如果没有缩略图，则使用封面首图 #}
                <img src="{{item.Logo}}"