这是一个创建于 213 天前的主题，其中的信息可能已经有所发展或是发生改变。
这是一个简单的 摄影作品展示站，只需要将图片放在免费的 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
15 条回复 • 2024-05-29 14:32:57 +08:00
 |
1
tpxcer 213 天前
还行，收藏
|
 |
2
YJi 213 天前
已 star~
|
 |
3
windrun 213 天前
r2 不错，就是添加了自定义域之后还是被墙。。
|
 |
4
linyuxuanlin OP @windrun 不会吧，我也是自定义域名
|
|
5
windrun 213 天前
@linyuxuanlin #4 我是最初用的比较好，用了一段时间后，就一片红了。。
|
 |
6
forty 213 天前
你这个有后台吗？通过哪种方式把图片上传到 R2 ？
|
 |
7
emma3 213 天前
R2 能放多少照片？
|
 |
9
hsuvee 212 天前
aws sdk 查文件列表是否可以倒序，目前排序是正序有点难受
|
|
10
linyuxuanlin OP @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) => { ``` |
|
11
linyuxuanlin OP @forty 我知道的几种方法：
1. 直接在 Cloudflare R2 的网页上传图片 2. 使用 PicGo 之类的图床上传工具 3. 我用的是群晖 NAS ，用 Cloud Sync 可以直接通过 S3 API 操作存储桶。在 NAS 管理照片，可以自动同步到 Cloudflare R2 上。 |
|
12
linyuxuanlin OP @emma3 R2 免费 10G/月存储，100 万次 A 类操作，1000 万次 B 类操作，对于个人用户完全足够了。
而且不计算流量，只计算访问，对于大文件和小文件来说，访问一次的消耗都是一样的。 |
|
13
hsuvee 212 天前
@linyuxuanlin 感谢感谢，还有个问题是在 preview 文件生成后，每次打开首屏加载慢是因为获取文件列表耗时高么，想把这里的体验优化一下
|
|
14
linyuxuanlin OP @hsuvee 是的，看起来大部分耗时都是在加载图片上。可以先考虑设高压缩率，我试试看其他加载项是否还有优化空间。
|
 |
15
littlejackyxu 212 天前
好棒啊 已 star
|
Select Language