1. Gallery 样式升级#

• 顶栏改为 sticky + 玻璃拟态
• 横/竖切换更明显
• 标题更大、更醒目
• Hover 放大动效

2. 性能优化#

• 触底自动加载，每批 20 张
• 图片加载时使用 占位容器，防止跳动

3. 体验细节#

• 日/夜模式切换
• 点击图片可进入预览（lightbox）。直接套用Fancybox组件了，简单直接又省心。

1.好了也是问ai将项目搓好了，虽然没做什么但是辛苦我了…玩个梗哈哈。弄好之后我们，得到了这一坨文件。#

拿到文件，我们先把config.json里的域名，给他改改。改成你R2的存储公共开放域名。 图1

• 因为我弄了反代用pic和gallery去隐藏了/index.html和/gallery.html的后缀，所以我要多填两个域名,详见博客文章Link。如果你们无所谓那就无所谓吧!你直接填 你的公共域/index(gallery).html就行了。

1
{
2
    "domain": "https://rapi.0w0.us.ci",
3
    "galleryDomain": "https://gallery.0w0.us.ci",  //不用反代就 公共域+/index.html
4
    "indexDomain": "https://pic.0w0.us.ci"         //不用反代就 公共域+/gallery.html
5
}

注意啊，如果你按教程来，那么那个图库基本上是fork仓库原作者的图（应该有4000多张），我自己是在本地新建的ri文件存的是自己的图。是否要换用自己的图库，看你·_·自己。

• 我自己就差不多700来张图，自己存的和一些从pixiv上爬我自己的个人收藏图。你问，这个脚本有吗？有的！兄弟有的 。你可以自己github搜索、搓一个或者我在用的这个Pixiv-Tool

填完，接下来我们就能本地 build 构建 dist 瞧瞧。

直接命令行 node build.js 得到构建产物/dist。（如果你没有装过依赖，你要执行一次 npm install）#

1
npm install
2
node build.js

耐心等待 如图，拿到产物。我们lib就是gallery页面相关逻辑js了，图片就存在ri里。 给他本地预览一下继续命令行

1
npx serve dist

你会在终端得到 http://localhost:3000 本地预览地址,进行网页访问。得到如下 接下来，就是把它丢到R2上去部署。

上传部署（以 Cloudflare R2 为例）#

个人用的是rclone，不过推荐用Cyberduck，有GUI界面更直观友好。

首先登录cloudflare获取你的：

• R2 的 Access Key ID

• R2 的 Secret Access Key

• R2 的 Endpoint（S3 兼容地址）

• rclone 同步到 R2：

1
rclone sync "C:\Users\Tyr.Eamon\Desktop\博客背景文件\随机图\dist" r2:YOUR_BUCKET --checksum --transfers 16 --checkers 16 --progress

• Cyberduck 同步R2： 打开 Cyberduck
  • 选择Amazon S3协议。
  • Server（服务器）：填你的 R2 endpoint 的主机名。形如：.r2.cloudflarestorage.com（不要带 https://，不要带路径）
  • Port：443
  • Access Key ID：填你的 R2 Access Key ID
  • Secret Access Key：填你的 R2 Secret Access Key

上传文件完全后，直接访问你的R2公开域就能看到SPA的界面了。

R2公共域