🔧 高一英语自学站 · 核心技术要点

一、内容架构

二、词卡设计规范

每词卡包含：词性徽章 + 音标 + 词义（点击发音）、语法用法、考点（黄框）、技巧（绿框）、3 个例句（简单/中等/复杂，每句配语法拆解）。

• 例句颜色：🟢简单 / 🟡中等 / 🔴复杂
• 每批配套 2 个语法专题，共 19 个专题
• 选词：高中必修一~三新词，非初中基础动词

三、音频合成（核心）

用 edge-tts（微软免费神经语音）预生成 mp3，无需 API Key。

import edge_tts, asyncio
async def gen(text, path):
    await edge_tts.Communicate(text, "en-US-AriaNeural").save(path)
asyncio.run(gen("achieve", "w01.mp3"))

• 语音：en-US-AriaNeural
• 命名：w01.mp3=词，w01-s1.mp3=例句1
• 每批 40 个 mp3，全站 400 个

四、前端播放逻辑

function playA(url, text){              // 优先播 mp3
  try{ var a = new Audio(url); a.play().catch(function(){ speak(text); }); }
  catch(e){ speak(text); }              // 失败兜底到合成
}
function speak(t){ /* speechSynthesis */ }

词/音标/例句的 onclick 都调 playA(音频URL, 兜底文本)；例句用 CSS ::before{content:"🔊 "} 显示发音图标。

五、数据共享

单文件词库 words-data.js，总词表和自测页动态生成，词库只维护一处：

{b:1, w:"upset", p:"/ʌpˈset/", pos:"v./adj.", m:"使不安；心烦的"}

六、分页导航

[← 上一页] [1] [2] [3] … [当前高亮] … [10] [下一页 →]

当前页 class="pg cur" 高亮；首尾页 prev/next 用 class="pg disabled" 置灰。

七、自动化流程（新增批次）

1. 写 wordsN/index.html（onclick 先用 speak('text') 占位）
2. 跑脚本：正则提取词+例句 → edge-tts 生成 mp3 → 把 speak() 重写为 playA()
3. 更新 words-data.js、计数、索引、本地 md
4. scp 部署

word_re = re.compile(r'''class="word" onclick="speak\('((?:[^'\\]|\\.)*)'\)"''')
ex_re   = re.compile(r'''class="ex-en" onclick="speak\('((?:[^'\\]|\\.)*)'\)"''')

八、部署

cd D:/code_p16v/00_website_wheelfly
KEY=D:/code_p16v/key-cloud-tencent/ROCKY94_LAUNCH/id_ed25519
scp -i "$KEY" -q study/english/wordsN/index.html root@150.158.87.41:/www/wwwroot/wheelfly.cn/study/english/wordsN/index.html

九、易踩坑