692 字
3 分钟
Waline、(默认头像美化)
LeanCloud 已经从 2026 年 1 月 12 日起停止了新用户注册和新应用的创建
现有存量应用在 2027 年 1 月 12 日正式停止服务前仍可正常使用。
落荒而逃了,这个服务终止前,我先用这个凑合
官方教程
https://waline.js.org/guide/get-started/#%E7%BB%91%E5%AE%9A%E5%9F%9F%E5%90%8D
图片预处理
首先你要自己找你喜欢的头像作为头像库,然后,在文件夹的地址栏输入
$nr = 1; Get-ChildItem -File | Sort-Object { $_.BaseName -replace '\D+','' -as [int] } | ForEach-Object { Rename-Item $_.FullName -NewName ("$nr" + $_.Extension); $nr++ }把图片变成数字序号排列,然后访问https://bulkresizephotos.com/zh
把图片都上传上去
- 模式:选择“宽度”。
- 宽度:输入
128(头像金标准)。 - 格式:选择 WebP。
- 质量:设为
75。
点击开始,下载后的压缩包里就是你需要的“极轻量”头像库了。单张图应该只有 3-5KB,加载速度起飞。
部署
将图片推送到 GitHub
- 在 GitHub 上新建一个公开仓库(Public Repository),名字可以叫
arknights-avatar。 - 本地处理好
1.webp到48.webp,并将文件夹重命名为img,然后全部上传到该仓库的根目录。 - 确认路径:确保你在浏览器访问
https://github.com/你的用户名/arknights-avatar/blob/main/1.webp能看到图片。 - 在本地电脑新建一个文件夹(命名为api)。
- 在
api目录下新建文件index.js,填入以下代码:
export default function handler(req, res) { // 1. 获取 Waline 传过来的参数(对应我们稍后设置的 ?id=) const { id } = req.query;
const total = 48; // 你的图片总数 const username = "用户名"; const repo = "仓库名";
let num;
if (id) { // 2. 核心逻辑:将 MD5 字符串转换为固定的数字 // 这样同一个 id (邮箱MD5) 算出来的 num 永远是固定的 let hash = 0; for (let i = 0; i < id.length; i++) { hash += id.charCodeAt(i); } num = (hash % total) + 1; } else { // 如果没有传 id,则退回到完全随机 num = Math.floor(Math.random() * total) + 1; }
const imageUrl = `https://fastly.jsdelivr.net/gh/${username}/${repo}@main/img/${num}.webp`;
// 3. 重点:设置不缓存 API 响应,防止浏览器对 API 地址进行强缓存 res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate'); res.setHeader('Pragma', 'no-cache'); res.setHeader('Expires', '0');
// 4. 重定向到图片 res.redirect(302, imageUrl);}-
将这个文件夹也上传到 GitHub
-
登录 Vercel,
-
登录 Vercel 官网,点击 “Add New” -> “Project”。
在导入 Git 仓库列表里,找到你刚才创建的
avatar仓库,点击 “Import”。Project Name 随便起(比如
avatar-api),其他选项默认。点击 “Deploy”。这时候它会部署成功
-
部署完成后,你会得到一个 Vercel 域名(比如
avatar-api.vercel.app)。
这个域名/api
访问这个链接,如果能加载出图片,说明搭建成功
Waline 的服务端(比如 Vercel 的 Environment Variables)修改 GRAVATAR_STR:
变量名: GRAVATAR_STR 变量值: https://你的API域名/api?id={{mail|md5}}
支持与分享
如果这篇文章对你有帮助,欢迎分享给更多人或赞助支持!
凛w的后花园