Penpot 多语言界面改对一个 PO 文件40 种语言就都跟上了【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot把界面切到西班牙语按钮文案却溢出了容器别慌这是 Penpot 国际化最常见的现场。Penpot 的多语言支持自带 40 多个语言的翻译文件你改一条 PO 记录界面文案就能跟着变。下面用一次真实的文案修改走通整条链路。 三步改好一条多语言翻译先把界面切到目标语言Penpot 启动时读浏览器语言偏好匹配不上就落到英语。支持列表有 35 项从英语到阿拉伯语都在。要验证中文就在账号资料里手动指定语言。切换后界面立即重载对应翻译包不用重启服务。在 PO 文件里定位那条字符串所有语言资源放在frontend/translations/每种语言一个 .po 文件简体中文是zh_CN.po。每条记录由 msgid键名和 msgstr译文组成注释里还标了键来自哪个源码文件。先搜键名再动手别凭印象改grep -n auth.confirm-password frontend/translations/zh_CN.po编译成 JS改动才生效界面读的是编译产物 translation. .js不读 PO 原文。frontend/scripts/translations.js负责把 .po 转成它。改完文件在 frontend 目录跑一次pnpm translations再刷页面即可。开发环境里 watch 脚本盯着 translations/ 目录文件一变会自动重编多数时候你只需刷新。长文案和字体也要一起调同一句按钮文案德语可能比英语长三四成。文本容器别写死像素交给弹性布局撑开。多语言变体可以做成组件用覆盖只改文本就能复用。CJK 字体的上传入口在字体设置里缺字时渲染会回退建议提前备好。 原理速览多语言翻译为什么多一道编译PO 是 gettext 通用格式翻译工具链好接这是选它的原因。社区在 PO 文件里协作构建时打包成前端能直接加载的 JS翻译和代码就此解耦。运行时查不到译文先回退英语再查不到才显示键名。这条链路写在frontend/src/app/util/i18n.cljs里。⚠️ 踩坑与变通改完 .po 界面没反应→ 界面只读编译产物PO 只是源文件 → 跑一次pnpm translations或等 watch 脚本重编后再刷页面。界面出现 a.b.c 这种点号键名→ 该语言缺这条回退英语也缺 → 先补en.po的基线再逐语言填。浏览器是中文、界面却显示英语→ 自动检测没命中支持列表落到默认语言 → 在账号资料里手动指定语言。继续深入文档、脚本与 PO 目录想贡献给社区先看翻译贡献流程docs/contributing-guide/translations/里面的截图能对照你的界面。想看懂编译细节直接读frontend/scripts/translations.js。40 多个 .po 文件都躺在frontend/translations/想加语言就从这里找参照。现在就打开frontend/translations/zh_CN.po挑一条 msgstr 改掉跑一遍编译看你的界面用中文说出这句话。本地要跑起来的话git clone https://gitcode.com/GitHub_Trending/pe/penpot【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考