如何在AnQiCMS中为图片资源添加分类，并按分类进行前端显示管理？

在安企CMS（AnQiCMS）中，有效地组织和管理您的网站图片资源是提升运营效率和前端展示质量的关键。图片分类功能不仅能让后台管理工作变得有条不紊，更能为前端页面内容的呈现提供灵活的基础。下面，我们就来详细了解如何在AnQiCMS中为图片资源添加分类，并巧妙地在前端进行显示管理。

后台操作：为图片资源添加分类

AnQiCMS 为图片资源提供了直观的分类管理功能，这有助于您像管理文章一样，对图片进行归类，方便查找和使用。

首先，您需要登录AnQiCMS的后台管理界面。在左侧导航栏中，找到并点击“页面资源”，然后选择“图片资源管理”。进入图片资源管理页面后，您会看到所有已上传的图片列表。

要为图片资源创建分类，请点击页面上方的“分类管理”按钮。在这里，您可以添加新的图片分类。给分类起一个清晰的名称，例如“产品展示图”、“新闻配图”、“网站Logo”、“Banner图”等，这样在后续管理时能一目了然。目前AnQiCMS的图片资源分类支持扁平化管理，您可以专注于建立实用的分类层级。

当您创建好分类后，返回“图片资源管理”页面。您可以批量选择需要归类的图片，然后点击页面上方的“批量转移图片到指定分类”功能。选择您之前创建好的分类，即可将这些图片移动到相应的分类下。这个过程非常高效，尤其当您有大量图片需要整理时，能够大大节省时间。

图片分类的主要目的是为了后台管理的便捷性。通过分类，您可以迅速筛选出所需图片，例如只查看“产品展示图”或“Banner图”，这对于内容创作和更新来说，是极其重要的基础工作。

前端显示：如何利用分类组织图片显示

在AnQiCMS中，图片通常是作为某个具体内容的组成部分进行前端展示的，例如一篇新闻文章的配图、一个产品页面的多角度展示图、一个单页面的Banner等。因此，前端图片的“按分类显示管理”，更多地体现在如何将这些图片与您的网站内容（文章、产品、单页面、内容分类本身）关联起来，并通过内容分类来实现图片集合的展示。

尽管AnQiCMS的图片资源分类主要用于后台组织，但您可以结合内容管理中的“文档分类”功能，实现前端灵活的图片展示。以下是几种常见的前端展示策略：

1. 在内容中调用图片并按内容分类展示

当您在创建“文档”（例如文章、产品）或“单页面”时，会选择或上传图片作为该内容的一部分，比如缩略图、首图或组图。这些图片会与具体的内容绑定。

  • 调用内容中的图片：

    • 在文章或单页面详情页，您可以使用 archiveDetail 或 pageDetail 标签来获取当前内容关联的图片。
    • 例如，要显示一篇文档的封面首图和组图，您可以这样编写模板代码：
    {% archiveDetail currentArchive with name="Images" %} {# 获取当前文档的组图 #}
{% if currentArchive %}
<div class="image-gallery">
    {% for imageUrl in currentArchive %}
    <img src="{{ imageUrl }}" alt="文档图片" />
    {% endfor %}
</div>
{% endif %}


<img src="{% archiveDetail with name='Logo' %}" alt="文档封面首图" /> {# 获取文档封面首图 #}

  • 按内容分类组织图片集合：

    • 如果您想在前端展示一个“图片画廊”或“作品集”，您可以将每组图片作为一篇“文章”或一个“产品”的内容来管理。
    • 然后，通过“文档分类”来组织这些“画廊”或“作品集”。例如，创建一个“作品集”内容模型，下设“摄影作品”、“插画设计”等分类。
    • 在前端模板中，您可以使用 categoryList 标签来遍历这些“作品集”分类，然后在每个分类下使用 archiveList 标签来获取和显示对应的内容（即包含图片的“作品”）。

    ”`twig {# 遍历作品集分类 #} {% categoryList galleryCategories with moduleId=“您的作品集模型ID” parentId=“0” %} 

    {% for category in galleryCategories %}
<h2 class="category-title"><a href="{{ category.Link }}">{{ category.Title }}</a></h2>
<div class="category-galleries">
    {# 获取该分类下的作品（文档）列表 #}
    {% archiveList artworks with categoryId=category.Id type="list" limit="