692 字
3 分钟

Waline、(默认头像美化)

2026-01-31
浏览量 加载中...

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

图片预处理#

首先你要自己找你喜欢的头像作为头像库,然后,在文件夹的地址栏输入

Terminal window
$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#

  1. 在 GitHub 上新建一个公开仓库(Public Repository),名字可以叫 arknights-avatar
  2. 本地处理好 1.webp48.webp,并将文件夹重命名为img,然后全部上传到该仓库的根目录。
  3. 确认路径:确保你在浏览器访问 https://github.com/你的用户名/arknights-avatar/blob/main/1.webp 能看到图片。
  4. 在本地电脑新建一个文件夹(命名为api)。
  5. 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);
}
  1. 将这个文件夹也上传到 GitHub

  2. 登录 Vercel

  3. 登录 Vercel 官网,点击 “Add New” -> “Project”

    在导入 Git 仓库列表里,找到你刚才创建的 avatar 仓库,点击 “Import”

    Project Name 随便起(比如 avatar-api),其他选项默认。

    点击 “Deploy”。这时候它会部署成功

  4. 部署完成后,你会得到一个 Vercel 域名(比如 avatar-api.vercel.app)。

这个域名/api

访问这个链接,如果能加载出图片,说明搭建成功

Waline 的服务端(比如 Vercel 的 Environment Variables)修改 GRAVATAR_STR

变量名: GRAVATAR_STR 变量值: https://你的API域名/api?id={{mail|md5}}

支持与分享

如果这篇文章对你有帮助,欢迎分享给更多人或赞助支持!

赞助
Waline、(默认头像美化)
https://lrwy.de5.net/posts/f60afe32/
作者
凛若无音
发布于
2026-01-31
许可协议
CC BY-NC-SA 4.0

评论区

Profile Image of the Author
凛若无音
像明天一样
公告
所谓无底深渊,下去,也是前程万里。
分类
标签
数据统计
文章
37
分类
1
标签
17
共码字
131,692
存活时长
0
最终活动
0 天前

目录