背单词不用再看清单：7,298 幅插画加 2 万段录音，一个容器搞定

发表于 分类于 Waline： 阅读次数： 本文字数： 5.7k 阅读时长 ≈ 5 分钟
词光 Word Atlas 是一个 7,298 词全配插画与英美发音、基于 FSRS 复习的开源雅思背词应用。

简介

什么是 词光 Word Atlas？

词光 Word Atlas 是一个开源的雅思背词应用，把 7,298 个雅思词条逐词配上原创插画、英美双音标发音和例句朗读，再用 FSRS 间隔复习算法安排复习。它是纯前端单页应用，没有后端、没有数据库、也不需要注册账号，学习进度只保存在浏览器本地。

主要特点

  • 一词一画：7,298 个词条各配一幅统一复古图鉴画风的插画，画的就是例句里的场景。抽象词也用具体画面兜住，比如 abandon 画的是雪地里被丢下的一辆车。
  • 全词有声：22,905 段录音，覆盖英音、美音单词发音和例句朗读，另有 1,011 个重点词的第二条例句也配了音。语音由 ElevenLabs 合成，不是真人。
  • 双例句结构：每个词有两条原创例句，一条日常短句帮你”认得”，一条雅思语境长句帮你”会用”，都带中文翻译。
  • FSRS 间隔复习：用的是和 Anki 同款的开源算法（ts-fsrs），按每个词的记忆稳定度和难度推算下次出现的时间，目标记忆率可以自己调。
  • 四种主动回忆：看义选词、看图补句、听音辨词、拼写，从”认”到”写”层层递进。只有首次作答计入正确率，重做不会刷高统计。
  • 词汇星图：19 个雅思话题组成一张可拖拽旋转的星图，学过的词会点亮。用 WebGL2 渲染，不支持的设备会自动降级显示。
  • 本地优先：无需注册、无广告、无追踪，看过的词条和媒体可缓存离线使用，进度支持导出与恢复。
  • 开放数据：7,298 条词条提供 JSON 与 CSV 两种格式，插画和录音一并开源，可以直接拿去做 Anki 牌组或自己的小工具。

应用场景

  • 雅思考生：按 CEFR 等级（A1–C2）或 19 个话题选起点，每天定 10 个新词，十分钟左右一轮，适合视觉记忆型选手。
  • 受够背词 App 的人：不想注册、不想被广告追着开会员，打开网页就能背，进度在自己手里。
  • Anki 玩家：data/word-atlas.csv 直接导入做牌组，插画和音频白送。
  • 自部署爱好者：纯静态站点，扔进 Docker 用 Nginx 托管即可，数据不经过任何第三方。
  • 开发者与教师：一份结构干净的英文词库加媒体资产，可做 Demo、评测集、课堂素材或打印词卡。

词光 Word Atlas 是一个把”背单词”重做成”看图识词”的免费工具，最大的价值不是词表本身，而是 7,298 幅画和 2 万多段录音组成的完整语境资产，而且全部开源可搬走。项目在 GitHub 上线三天就拿到 2,700 多颗星，目前仍在高频迭代。

构建镜像

项目上游只提供源码，没有官方镜像。需要先准备两个文件

Dockerfile

采用多阶段构建：用 node:20-bookworm-slim 编译，再由 nginx:1.27-alpine 托管

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
# Word Atlas —— 多阶段构建：Node 编译 → Nginx 托管静态站点
#
# 构建：docker build -t word-atlas .
# 运行：docker run -d -p 8080:80 --name word-atlas word-atlas
# 子路径（如 /words/）：docker build --build-arg ATLAS_BASE=/words/ -t word-atlas .
#
# 说明：项目为纯前端 SPA（React 19 + Vite 6），无后端与数据库，
#       构建产物 dist/ 由 Nginx 直接托管。

# ---------- Stage 1: 构建 ----------
FROM node:20-bookworm-slim AS build

WORKDIR /app

# 部署子路径前缀，默认根路径 "/"
ARG ATLAS_BASE=/
ENV ATLAS_BASE=${ATLAS_BASE} \
    CI=true \
    NODE_OPTIONS=--max-old-space-size=4096 \
    PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1

# 依赖层单独 COPY：仅源码变更时可复用缓存
COPY package.json package-lock.json ./
RUN npm ci --no-audit --no-fund

# 源码 + public/ 静态媒体
COPY . .

# tsc -b && vite build → /app/dist
RUN npm run build

# ---------- Stage 2: 运行时 ----------
FROM nginx:1.27-alpine AS runtime

COPY default.conf /etc/nginx/conf.d/default.conf

# 只拷贝产物，不携带源码、node_modules
COPY --from=build /app/dist /usr/share/nginx/html

EXPOSE 80

HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
    CMD wget -q --spider http://127.0.0.1/ || exit 1

STOPSIGNAL SIGQUIT

CMD ["nginx", "-g", "daemon off;"]

default.conf

这是 Nginx 站点配置（SPA 回退、缓存策略、gzip）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
server {
    listen       80;
    listen       [::]:80;
    server_name  _;

    root  /usr/share/nginx/html;
    index index.html;

    charset utf-8;
    server_tokens off;

    # ---------- 压缩 ----------
    gzip              on;
    gzip_vary         on;
    gzip_min_length   1024;
    gzip_comp_level   5;
    gzip_proxied      any;
    gzip_types
        text/plain
        text/css
        text/javascript
        application/javascript
        application/json
        application/manifest+json
        image/svg+xml
        font/woff2;

    # ---------- 带内容哈希的构建产物：永久缓存 ----------
    location /assets/ {
        add_header Cache-Control "public, max-age=31536000, immutable" always;
        try_files $uri =404;
    }

    # ---------- 词库数据 / 插画 / 音频：长缓存，缺失直接 404 ----------
    # 媒体体量大（数百 MB），不回退到 index.html，避免软 404 掩盖缺失
    location ~* ^/(atlas|sfx|data)/ {
        add_header Cache-Control "public, max-age=604800" always;
        try_files $uri =404;
    }

    # ---------- 入口 HTML：不缓存，发版即时生效 ----------
    location = /index.html {
        add_header Cache-Control "no-cache, must-revalidate" always;
    }

    # ---------- SPA 回退 ----------
    location / {
        try_files $uri $uri/ /index.html;
    }
}

