简单的瀑布流摄影作品展示站，图片储存在免费的 Cloudflare R2

这是一个简单的 摄影作品展示站，只需要将图片放在免费的 Cloudflare R2 上（或其他支持 AWS S3 的对象存储），即可在这里展现你的精选图片。在这里你可以通过 瀑布流 的形式浏览图片，也可以 点开大图 ，查看光圈 / 快门 / ISO 等 EXIF 信息。网站基于 Node.js ，使用 Material Design 风格的 响应式设计，支持 日夜间模式 切换，在不同的设备上都有不错的视觉效果。

Demo：https://gallery-portfolio.wiki-power.com/
GtiHub 仓库：https://github.com/linyuxuanlin/Gallery-Portfolio

功能特性

瀑布流布局展示照片
支持 Cloudflare R2 或其他兼容 AWS S3 存储
响应式设计，根据屏幕宽度自适应列数
图片自动生成缩略图并缓存，减少预览页加载时间
图片懒加载，每次加载固定数量的图片，划到底自动加载下一页
点击图片查看原图，以及光圈 / 快门 / ISO 等 EXIF 信息
支持日夜间模式切换
支持本地运行，也支持一键部署到 Vercel

灵感来源是前些天刷到了 V 站一位老哥的项目摄影佬专用 ⌈相片集⌋，基于 Next.js 开发。相比我的项目可以直接部署至 Vercel ，不需要额外的数据库，也可以直接基于已经存在的 R2 目录直接展示照片、生成缩略图。大家有兴趣也可以去看看他的作品，选择自己喜欢的使用~

项目 Readme 中有详细的配置说明，也支持一键部署至 Vercel 。欢迎大家试用并提出反馈 :D

linyuxuanlin

207 天前

@hsuvee 试试在 server.js 内加入以下这行代码：

```js
const images = await s3Client.send(new ListObjectsCommand({ Bucket: BUCKET_NAME, Prefix: IMAGE_DIR }));

// 对图片列表按 LastModified 时间进行排序，最旧的在最前面
images.Contents.sort((a, b) => new Date(a.LastModified) - new Date(b.LastModified));

const imageUrls = await Promise.all(images.Contents.map(async (item) => {
```