资讯动态

TeXlyre 国际化实战:i18next + Crowdin 多语言翻译流水线全解

发布时间:2026/10/23 8:28:13 来源:尧图企业网站定制
【免费下载链接】texlyreA local-first LaTeX Typst web editor with real-time collaboration offline support项目地址https://gitcode.com/gh_mirrors/te/texlyre点击查看免费下载TeXlyre 国际化实战本地优先的 LaTeX Typst 协作 Web 编辑器 TeXlyre 如何基于 i18next 与 Crowdin用一套约 2400 行的脚本流水线支撑 5 种语言、2794 个翻译键的自动提取、覆盖率统计与社区翻译协作本文带你完整拆解这条多语言翻译流水线的设计思路与落地细节。为什么要做国际化一个界面五种语言TeXlyre 是一款运行在浏览器里的 LaTeX / Typst 编辑器面向全球用户。官方目前维护 5 种界面语言全部集中在 translations/locales/ 目录下语言代码翻译覆盖率备注Englishen100%源语言基准Arabicar95%RTL 从右向左书写简体中文zh94%zh-CN.jsonDeutschde92%Italianoit91%这些覆盖率数字不是手工维护的而是由脚本自动计算后写回 translations/locales.config.json。整个文件共2794 个翻译键——对一款 Web 编辑器来说这是一个相当不小的国际化体量。要支撑这个体量的国际化TeXlyre 的流水线分为三层运行时i18next、构建时脚本scripts/i18n/、社区协作Crowdin。下面逐层拆解。运行时i18next 初始化与语言切换一个 46 行的初始化文件运行时核心是 src/i18n.ts它把 5 个 locale JSON 文件打包进i18next的resources并做了两件关键配置lng: enfallbackLng: en默认英文缺词时回退英文保证任何语言下界面不出现裸 key导出一个轻量的t()函数供全项目调用。值得留意的是一个小细节简体中文在resources中注册为zh而非zh-CN与locales.config.json中的语言代码对齐。LocaleContext把语言变成响应式状态src/contexts/LocaleContext.tsx 负责把语言切换变成全局响应式行为从设置项language读取用户选择调用i18next.changeLanguage()同步更新html的lang属性处理 RTL阿拉伯语等从右向左书写的语言会自动给html设置dirrtl整个布局镜像翻转派发language-changed自定义事件供其他组件如日期、数字格式化联动刷新。方向策略也可在设置里手动指定auto跟随语言、ltr或rtl。语言设置项与覆盖率展示语言选择 UI 注册在 src/settings/registerLocaleSettings.tsx 中。它直接读取locales.config.json生成下拉选项标签格式为原生名 (英文名)如简体中文 (Chinese (Simplified))因此新增语言无需改 UI 代码——配置文件加一行即可出现在下拉菜单里并自动显示该语言的翻译覆盖率。翻译文件规范用英文原句做键打开 translations/locales/en.json 会看到一个非常规但高效的设计翻译键就是完整的英文原句而不是nav.home这类缩写键。Save: Save, {count} bytes: {{count}} bytes, {count} bytes_one: {{count}} byte, {count} bytes_other: {{count}} bytes这种句子即键的做法有两个好处翻译者看到的是自然英文无需查键值对照表降低 Crowdin 社区参与门槛键永不与界面脱节——代码里的字符串改了什么键就跟着变工具链会自动检出差异。代价是复杂的复数规则。TeXlyre 采用 i18next 的多后缀约定后缀来自 CLDR 规范_zero、_one、_two、_few、_many、_other。不同语言需要的形态不同阿拉伯语需要 6 种德语只需 2 种CONTRIBUTING.md 明确要求变量只支持{count}且所有标签如strong /和占位符{{count}}必须原样保留。还有一个专为 Crowdin 准备的产物base-en.json。它由 scripts/i18n/generate-base-plurals.cjs 自动生成把每个复数键缺失的形态全部补齐成种子条目让翻译平台上的语言版本可以按形态独立勾选完成度。构建时约 2400 行的 i18n 脚本流水线这是整条流水线最工程化的部分全部位于 scripts/i18n/共 15 个模块、约 2400 行 Node.js 代码统一入口是 scripts/translate-pages.cjs。1. 提取AST 扫描而非正则extract-translations.cjs 基于Babel 解析器对整个src/做 AST 遍历收集 JSX 文本、placeholder/title/alt/aria-label属性、registerSetting()中的label/description等可翻译字符串写入en.json。用 AST 而不是正则的好处自动忽略 URL、邮箱、纯数字、常量内置ignorePatterns能自动识别files.length这类计数表达式并转换为{count}占位符生成对应复数键。2. 回写把英文硬编码自动替换为 t() 调用apply-translations.cjs 方向相反扫描源码中仍是硬编码英文的 JSX 文本自动改写成t(...)调用并自动注入import { t } from /i18n由 import-manager.cjs 处理。两个贴心的工程细节支持--dry-run预览模式默认生成.bak备份文件回写失败不伤源码改写后的代码会经 validate-transforms.cjs 二次语法校验。设置项有独立的 apply-settings-translations.cjs专门处理registerSetting()调用。3. 体检缺失键、复数与覆盖率npm 命令作用对应脚本npm run i18n:extract从源码提取英文文案extract-translations.cjsnpm run i18n:preview/i18n:fix预览 / 应用t()改写apply-translations.cjsnpm run i18n:coverage计算各语言覆盖率calculate-coverage.cjsnpm run i18n:missing找出源码用了但 JSON 里没有的键detect-missing-keys.cjsnpm run i18n:validate校验 locale JSON 合法性并定位错误行列validate-json.cjsnpm run i18n:detect检出应转 i18n 的动态内容detect-dynamic-content.cjsnpm run i18n:full一键跑完 预览 → 提取 → 覆盖率 → 回写预览—其中复数审计值得单说detect-missing-plurals.cjs 使用浏览器原生的Intl.PluralRulesCLDR 数据判断每种语言需要哪些复数形态只生成该语言实际需要的形态种子避免人工判断语言规则出错。npm run build:prod中内置了i18n:coverage保证每次发版前覆盖率数据都是最新的。社区协作Crowdin 如何接入翻译本身不在代码仓库里发生而是在Crowdin平台上由社区完成流程如下仓库发布新版后维护者把base-en.json含全部复数形态种子推送到 Crowdin 作为源文件社区译者按语言认领、在线翻译标签与{{count}}变量必须原样保留每个版本发布时人工把 Crowdin 上的译文手动同步回translations/locales/ 对应的 JSON 文件本地运行npm run i18n:coverage更新locales.config.json设置界面里的覆盖率即随之刷新。选择发布时同步而非 CI 自动拉取配合i18n:validate等本地校验脚本能在合并前拦住格式错误的译文文件。如何给 TeXlyre 添加一种新语言依据 CONTRIBUTING.md 的官方指引只需四步完全不需要动 UI 组件在 translations/locales/ 新建xx.json可从en.json复制骨架在 src/i18n.ts 中import并注册到resources在 translations/locales.config.json 的languages数组加一条配置code、name、nativeName、directionRTL 语言填rtl、filePath运行npm run i18n:full完成排序、校验与覆盖率计算。完成后新语言会自动出现在设置面板的语言下拉框中并带 0% 覆盖率的实时进度。小结可复用的国际化工程清单TeXlyre 的国际化实践浓缩成一条可复用清单句子即键翻译键用英文原句平台协作零门槛AST 驱动提取与回写都基于 Babel 遍历杜绝正则的误伤与漏网CLDR 兜底复数形态交给Intl.PluralRules不靠人脑记语言规则覆盖率即数据locales.config.json让翻译进度可见、可比、可发版平台 仓库双轨Crowdin 管翻译过程i18n:validate/i18n:coverage管数据质量。无论项目用什么前端框架只要把提取 → 回写 → 校验 → 覆盖率四件事脚本化就能以 2794 个键的量级依然保持多语言维护不失控。赞分享【免费下载链接】texlyreA local-first LaTeX Typst web editor with real-time collaboration offline support项目地址https://gitcode.com/gh_mirrors/te/texlyre点击查看免费下载相关推荐Lichess多语言与国际化Crowdin社区翻译系统Lichess多语言与国际化Crowdin社区翻译系统 Lichess作为全球最大的免费开源国际象棋平台通过精心设计的国际化架构和Crowdin社区翻译系统后端游戏开发即时通讯CANN/asc-devkit AI CPU调试打印APIprintfa nameZH CN_TOPIC_0000002507683569 /a 产品支持情况 Ascend 950PR/Ascend 950D人工智能深度学习高性能计算CANN戴森球计划工厂蓝图库从零到宇宙帝国的终极建造指南戴森球计划工厂蓝图库从零到宇宙帝国的终极建造指南 想象一下你站在一个荒芜的星球上手中只有基础工具却要在浩瀚宇宙中建造一个能包裹恒星的戴森球。这听起来像是数据集创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价 →
↑