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

简介

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，并根据你的实际配置修改环境变量：

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)