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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 505 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

瀑布流

Cloudflare R2

exif

15 条回复 2024-05-29 14:32:57 +08:00

tpxcer

2024-05-28 15:58:23 +08:00

还行，收藏

YJi

2024-05-28 16:00:15 +08:00

已 star~

windrun

2024-05-28 17:55:12 +08:00

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

linyuxuanlin

2024-05-28 17:55:57 +08:00

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

windrun

2024-05-28 17:57:21 +08:00

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

forty

2024-05-28 23:07:28 +08:00

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

emma3

2024-05-28 23:25:18 +08:00

R2 能放多少照片？

forty

2024-05-29 09:18:46 +08:00

@emma3 好像是 10G

hsuvee

2024-05-29 11:41:58 +08:00

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

linyuxuanlin

2024-05-29 12:38:54 +08:00

@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

2024-05-29 12:40:21 +08:00

@forty 我知道的几种方法：

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

linyuxuanlin

2024-05-29 12:44:30 +08:00

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

hsuvee

2024-05-29 12:59:17 +08:00

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

linyuxuanlin

2024-05-29 13:04:23 +08:00

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

littlejackyxu

2024-05-29 14:32:57 +08:00

好棒啊已 star