random-background-api/README.md

随机背景API

一个可直接部署到 Cloudflare Pages 的静态站点 + Pages Functions API，用来按设备方向随机返回背景图。

目录约定

• mobile-image/：竖屏图片原图上传目录
• desketop-image/：横屏图片原图上传目录

使用流程

1. 把图片上传到对应目录。
2. 运行构建脚本：

   python3 build.py
   

3. 把项目根目录作为 Cloudflare Pages 的发布目录部署。
4. 打开：
   • 页面：/
   • API：/api/random

API

• GET /api/random
  • 默认按 mode=auto 随机返回图片重定向
• GET /api/random?format=json
  • 返回 JSON
• GET /api/list
  • 返回图片清单

组件嵌入

<script src="https://random-background-api.pages.dev/widget.js"></script>
<random-background-widget
  src="https://random-background-api.pages.dev"
  mode="auto"
  blur="12"
  radius="16px"
  height="260px">
</random-background-widget>

widget.js 只读取静态的 manifest.json 和图片文件，不会调用 api/random。

构建说明

build.py 会把目录里的原图转换成同目录下的编号 webp 文件，例如：

• 1.webp
• 2.webp
• 55.webp

同时生成 manifest.json，供 Pages Functions 读取。