如何为AnQiCMS网站的文章、产品添加缩略图，并控制其前端显示样式？

在AnQiCMS中管理网站内容，缩略图无疑是提升用户体验和页面吸引力的重要元素。无论是吸引用户点击的文章，还是展示产品特色的详情页，一张恰当的缩略图都能发挥巨大作用。更棒的是，AnQiCMS提供了直观的后台操作和灵活的模板标签，让我们能够轻松地为文章和产品添加缩略图，并精细控制它们在前端的展现样式。

接下来，我们将一起了解如何在AnQiCMS中玩转缩略图，从上传到最终的显示，每一步都清晰明了。

一、在后台为文章与产品添加缩略图

为文章或产品添加缩略图是一个简单直接的过程。当我们在后台“内容管理”中点击“添加文档”或编辑现有文档时，会看到“文档图片”这个选项。

1. 手动上传或选择图片：在这里，你可以直接上传一张本地图片作为缩略图，也可以从“图片库”中选择之前上传过的图片。选择一张清晰、内容相关的图片至关重要。
2. 系统自动提取：AnQiCMS非常智能。如果你在发布文档时没有手动上传或选择缩略图，但文章内容中包含了图片，系统会自动将内容里的第一张图片提取出来，作为这篇文档的缩略图。这省去了不少重复操作。

除了文章和产品，AnQiCMS的“文档分类”和“页面管理”（如“关于我们”这类单页面）也支持添加缩略图。这些缩略图通常用于分类列表页或单页面的头部区域，以增强视觉效果或作为导航的标识。操作方式与文章、产品缩略图类似，在对应的编辑界面找到“缩略图”或“Banner图”选项即可。

二、精细控制缩略图的全局处理样式

缩略图的显示不仅仅是上传那么简单，AnQiCMS在“后台设置”下的“内容设置”中，提供了强大的全局控制选项，决定了缩略图上传后如何被系统处理和优化，这直接影响了它们在前端的最终展现效果。

在这里，你可以调整以下几个关键设置：

• 缩略图处理方式：这是最核心的样式控制。AnQiCMS提供了三种灵活的处理方式来适应不同的设计需求：
  • 按最长边等比缩放：这种方式会保持图片的原始比例，将最长的一边缩放到指定尺寸，另一边按比例自动调整。它能确保图片内容完整显示，但实际尺寸可能会有所浮动。
  • 按最长边补白：如果你希望所有缩略图都保持严格一致的宽高尺寸，同时又要完整显示图片内容，那么“按最长边补白”是理想选择。系统会将图片等比缩放到最长边，不足部分用白色（或其他预设颜色）填充，使图片居中显示，达到统一的视觉效果。
  • 按最短边裁剪：这种方式适用于需要固定尺寸的缩略图，且可以接受部分图片边缘被裁剪的情况。系统会以图片中心为基准，将最短边缩放到指定尺寸，并裁剪掉最长边超出部分，确保缩略图填充整个区域。
• 缩略图尺寸：你可以根据前端模板的设计，设置一个最适合的缩略图宽度和高度。合理设置尺寸可以有效减少图片体积，加快页面加载速度，提升用户体验。
• 默认缩略图：当某篇文档没有上传专属缩略图，或系统未能从内容中提取图片时，你可以设置一张“默认缩略图”作为占位符。这有助于保持网站视觉的一致性，避免出现空白图片。
• 批量重新生成缩略图：当你修改了上述的缩略图处理方式或尺寸后，可能需要让所有旧的缩略图都按照新的规则重新生成。AnQiCMS提供了“批量重新生成缩略图”功能，一键操作即可更新全站的缩略图，非常便捷。

这些后台设置，为我们提供了统一管理网站缩略图外观的能力，无需每次上传都手动调整。

三、在前端模板中灵活展现缩略图

在AnQiCMS中，前端模板使用类似Django模板引擎的语法，通过特定的标签来调用后台数据。要将缩略图展示在网站上，我们需要在模板文件中使用相应的标签。

通常，模板文件位于/template目录下，静态资源（CSS、JS、图片）则在/public/static/目录。数据变量使用{{变量名}}，逻辑控制如条件判断和循环使用{% 标签 %}。

1. 在文章/产品详情页显示缩略图

在文章或产品的详情页面，我们可以通过archiveDetail标签来获取当前文档的详细信息，包括缩略图。

• 调用文档缩略图（Thumb）： {% archiveDetail with name="Thumb" %} 或者，如果你已将当前文档详情赋值给archive变量（通常在详情页会自动提供），可以直接使用： <img src="{{archive.Thumb}}" alt="{{archive.Title}}" /> Thumb通常是指系统根据后台设置处理过的缩略图。

• 调用文档封面首图（Logo）： 有些情况下，你可能需要显示更原始或尺寸更大的图片作为主图，而不是经过缩放或裁剪的缩略图。 {% archiveDetail with name="Logo" %} 或者： <img src="{{archive.Logo}}" alt="{{archive.Title}}" /> Logo通常指文档的原始封面图或主图。

2. 在列表页显示缩略图

在文章列表页、产品列表页或相关推荐列表等，我们通常需要遍历多篇文档并显示它们的缩略图。这可以通过archiveList标签结合for循环来实现。

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            {% if item.Thumb %}
            <img alt="{{item.Title}}" src="{{item.Thumb}}">
            {% endif %}
            <div>{{item.Description}}</div>
        </a>
    </li>
    {% empty %}
    <li>暂无内容</li>
    {% endfor %}
{% endarchiveList %}

在这个例子中，{{item.Thumb}}会显示每篇文章或产品的缩略图。我们还用{% if item.Thumb %}进行了判断，确保只有当缩略图存在时才显示图片标签，避免页面出现错误的图片链接。

3. 在分类和单页中显示缩略图或Banner图

分类页面和单页面也有自己的缩略图或Banner图片，可以用来丰富页面的视觉效果。

• 分类缩略图（Thumb）： {% categoryDetail with name="Thumb" %} 或者，如果页面提供了category变量： <img src="{{category.Thumb}}" alt="{{category.Title}}" />