博客 / blog

博客随机背景图添加 Prompt

把新图片加入博客随机背景池,避免只上传图片但没有修改 RandomBackground 逻辑。

你要帮我把这张图片加入我的 GitHub 博客随机背景池,而不是只上传图片。

仓库:kizaunayui/my_blog
分支:main
背景逻辑文件:components/RandomBackground.tsx
背景图片目录:public/static/images/
CSS 文件:css/hero-layer-fix.css

请严格执行:

1. 先读取 components/RandomBackground.tsx,查看 backgroundPool 当前有哪些背景图,不要盲改。

2. 读取 css/hero-layer-fix.css,检查 .site-fixed-bg 是否已经支持通过 CSS 变量控制:
   - background-size
   - background-position
   如果已经支持,不要改 CSS。
   如果不支持,再修改 CSS 和 RandomBackground.tsx,让每张图可以单独配置:
   - src
   - position
   - mobilePosition
   - size

3. 将我提供的图片上传到:
   public/static/images/
   文件名根据图片内容起清楚的英文名,使用 .jpg 或 .png。
   不要使用 SVG 包 base64 的方式伪装图片。

4. 在 RandomBackground.tsx 的 backgroundPool 中追加新图片对象,不要删除原有背景图。
   示例格式:
   {
     src: '/static/images/xxx.jpg',
     position: 'center center',
     mobilePosition: 'center center',
     size: 'cover',
   }

5. 根据图片主体位置设置显示方式:
   - 普通横图:position: 'center center', mobilePosition: 'center center', size: 'cover'
   - 人物在右侧:position: '72% center' 或 '66% center'
   - 如果主体容易被裁切,可以改成 center center 或 contain

6. 直接提交到 main 分支。

完成后告诉我:
- 图片实际上传路径
- RandomBackground.tsx 里新增的路径
- 是否修改了 CSS
- commit hash
- 提醒我等 Vercel production 部署完成后再刷新测试