# 子路径部署（ATLAS_BASE=/words/）时，把上面的 server 块整体替换为：
#
# server {
#     listen 80;
#     server_name _;
#
#     location /words/ {
#         alias /usr/share/nginx/html/;
#         try_files $uri $uri/ /words/index.html;
#     }
# }

构建镜像和容器运行的基本命令如下👇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 下载代码
git clone --depth 1 https://github.com/designfuchen/word-atlas.git
  
# 进入目录  
cd word-atlas
  
# 构建镜像
docker build -t wbsu2003/word-atlas:v1 .

# 运行容器
docker run -d \
  --restart unless-stopped \
  --name word-atlas \
  -p 8128:80 \
  wbsu2003/word-atlas:v1

安装

在群晖上以 Docker 方式安装。

因为镜像体积较大（构建产物里含 7,298 张插画和 22,905 段音频），拉取会比较久，进度条卡在中间是正常现象。

docker cli 安装

如果你熟悉命令行，可能用 docker cli 更快捷

1
2
3
4
5
6
# 运行容器
docker run -d \
  --restart unless-stopped \
  --name word-atlas \
  -p 8128:80 \
  wbsu2003/word-atlas:latest

服务是纯静态站点，没有环境变量，也不需要挂载数据卷，所有状态存在浏览器本地。

docker-compose 安装

也可以用 docker-compose 安装，将下面的内容保存为 docker-compose.yml 文件

1
2
3
4
5
6
7
8
9
version: '3'

services:
  word-atlas:
    image: wbsu2003/word-atlas:latest
    container_name: word-atlas
    restart: unless-stopped
    ports:
      - 8128:80

然后通过 SSH 登录到您的群晖，执行下面的命令：

1
2
3
4
5
6
7
8
9
10
# 新建文件夹 word-atlas
mkdir -p /volume1/docker/word-atlas

# 进入 word-atlas 目录
cd /volume1/docker/word-atlas

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d

运行

在浏览器中访问 http://<群晖IP>:8128 即可进入首界面

首次使用：

  1. 选一个起点等级（A2 / B1 / B2 / C1），已熟悉的词可以跳过。

  1. 定每天的新词数量，默认 10 个，约 9 分钟一轮。
  2. 进入今日学习，看插画、听发音、做主动回忆练习。

  1. 想换设备前，先到「我的」里导出进度备份。

没有默认账号密码，也不需要登录

学习进度保存在浏览器的 localStorage，导出备份也在应用内完成，与容器无关。重建容器不会丢进度，但清理浏览器缓存会。

注意事项

  1. 仓库版不是线上版：0xlei.tech/words 那套是独立迭代的，功能可能比开源仓库多或少。想完全自己掌控就用 Docker 部署仓库版，想要最新功能就去官网。
  2. 镜像体积大：插画加录音几百 MB，拉取和磁盘占用都要留余量。运行内存占用很低，512MB 足够。
  3. 进度只在浏览器里：不用账号是优点也是风险。清缓存、换浏览器、换设备都可能让星图清零，定期在应用内导出备份。容器本身重启不影响进度。
  4. 内容未经人工全量审校：释义、例句、插画由生成式 AI 产出，语音为 ElevenLabs 合成，作者在 README 里写得很直白——可能有错误。当输入材料用没问题，别当词典判据，写作用词还是回查牛津、朗文。
  5. 不是官方雅思词表：词表来自常见雅思阅读核心词去重，不承诺提分。
  6. 手机端建议加主屏幕：它是 PWA，浏览器菜单里选「添加到主屏幕」，看过的词和音频会缓存，断网也能复习。
  7. 想自己构建镜像：项目是 React 19 + Vite 6 的纯静态站，多阶段构建即可（Node 20 编译 → Nginx 托管 dist/）。注意两点：devDependencies 里的 playwright 安装时会尝试下载浏览器，要加 PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1；子路径部署要传 ATLAS_BASE=/words/ 重新构建，并同步调整 Nginx 的 alias 与 try_files。
  8. 安全建议：默认没有鉴权，任何能访问端口的人都能用。只在内网或反代后面暴露，不要直接把 80 端口捅到公网。

参考文档

designfuchen/word-atlas: 词光 · Word Atlas — Illustrated IELTS vocabulary with 7,298 words, UK/US audio and FSRS review
地址：https://github.com/designfuchen/word-atlas

词光 Word Atlas 在线体验
地址：https://0xlei.tech/words/

部署文档（子路径与静态托管）
地址：https://github.com/designfuchen/word-atlas/blob/main/docs/deployment.md

X 上的 阿磊：“我做了一个我自认为全世界最好的雅思背词网站，完全免费，完全开源。🔥🔥🔥🔥🔥 7,298 个雅思词，每个词一幅原创插画，英音、美音、例句全都有接近真人的配音。学会一个词，你的词汇星图上就点亮一颗星。 完全免费！！不用注册，打开就能背，代码和词库大家随便用。 https://t.co/hJgQPB1OSQ” / X
地址：https://x.com/yangleiocx3/status/2114337645148979380