在 Data-Science-For-Beginners 中扩展本地化测验应用quiz-app从翻译注入到 Azure 静态部署【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners本指南以西班牙语版测验应用说明文档translations/es/quiz-app/README.md为骨架讲解 Data-Science-For-Beginners 课程自带的 Vue 2 测验应用quiz-app如何承载全部 40 个课前/课后测验如何为课程新增一套完整的本地化测验资源以及如何通过 Azure Static Web Apps 将其持续构建并部署上线。读完本文你将掌握assets/translations目录的翻译注入流程、App.vue语言下拉框与?loc查询参数的联动机制以及 GitHub Actions 工作流的配置要点可直接用于扩充本仓库的多语言测验内容。测验应用在课程中的作用与整体结构Data-Science-For-Beginners 是面向初学者的 20 课数据科学课程每课配有课前pre-lecture与课后post-lecture测验共 40 个编号从 0 开始。测验由仓库根目录下的 Vue 单页应用 quiz-app 承载构建产物为纯静态文件可托管于任意静态站点服务。从 quiz-app 的目录结构看应用采用 Vue CLI 标准布局public/index.html 与 public/routes.json入口 HTML 与 SPA 路由回退配置src/main.js 与 src/App.vue应用入口与根组件src/router/index.js定义/首页与/quiz/:id单个测验两条路由src/components/Quiz.vue核心答题组件src/assets/translations/按语言组织的测验题目 JSON 资源。应用依赖在 package.json 中声明vue^2.6.11、vue-router^3.4.9、vue-i18n^8.22.2以及 Vue CLI 4.5 系列构建工具链。也就是说这是一套基于 Vue 2 生态的多语言前端工程。新增一套翻译测验完整操作流程原文档给出了为课程添加翻译测验集的四步流程下面结合仓库源码逐条展开。第一步创建与英文版对齐的测验 JSON原始测验canonical quizzes位于 quiz-app/src/assets/translations/en测验被拆分为多个分组每组对应一个 JSON 文件。以西班牙语版 quiz-app/src/assets/translations/es/group-1.json 为例其结构为顶层数组包裹一个对象内部包含title测验页整体标题complete全部答对后的完成提示语error答错时的提示语quizzes测验数组每个测验含id、title与quiz题目数组每题又含questionText与answerOptions每个选项由answerText与isCorrect字符串true/false组成。新增翻译时须在assets/translations下建立与目标语言同名的目录如es、fr并创建与英文版数量、编号完全对齐的group-N.json文件。编号必须与对应的测验小节严格一致——课程共 40 个测验编号从 0 开始分组只是组织方式测验id才是路由定位的依据见下文路由分析。第二步在语言目录内编写 index.js 汇总导出翻译完成后需要在对应语言目录中编辑index.js按照en目录的约定导入所有分组文件。参考 quiz-app/src/assets/translations/en/index.js 与 quiz-app/src/assets/translations/es/index.jsimport es0 from ./group-1.json; import es1 from ./group-2.json; // ... 其余分组 const quiz { 0: es0[0], 1: es1[0], 2: es2[0], // ... 按分组顺序映射 }; export default quiz;注意这里取的是每个 JSON 数组的第 0 个元素es0[0]因为分组文件本身是单元素数组包裹一个大对象的结构。最终导出的对象以序号为键供上层按语言合并。第三步在 translations 总入口注册新语言编辑 quiz-app/src/assets/translations/index.js导入新语言目录并注册到messages对象中import englishQuizzes from ./en/; import frenchQuizzes from ./fr/; import spanishQuizzes from ./es/; const messages { en: englishQuizzes, fr: frenchQuizzes, es: spanishQuizzes, }; export default messages;仓库现状是已内置en、fr、es三种语言新增语言时把en的 import 语句替换为新语言目录即可。第四步在 App.vue 中添加语言下拉选项编辑 quiz-app/src/App.vue 中导航栏的select元素添加对应的option。关键约束是本地化缩写必须与语言文件夹名完全一致因为应用直接以该缩写作为键从messages取数据并作为?loc参数值使用select v-modellocale optionen/option optiones/option /selectApp.vue的created()钩子读取路由查询参数若存在?locxxx则以它为locale否则回退为en同时通过 watch 将locale同步到$root.$i18n.locale驱动 vue-i18n 切换语言。第五步更新翻译课程中的测验链接最后如果翻译后的课程文档中已有指向测验的链接需要为这些链接追加本地化查询参数例如?locfr。在西班牙语翻译仓库中translations/es/AGENTS.md 与 translations/es/CONTRIBUTING.md 也明确要求贡献者执行这一步骤。实际效果是点击测验链接后应用直接以目标语言渲染题目无需用户手动切换下拉框。底层实现路由、答题逻辑与语言切换路由如何定位单个测验quiz-app/src/router/index.js 使用 history 模式定义了/Home与/quiz/:idQuiz两条路由/quiz/:id中的:id即为测验编号。因此课程中的测验链接形如/quiz/0?locesQuiz.vue在created()中读取this.$route.params.id与this.$route.query.loc分别得到测验编号与语言。答题组件的判分逻辑quiz-app/src/components/Quiz.vue 中模板遍历当前语言的所有分组与测验仅渲染route quiz.id的那一道测验。判分逻辑在handleAnswerClick(isCorrect)方法中handleAnswerClick(isCorrect) { this.error false; let nextQuestion this.currentQuestion 1; if (isCorrect true) { // 每个测验固定 3 道题 if (nextQuestion 3) { this.currentQuestion nextQuestion; } else { this.complete true; } } else { this.error true; } }从源码可以确认两点实现事实每个测验固定 3 道题答错不前进、显示错误提示答对则推进到下一题3 题全部答对后显示完成提示complete文案来自对应语言的 JSON。这也是新增翻译时必须保证每题恰好 3 个题目结构的原因——超出或缺失都会破坏判分流程。本地开发与构建命令在 quiz-app 目录下执行以下命令对应 package.json 中的 scripts命令作用npm install安装依赖core-js、vue、vue-i18n、vue-router及 Vue CLI 工具链npm run serve启动开发服务器编译并热重载hot-reload便于本地调试翻译效果npm run build生产构建压缩并输出到dist目录npm run lint使用 ESLinteslint-plugin-vueeslint:recommended检查并自动修复代码问题browserslist配置为 1%、last 2 versions、not dead构建时会据此生成兼容目标浏览器的产物。构建产物为纯静态文件output_location即dist目录这正是下一步部署时要用到的路径。部署到 Azure Static Web Apps原文档提供了从 fork 仓库到监控部署的完整六步指南是仓库内多语言测验应用 云端持续部署的落地路径Fork 仓库确保静态应用代码位于你自己的 GitHub 仓库中创建静态 Web 应用在 Azure 门户 中点击Create a resource并搜索Static Web App然后创建配置应用基础信息Basics选择订阅、新建或复用资源组、填写应用名称、选择离用户最近的区域部署详情Deployment Details来源选择 GitHub授权 Azure 访问 GitHub 账户选择组织、包含应用的仓库以及要部署的分支构建详情Build Details构建预设选应用所用框架本仓库为 Vue应用位置填写quiz-app代码所在目录API 位置留空本应用无 API输出位置填写dist构建产物目录创建并审查确认配置后点击CreateAzure 会创建所需资源并在你的仓库中生成 GitHub Actions 工作流文件.github/workflows/azure-static-web-apps-name.ymlGitHub Actions 工作流该工作流自动处理构建与部署监控部署进入仓库的 Actions 标签页查看工作流执行完成后应用即在 Azure 提供的 URL 上生效。工作流文件示例原文档给出的工作流示例要点如下注意其中的注释来自原文档YAML 中需写成#注释name: Azure Static Web Apps CI/CD on: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main jobs: build_and_deploy_job: runs-on: ubuntu-latest name: Build and Deploy Job steps: - uses: actions/checkoutv2 - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deployv1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} repo_token: ${{ secrets.GITHUB_TOKEN }} action: upload app_location: quiz-app # 应用源码路径 api_location: # API 源码路径可选本应用无 API output_location: dist # 构建产物目录可选关键配置说明on.push.branches与on.pull_request触发时机向main分支推送或针对main的 PR 会触发构建azure_static_web_apps_api_token部署令牌由 Azure 创建资源时自动注入为仓库 Secretrepo_token使用内置的GITHUB_TOKEN用于工作流对仓库的只读访问app_location指向本仓库的 quiz-app 目录而非仓库根目录output_locationnpm run build的输出目录dist由于本应用没有后端 APIapi_location为空字符串。配套的 quiz-app/public/routes.json 将 SPA 的任意路径回退到index.html保证/quiz/:id这类前端路由在刷新或直接访问时也能被静态服务正确返回。贡献与致谢说明原文档特别注明该测验应用改编自 arpan45/simple-quiz-vue 的原始版本。此外西班牙语版文档末尾声明该翻译由 Co-op Translator 自动翻译服务生成自动翻译可能存在错误或不准确之处应以英文原版 quiz-app/README.md 为权威来源涉及关键信息时建议人工校对——这一点在参照西班牙语文档进行操作时应予以留意。小结围绕测验应用quiz-app这条主线本文完整复现了原文档的翻译注入流程JSON 对齐 → 语言内index.js→ 总入口注册 →App.vue下拉框 → 课程链接追加?loc参数并结合 Quiz.vue、router/index.js、translations/index.js 等源码剖析了测验定位、三题判分与语言切换的实现细节最后给出了本地开发命令与 Azure Static Web Apps 六步部署流程及工作流配置。对于希望为课程贡献新语言测验的开发者按照上述五个步骤即可完成一套完整的多语言测验上线闭环。【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考