55 lines
1.2 KiB
Markdown
55 lines
1.2 KiB
Markdown
# 随机背景API
|
||
|
||
一个可直接部署到 Cloudflare Pages 的静态站点 + Pages Functions API，用来按设备方向随机返回背景图。
|
||
|
||
## 目录约定
|
||
|
||
- `mobile-image/`：竖屏图片原图上传目录
|
||
- `desketop-image/`：横屏图片原图上传目录
|
||
|
||
## 使用流程
|
||
|
||
1. 把图片上传到对应目录。
|
||
2. 运行构建脚本：
|
||
```bash
|
||
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`
|
||
- 返回图片清单
|
||
|
||
## 组件嵌入
|
||
|
||
```html
|
||
<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 读取。
|