如何配置相册首页（gallery）仅展示各分类的单张图片？

核心实现方案 #

1. 数据预处理：按分类分组并筛选代表图 #

首先对原始图片数据做分组处理，确保每个分类仅保留一张代表性图片（推荐优先取分类内最新的图片，或支持手动设置分类封面）。以JavaScript为例，可通过reduce方法完成分组逻辑：

// 示例原始图片数据，包含分类、拍摄日期、图片地址等字段
const allPhotos = [
  { id: 1, category: "婴儿期", imgUrl: "baby_01.jpg", shootDate: "2023-02-15" },
  { id: 2, category: "婴儿期", imgUrl: "baby_02.jpg", shootDate: "2023-03-01" },
  { id: 3, category: "幼儿期", imgUrl: "toddler_01.jpg", shootDate: "2023-06-10" },
  { id: 4, category: "幼儿期", imgUrl: "toddler_02.jpg", shootDate: "2023-07-05" }
];

// 按分类分组，并筛选每个分类的最新图片
const categoryFeaturedPhotos = Object.values(
  allPhotos.reduce((grouped, photo) => {
    // 若当前分类无数据，或当前图片日期晚于已存图片，则替换为最新的
    if (!grouped[photo.category] || new Date(photo.shootDate) > new Date(grouped[photo.category].shootDate)) {
      grouped[photo.category] = photo;
    }
    return grouped;
  }, {})
);

2. 模板渲染：基于分组后的数据生成卡片 #

将预处理后的categoryFeaturedPhotos作为渲染数据源，替换原有的全量图片循环，同时强化分类入口引导：

<!-- 以Vue模板为例，其他框架逻辑类似 -->
<template>
  <div class="gallery-container">
    <div 
      v-for="photo in categoryFeaturedPhotos" 
      :key="photo.id" 
      class="category-card"
    >
      <h2 class="category-title">{{ photo.category }}</h2>
      <img 
        :src="photo.imgUrl" 
        :alt="`${photo.category}成长记录`"
        class="featured-img"
      >
      <button class="view-more-btn" @click="navigateToCategory(photo.category)">
        查看全部 {{ photo.category }} 照片
      </button>
    </div>
  </div>
</template>

额外优化建议 #

• 图片资源优化：为首页生成专门的缩略图（尺寸适配首屏卡片），使用WebP/AVIF等高效格式，减少加载耗时；开启图片懒加载，仅当卡片进入视口时加载图片。
• 分类交互强化：给分类卡片添加hover动效（如轻微缩放、阴影加深），提升页面质感；支持点击卡片直接跳转至分类详情页，降低操作门槛。
• 自定义封面支持：在上传图片时增加「设置为分类封面」的选项，手动选择最具代表性的图片作为分类入口图，比自动取最新图更灵活。
• 响应式布局适配：针对移动端、平板、桌面端设置不同的卡片排列规则（如移动端单列、桌面端3-4列），保证全设备浏览体验一致。
• 加载状态优化：添加图片占位骨架屏，避免页面加载时出现空白，提升用户感知体验。

内容的提问来源于stack exchange，提问作者David Henson