purewhiter--mobilegym
wehub-resource-sync
205 行
4.7 KiB
Markdown
205 行
4.7 KiB
Markdown
# Reddit 真实头像说明
|
||
|
||
## 概述
|
||
|
||
本项目为 Reddit App 的所有用户配置了真实的头像图片。头像使用 DiceBear API 的 avataaars 风格生成，每个用户基于用户名有唯一且稳定的头像。
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
public/reddit/avatars/
|
||
├── avatar_*.png # 用户头像（291个唯一用户）
|
||
└── avatar_me.png # 当前用户头像（xiaoming-ai）
|
||
```
|
||
|
||
## 头像特点
|
||
|
||
- **唯一性**：每个用户名对应唯一头像（基于 MD5 哈希）
|
||
- **稳定性**：相同用户在任何时候都会得到相同头像
|
||
- **真实感**：avataaars 风格类似 Bitmoji，具有卡通人物形象
|
||
- **离线可用**：头像已下载到本地，无需网络连接
|
||
|
||
## 使用方法
|
||
|
||
### 首次运行（已完成）
|
||
|
||
```bash
|
||
# 下载所有真实头像并更新配置
|
||
node download_real_avatars.mjs
|
||
```
|
||
|
||
该脚本会：
|
||
1. 提取配置文件中的所有作者
|
||
2. 为每个作者下载唯一头像到 `public/reddit/avatars/`
|
||
3. 更新 `redditConfig.ts` 中的 `authorAvatar` 路径
|
||
4. 更新用户头像
|
||
|
||
### 日常开发
|
||
|
||
头像已下载到本地，直接运行项目即可看到效果：
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
## 头像显示位置
|
||
|
||
根据截图和代码分析，头像会显示在：
|
||
|
||
1. **帖子列表** - 每个帖子作者的头像
|
||
- 位置：帖子头部，紧邻作者用户名
|
||
- 大小：16x16px（小头像）
|
||
|
||
2. **顶部导航栏** - 当前用户头像
|
||
- 位置：右上角，带在线状态指示
|
||
- 大小：32x32px（中等头像）
|
||
|
||
3. **右侧栏** - 社区成员头像（如有需要）
|
||
- 位置：热门社区列表
|
||
- 大小：32x32px
|
||
|
||
## 技术实现
|
||
|
||
### 数据结构
|
||
|
||
配置文件中每个帖子包含：
|
||
|
||
```typescript
|
||
{
|
||
author: 'u/CelesteAvant',
|
||
authorAvatar: '/reddit/avatars/avatar_f3840951.png',
|
||
// ... 其他字段
|
||
}
|
||
```
|
||
|
||
### DOM 渲染
|
||
|
||
HomePage.tsx 中的实现（第327-332行）：
|
||
|
||
```tsx
|
||
{(post as any).authorAvatar ? (
|
||
<img src={(post as any).authorAvatar} className="w-4 h-4 rounded-full" alt="" />
|
||
) : (
|
||
<div className="w-4 h-4 rounded-full bg-gray-200"></div>
|
||
)}
|
||
```
|
||
|
||
### 头像映射规则
|
||
|
||
```javascript
|
||
// 基于用户名生成哈希
|
||
const hash = crypto.createHash('md5')
|
||
.update(username)
|
||
.digest('hex')
|
||
.substring(0, 8);
|
||
|
||
// 头像文件名
|
||
const filename = `avatar_${hash}.png`;
|
||
```
|
||
|
||
## 重新生成头像
|
||
|
||
如果需要更新头像样式或重新下载：
|
||
|
||
```bash
|
||
# 使用不同的头像风格
|
||
# 编辑 download_real_avatars.mjs，修改 AVATAR_STYLE
|
||
const AVATAR_STYLE = 'avataaars'; // 或 'bottts', 'personas', 'identicon' 等
|
||
|
||
# 删除旧头像（可选）
|
||
rm public/reddit/avatars/avatar_*.png
|
||
|
||
# 重新下载
|
||
node download_real_avatars.mjs
|
||
```
|
||
|
||
## 可用头像风格
|
||
|
||
DiceBear 支持多种头像风格：
|
||
|
||
- **avataaars** ✓ - 类似 Bitmoji 的卡通人物（当前使用）
|
||
- **bottts** - 机器人风格
|
||
- **personas** - 多样化人物
|
||
- **identicon** - 几何图案
|
||
- **initials** - 首字母
|
||
|
||
## 统计信息
|
||
|
||
- **唯一作者数量**: 291
|
||
- **帖子总数**: 300
|
||
- **头像文件总数**: 292（291个用户 + 1个当前用户）
|
||
- **头像尺寸**: 200x200px
|
||
- **头像格式**: PNG
|
||
- **总文件大小**: 约 2-3 MB
|
||
|
||
## 注意事项
|
||
|
||
1. **首次下载需要网络连接**
|
||
- 脚本需要访问 DiceBear API
|
||
- 下载完成后完全离线可用
|
||
|
||
2. **头像一致性**
|
||
- 相同用户名总是生成相同头像
|
||
- 不要手动修改头像文件名
|
||
|
||
3. **性能优化**
|
||
- 头像已本地化，加载速度快
|
||
- 使用 `rounded-full` 类实现圆形显示
|
||
|
||
4. **符合项目规范**
|
||
- 头像路径使用 `/reddit/avatars/` 前缀
|
||
- 配置文件位于 `apps/Reddit/data/redditConfig.ts`
|
||
- 图片资源位于 `public/reddit/avatars/`
|
||
|
||
## 维护
|
||
|
||
### 添加新用户
|
||
|
||
新增帖子时，确保包含 `authorAvatar` 字段：
|
||
|
||
```typescript
|
||
{
|
||
author: 'u/NewUser',
|
||
authorAvatar: '/reddit/avatars/avatar_[hash].png',
|
||
// ... 其他字段
|
||
}
|
||
```
|
||
|
||
然后运行脚本下载新用户头像：
|
||
|
||
```bash
|
||
node download_real_avatars.mjs
|
||
```
|
||
|
||
### 更新统计
|
||
|
||
```bash
|
||
# 查看头像数量
|
||
ls public/reddit/avatars/avatar_*.png | wc -l
|
||
|
||
# 查看配置中的作者数量
|
||
grep -o "author: 'u/" apps/Reddit/data/redditConfig.ts | wc -l
|
||
```
|
||
|
||
## 相关文件
|
||
|
||
- `download_real_avatars.mjs` - 头像下载脚本（Node.js）
|
||
- `download_real_avatars.py` - 头像下载脚本（Python，备用）
|
||
- `update_real_avatars.cjs` - 旧版脚本（仅更新 URL，不下载）
|
||
- `redditConfig.ts` - Reddit 配置文件
|
||
- `HomePage.tsx` - 主页渲染组件
|
||
|
||
## API 参考
|
||
|
||
DiceBear API: https://api.dicebear.com/9.x/avataaars/png
|
||
|
||
参数：
|
||
- `seed` - 用户名（去除 'u/' 前缀）
|
||
- `size` - 图片尺寸（200px）
|
||
- `backgroundColor` - 背景色（b6e3f4,c0aede,d1d4f9）
|
||
|
||
## 作者
|
||
|
||
- 实现日期：2026-01-27
|
||
- 实现方式：基于 DiceBear API 的真实头像下载方案
|