媒体库
如何在后台管理图片、使用 R2 云存储
Hey，同学！想管理博客和文档中使用的图片吗？这一篇教你使用 Admin 的媒体库～ 📸
🤔 媒体库是什么？
媒体库是集中管理图片的地方：
- 上传图片
- 查看已上传的图片
- 复制图片链接
- 删除不需要的图片
💡 想象一下：媒体库就是你的「图库」，所有图片都整齐地存放在这里！
⚙️ 技术架构
存储方案
图片存储在 Cloudflare R2：
text
本地文件 → 上传 → R2 云存储 → 返回 CDN URL
优势
| 特点 | 说明 |
|---|---|
| 无流量费 | R2 不收流量费 |
| CDN 加速 | 全球节点，快速加载 |
| 兼容 S3 | API 兼容，迁移方便 |
📍 使用入口
在 Admin 后台访问：/media 或 /media/images
➕ 上传图片
1. 选择文件
点击「上传」按钮：
- 选择本地图片文件
- 支持拖拽上传
2. 设置属性
| 字段 | 说明 |
|---|---|
| 文件名 | 自动生成或自定义 |
| 替代文本 | 用于 SEO 和无障碍 |
| 描述 | 图片说明 |
3. 上传
text
上传中... → 完成 ✓
🖼️ 管理图片
查看列表
媒体库展示所有已上传的图片：
- 缩略图预览
- 文件名
- 上传时间
- 文件大小
复制链接
点击图片，获取 CDN 链接：
text
https://bk.iflux.art/images/xxx.jpg
删除
选择图片，点击删除：
⚠️ 注意：删除后无法恢复，谨慎操作！
📝 在内容中使用
博客文章
在编辑器中插入图片：
- 点击「插入图片」
- 从媒体库选择或上传
- 自动生成 Markdown 语法
文档
在 MDX 中使用：
markdown
💡 最佳实践
1. 图片大小
上传前建议压缩：
| 类型 | 建议大小 |
|---|---|
| 封面图 | < 500KB |
| 内容图 | < 200KB |
| 缩略图 | < 50KB |
2. 格式选择
| 格式 | 用途 |
|---|---|
| JPEG | 照片 |
| PNG | 带透明图 |
| WebP | 推荐，性能好 |
3. 命名规范
text
blog/2024/01/cover.jpg
docs/getting-started/screenshot.png
🔧 配置
环境变量
txt
# Cloudflare R2
R2_ACCOUNT_ID=xxx
R2_ACCESS_KEY_ID=xxx
R2_SECRET_ACCESS_KEY=xxx
R2_BUCKET_NAME=blog
R2_PUBLIC_URL=https://bk.iflux.art
🔗 下一步
🖼️ 好的媒体库让图片管理「井井有条」！