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

npm install

创建 .env 文件

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

瀑布流相册html5模板瀑布流摄影作品展现源码 图片站源码 GalleryPortfolio 附教程 Bootstrap

R2_ACCESS_KEY_ID=your-access-key-idR2_SECRET_ACCESS_KEY=your-secret-access-keyR2_BUCKET_NAME=your-bucket-nameR2_ENDPOINT=https://your-endpoint.r2.cloudflarestorage.comR2_REGION=autoR2_IMAGE_BASE_URL=https://your-image-base-url.comR2_IMAGE_DIR=xxxIMAGE_COMPRESSION_QUALITY=100

运行本地做事器:

node server.js

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

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

R2_ACCESS_KEY_IDR2_SECRET_ACCESS_KEYR2_BUCKET_NAMER2_ENDPOINTR2_REGIONR2_IMAGE_BASE_URLR2_IMAGE_DIRIMAGE_COMPRESSION_QUALITY完成上述步骤后,Vercel 将自动进行支配。
支配完成后,即可通过 Vercel 供应的域名访问网站,也可以绑定你自己的域名。
环境变量R2_ACCESS_KEY_ID:工具存储的访问密钥 IDR2_SECRET_ACCESS_KEY:工具存储的访问密钥R2_BUCKET_NAME:存储桶名称R2_ENDPOINT:Cloudflare R2 端点,格式例如 https://your-endpoint.r2.cloudflarestorage.comR2_REGION:区域,默认为 autoR2_IMAGE_BASE_URL:图片公开访问的 URL,格式例如 https://media.wiki-power.comR2_IMAGE_DIR: 存储桶下存放图片的路径,比如我把图片都存在 gallery 文件夹下IMAGE_COMPRESSION_QUALITY:在这里设置瀑布流页面图片的压缩质量。
可选 0-100, 数值越大代表压缩的图片质量越高。
(默认是 80, 建议填 100)