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

[linyuxuanlin]

这是一个简单的 摄影作品展示站，只需要将图片放在免费的 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

[tpxcer]

还行，收藏

[YJi]

已 star~

[windrun]

r2 不错，就是添加了自定义域之后还是被墙。。

[linyuxuanlin]

@windrun 不会吧，我也是自定义域名

[windrun]

@linyuxuanlin #4 我是最初用的比较好，用了一段时间后，就一片红了。。

[forty]

你这个有后台吗？通过哪种方式把图片上传到 R2 ？

[emma3]

R2 能放多少照片？

[forty]

@emma3 好像是 10G

[hsuvee]

aws sdk 查文件列表是否可以倒序，目前排序是正序有点难受

[linyuxuanlin]

@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) => {
```

[linyuxuanlin]

@forty 我知道的几种方法：

1. 直接在 Cloudflare R2 的网页上传图片
2. 使用 PicGo 之类的图床上传工具
3. 我用的是群晖 NAS ，用 Cloud Sync 可以直接通过 S3 API 操作存储桶。在 NAS 管理照片，可以自动同步到 Cloudflare R2 上。

[linyuxuanlin]

@emma3 R2 免费 10G/月存储，100 万次 A 类操作，1000 万次 B 类操作，对于个人用户完全足够了。
而且不计算流量，只计算访问，对于大文件和小文件来说，访问一次的消耗都是一样的。

[hsuvee]

@linyuxuanlin 感谢感谢，还有个问题是在 preview 文件生成后，每次打开首屏加载慢是因为获取文件列表耗时高么，想把这里的体验优化一下

[linyuxuanlin]

@hsuvee 是的，看起来大部分耗时都是在加载图片上。可以先考虑设高压缩率，我试试看其他加载项是否还有优化空间。

[littlejackyxu]

好棒啊 已 star