博客 / 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 部署完成后再刷新测试