把「随机单词」嵌入你的网站
一行 iframe 代码，把 EngLift 随机单词卡片嵌入到你的博客或网站（WordPress、Typecho、静态站均可），访客可以直接听单词发音。
① 快速开始
复制下面的代码，粘贴到你网站的任意 HTML 位置：
<iframe src="https://englift.luomor.com/embed/word" width="320" height="300" frameborder="0" style="border-radius:16px"></iframe>选择词库级别：
② 效果预览
这就是访客看到的样子（可以点击试用）：
③ WordPress 添加步骤
- 登录 WordPress 后台
- 进入「外观 → 小工具」（Widgets）
- 点击「+」添加一个「自定义 HTML」小工具
- 粘贴上面复制的代码，保存
- 刷新你的网站首页，侧栏即可看到单词卡片
其他系统：Typecho / Halo 在「外观 → 侧边栏」添加 HTML 模块；静态网站直接把代码粘进页面 HTML。
④ 尺寸调整
| 场景 | 宽度 × 高度 | 说明 |
|---|---|---|
| 窄侧栏 | 240 × 320 | 适合较窄的侧边栏 |
| 标准侧栏 | 280 × 300 | 推荐尺寸 |
| 宽侧栏 | 320 × 300 | 默认代码尺寸 |
| 正文区域 | width:100%; height:300px | 响应式自适应容器 |
响应式版本（宽度自适应容器）：
<iframe src="https://englift.luomor.com/embed/word" style="width:100%;min-width:240px;height:300px;border-radius:16px" frameborder="0"></iframe>⑤ 常见问题
嵌入后页面空白 / 不显示？
① 检查你的网站是否允许 iframe（部分主题/插件会过滤）；② 广告拦截插件可能误拦，请关闭后刷新；③ 确认你的站点能通过 HTTPS 访问 englift.luomor.com。
如何调整卡片尺寸？
修改 iframe 的 width / height 属性，或用 style="width:100%" 让卡片宽度自适应容器。卡片内部排版会自动适配。
每次访问显示同一个单词吗？
每次加载 iframe 都会随机抽取一个新单词；访客点击卡片上的「🎲 换一个」可以不刷新页面继续抽词。
可以只显示某个级别的词库吗？
可以，在地址后加 ?level= 参数：xiaoxue（小学）/ chuzhong（初中）/ gaozhong（高中）/ cet4（四级）/ cet6（六级）/ kaoyan（考研）。不加则每次随机一个级别。
发音功能需要联网吗？
发音使用访客浏览器自带的语音合成，无需额外服务；几乎所有现代浏览器（Chrome/Edge/Safari）都支持。
卡片内容来自 EngLift 词库（小学至考研共 16,129 词），完全免费，无需注册。