Penpot多语言设计实操5步完成界面翻译【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot先聊最扎心的那个场景做多语言界面时最头疼的往往是语言一切换文案长短不对齐想修翻译又找不到文件在哪改。开源设计平台 Penpot 把这件事拆得很细——49 个语言的翻译文件直接放在仓库里本文带你把本地环境跑起来、看懂翻译文件的结构最终提交并验证你的第一条翻译全程不用离开终端和浏览器。项目速览Penpot 内置的多语言武器库上手之前先认识几件核心装备都是开源可查、可直接改的49 个 PO 翻译文件位于 frontend/translations/ 目录每种语言一个.po文件zh_CN.po对应简体中文ar.po对应阿拉伯语命名遵循 ISO 语言代码。tr统一翻译入口前端所有界面文案都通过一个函数取词天然支持参数占位和复数形式改一处翻译全局生效。社区协作翻译流Penpot 依托 Weblate 平台组织翻译社区提交的译文经审核后进入下个版本贡献流程写在 CONTRIBUTING.md 里。RTL 布局支持阿拉伯语、希伯来语这类从右往左书写的语言有专门适配界面镜像排布不会乱。组件变体与覆盖同一组件可以按语言换文案不用为每个区域重画组件。想系统了解平台能力可以直接翻仓库里的 docs/ 目录用户指南和技术指南都按章节组织好了。底层逻辑一个字符串是怎么变成你语言的说白了Penpot 的国际化就是三层流水线输入、处理、输出各占一层输入启动时读取浏览器的navigator.language得到你本地偏好语言的候选列表。处理用候选列表逐一匹配supported-locales约 30 个受支持语言的白名单命中即加载对应的translation.{locale}.js资源包命中不了就回落到默认语言英语。输出界面代码调用tr按 key 查词查到就渲染查不到自动回退英语所以缺翻译不会导致界面白屏。匹配逻辑的源码不长在 frontend/src/app/util/i18n.cljs 里;; 语言自动检测按浏览器偏好顺序匹配受支持语言 (defn- autodetect [] (let [supported (into #{} (map :value supported-locales))] (loop [locales (seq browser-locales)] (if-let [locale (first locales)] (if (contains? supported locale) locale (recur (rest locales))) cf/default-language))))这段代码的作用就一句话把你浏览器的语言偏好从高到低依次试探找到第一个受支持的语言找不到就用英语兜底。PO 文件到 JS 资源的转换由构建脚本完成frontend/scripts/translations.js 负责 rehash扫描源码里的tr调用、标记废弃条目和 sync以英语为基准同步其他语言文件的条目集。分步实操从零跑通一个新语言克隆源码并启动本地开发环境先把仓库拉到本地Penpot 的本地开发由manage.sh统一调度# 克隆仓库并启动本地开发服务 git clone https://gitcode.com/GitHub_Trending/pe/penpot cd penpot ./manage.sh run启动后浏览器打开本地地址确认画布、图层面板都能正常操作环境就算通了。看懂 PO 文件结构定位你要改的翻译 key打开frontend/translations/zh_CN.po结构非常直白——每个条目就是一对 key 和译文;; PO 文件条目示例key 即源码中的 tr 字符串 msgid auth.forgot-password msgstr 忘记密码msgid是英文原文兼 keymsgstr是译文。你只需要知道要找的 key 长什么样全局搜索一下就能在几十个文件里秒定位。在 Weblate 上提交你的第一条翻译社区翻译走 Weblate 平台进入 Penpot 的 frontend 项目后如果目标语言还没有条目先点Start new translation创建语言已有条目的话直接进未翻译列表逐条填写并提交建议。提交后条目会进入待审核状态。审核通过后会合并进仓库的 PO 文件下个版本即可见。用 sync 命令同步翻译文件社区合并后本地仓库的 PO 文件要跟着更新。这里有个小细节各语言文件可能和英语基准文件脱节——比如英文删了一个 key其他语言还留着。跑一遍同步命令即可对齐# 以英语为基准同步所有语言文件的条目集 cd frontend node scripts/translations.js sync执行完所有.po文件会被重新排序写入条目与en.po保持一致CI 阶段不会因条目漂移报错。在浏览器验证效果并处理回退重启 watch 服务让新的translation.{locale}.js重新生成然后强刷页面。在 Penpot 设置里把界面语言切到目标语言逐块检查菜单、工具提示和空状态文案。遇到个别地方还是英文别慌——这正是回退机制在工作说明那条 key 在该语言下还没译文补上即可。踩坑实录新手最容易翻车的 3 件事中文切完还是英文现象设置里选了简体中文界面纹丝不动。 根因translation.zh_cn.js没重新生成或者浏览器缓存了旧资源包。 解法确认 watch 进程在跑、重启后强刷CtrlShiftR源码里加载资源带了?version版本号就是为了击穿缓存如果你改了构建输出却看到旧内容多半是版本号没变。复数文案错得莫名其妙现象类似1 个页面 / 2 个页面的文案单数复数全显示复数形式。 根因PO 里该 key 只写了一条msgstr而 Penpot 靠(i18n/c 计数)在运行时二选一条目缺复数形式时选择逻辑会落到默认分支。 解法按 gettext 复数格式写两条msgstr单数、复数各一并在 key 注释里带上复数规则说明。界面直接显示labels.xxx这种 key 原文现象新加的界面位置显示的不是文案而是下划线 key。 根因源码里新写的tr xxx调用还没有被 rehash 进任何 PO 文件en.po缺条目时回退逻辑只能把 key 本身当文案输出。 解法先跑node scripts/translations.js rehash让脚本扫描源码补齐条目再跑sync然后补译文。进阶当前版本就能用、但常被忽视的能力⚠️ 这三个能力不需要等任何路线图现在就有复数计数器(i18n/c)调用翻译时把数量参数包一层运行时按值自动切换单复数分支是上面那个坑的正解也是写多语言文案的标配姿势。penpotTranslations全局注入前端启动时会检查这个全局变量你可以用它挂一份自定义译文覆盖默认值适合企业内部私有部署时注入品牌化文案改完重启 watch 即可生效。RTL 语言的一等公民地位把界面切到ar阿拉伯语或he希伯来语布局镜像、文本对齐都会跟随变化做面向中东市场的设计时不用自己 hack。做区域化组件库时配合组件覆盖能力换文案最省事主组件只定义结构各语言实例只改文本样式、间距完全复用。生态连接文档、社区与周边工具官方文档仓库 docs/ 目录下有完整的技术指南架构、部署、排障和用户指南界面操作翻译协作细节见 docs/contributing-guide/translations/。源码仓库即本文所在仓库frontend/是界面与翻译的主战场。社区论坛Penpot 官方论坛是提问和晒作品的主要去处遇到构建问题先去搜一轮。问题反馈官方 issue 跟踪器按模块打了标签国际化相关问题归在i18n相关标签下报 bug 时附浏览器语言和复现步骤会快很多。周边对比Figma 闭源且只能跑在云端适合快速协作但不方便私有化Penpot 开源可自部署数据完全在自己手里。InVision 则更偏原型走查协作深度画布能力不如这两个。落地建议与资源汇总建议一先把en.po和你要维护的语言文件各通读一遍熟悉 key 的命名前缀auth.、labels.、common.这类之后再定位任何一条文案都不超过一分钟。建议二社区翻译走 Weblate 提建议本地实验走 PO 文件直改两条路别混前者审核后回流、后者适合私有部署的即时验证。建议三养成rehash → sync → 强刷验证的固定动作序列三个踩坑坑位基本都能绕开。资源上记住三个入口就够了frontend/src/app/util/i18n.cljs 看机制frontend/translations/ 改文案frontend/scripts/translations.js 跑同步。从克隆仓库到第一条翻译生效整个过程比想象中短——多语言界面协作的门槛从来不在语言本身而在你有没有一套顺手的工具流。【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考