如何在AnQiCMS中为单页面配置Banner图和缩略图以丰富其视觉显示？

在网站内容日益丰富的今天，仅仅依靠文字来传达信息已经远远不够。视觉元素，如醒目的Banner图和富有表现力的缩略图，能在第一时间吸引访客的注意力，提升网站的专业度和用户体验。对于AnQiCMS的用户来说，为单页面（例如“关于我们”、“联系我们”或“服务介绍”等）巧妙配置这些视觉元素，是一个简单却能带来巨大收益的操作。AnQiCMS深知内容展示的重要性，提供了直观的后台管理界面和灵活的模板调用机制，让您轻松为网站增添个性化的视觉魅力。

接下来，我们将详细了解如何在AnQiCMS中为单页面配置Banner图和缩略图，并将其呈现在网站上。

后台配置：为单页面添加Banner图和缩略图

首先，您需要登录AnQiCMS的后台管理界面，进行相应的图片上传和关联操作。

1. 导航至页面管理

登录后台后，请导航到左侧菜单栏的【页面资源】模块，然后点击【页面管理】。在这里，您会看到所有已创建的单页面列表。

2. 编辑或创建单页面

您可以选择一个现有的单页面进行编辑，或者点击“添加单页面”按钮来创建一个全新的页面。进入单页面的编辑界面后，您会看到标题、内容等基础配置项。向下滚动页面，您将找到专门用于配置视觉元素的区域。

3. 配置Banner图

在单页面编辑界面的下方，您会看到一个名为“Banner图”的区域。

Banner图通常用于页面顶部，以大幅图片的形式展示，起到烘托主题、营造氛围的作用。AnQiCMS允许您为单页面上传多张图片作为Banner图，这非常适合实现页面顶部轮播图的效果。

• 上传/选择图片：点击Banner图区域的上传按钮，您可以从系统已有的图片库中选择合适的图片，或者直接上传本地的新图片。
• 优化建议：为了确保网站在不同设备上都有良好的显示效果，建议您上传高质量但文件大小适中的图片。如果打算使用多张图片进行轮播，请尽量保持所有Banner图的宽高比或尺寸一致，这样可以避免页面布局在切换时出现跳动。

4. 配置缩略图

紧接着Banner图配置区域的下方，您会找到一个“缩略图”的配置项。

单页面的缩略图通常尺寸较小，它主要用于在网站其他部分引用此单页面时，作为内容的视觉标识。例如，在首页的推荐模块、相关内容列表、网站地图或是友情链接区块中，单页面的缩略图能提供一个快速识别内容的视觉线索。

• 上传/选择图片：与Banner图类似，您可以点击上传区域，从图片库中挑选一张图片，或者上传一张新的图片作为缩略图。
• 优化建议：缩略图应能简洁明了地概括页面主题。如果您的网站对缩略图有统一的尺寸要求，可以在【内容设置】中进行全局配置，AnQiCMS也能根据您的设置自动处理图片。

完成Banner图和缩略图的配置后，记得点击页面底部的“确定”或“保存”按钮，以保存您的修改。

模板中调用和显示：让图片在前端展现

在后台配置好图片后，下一步就是确保它们能在您的网站前端正确显示。AnQiCMS采用类似Django的模板引擎语法，通过简洁的标签，您可以轻松将后台配置的图片呈现在页面上。

1. 定位模板文件

对于单页面，默认的模板文件通常位于您当前使用模板主题的 page/detail.html 路径下。如果您在后台为某个特定单页面设置了自定义模板（例如，将“关于我们”页面指定为 page/about.html），那么您需要编辑相应的自定义模板文件。

2. 使用标签调用图片

在模板文件中，您可以通过 pageDetail 标签来获取单页面配置的各项数据，包括我们刚刚上传的Banner图和缩略图。

• 调用缩略图 (Thumb)： 要调用单页面的缩略图，您可以使用 pageDetail 标签并指定 name="Thumb"。这会输出后台配置的缩略图图片地址。

  {% pageDetail pageThumb with name='Thumb' %}
  {% if pageThumb %}
      <img src="{{ pageThumb }}" alt="{% pageDetail with name='Title' %}" />
  {% endif %}
  {% endpageDetail %}
  

  这里我们先将缩略图地址赋值给 pageThumb 变量，然后通过 if pageThumb 判断图片是否存在再进行显示，这样可以避免图片路径为空时产生的无效标签。alt 属性建议使用单页面的标题，这有利于SEO。

• 调用主要图片/封面图 (Logo)： 如果后台的“缩略图大图”（即单张较大的封面图，在文档中被称为Logo字段）也配置了图片，您可以通过 name="Logo" 来调用。

  {% pageDetail pageLogo with name='Logo' %}
  {% if pageLogo %}
      <img src="{{ pageLogo }}" alt="{% pageDetail with name='Title' %}" />
  {% endif %}
  {% endpageDetail %}
  

• 调用Banner组图 (Images)： 对于在后台上传的多张Banner图，它们会被AnQiCMS作为一个图片组存储在 Images