简介

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

界面

68747470733a2f2f6d656469612e77696b692d706f7765722e636f6d2f696d672f6d6f636b7570322e706e67

功能特性

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

搭建部署

本地部署

克隆仓库:

1
2
git clone https://github.com/linyuxuanlin/Gallery-Portfolio.git
cd Gallery-Portfolio

确保你已经安装了 Node.js,然后安装依赖:

1
npm install

创建 .env 文件
在项目根目录下,将 .env_template 文件改名为 .env,并根据你的实际配置修改环境变量:

1
2
3
4
5
6
7
8
R2_ACCESS_KEY_ID=your-access-key-id
R2_SECRET_ACCESS_KEY=your-secret-access-key
R2_BUCKET_NAME=your-bucket-name
R2_ENDPOINT=https://your-endpoint.r2.cloudflarestorage.com
R2_REGION=auto
R2_IMAGE_BASE_URL=https://your-image-base-url.com
R2_IMAGE_DIR=xxx
IMAGE_COMPRESSION_QUALITY=100

运行本地服务器:

1
node server.js

服务器启动后,打开浏览器访问 http://localhost:3000 即可访问网站。

部署到vercel

首先,在 GitHub 上 fork 此仓库 。
在 Vercel 上新建项目,选择已经 fork 的 GitHub 仓库进行部署。
在 Vercel 项目的设置中,添加以下环境变量:

  • R2_ACCESS_KEY_ID
  • R2_SECRET_ACCESS_KEY
  • R2_BUCKET_NAME
  • R2_ENDPOINT
  • R2_REGION
  • R2_IMAGE_BASE_URL
  • R2_IMAGE_DIR
  • IMAGE_COMPRESSION_QUALITY

完成上述步骤后,Vercel 将自动进行部署。
部署完成后,即可通过 Vercel 提供的域名访问网站,也可以绑定你自己的域名。

环境变量

  • R2_ACCESS_KEY_ID:对象存储的访问密钥 ID
  • R2_SECRET_ACCESS_KEY:对象存储的访问密钥
  • R2_BUCKET_NAME:存储桶名称
  • R2_ENDPOINT:Cloudflare R2 端点,格式例如 https://your-endpoint.r2.cloudflarestorage.com
  • R2_REGION:区域,默认为 auto
  • R2_IMAGE_BASE_URL:图片公开访问的 URL,格式例如 https://media.wiki-power.com
  • R2_IMAGE_DIR: 存储桶下存放图片的路径,比如我把图片都存在 gallery 文件夹下
  • IMAGE_COMPRESSION_QUALITY:在这里设置瀑布流页面图片的压缩质量。可选 0-100, 数值越大代表压缩的图片质量越高。 (默认是 80, 建议填 100)

下载地址

瀑布流摄影作品展示源码 图片站源码 Gallery-Portfolio 附教程