企业官网建设流程全解析

Penpot 多语言设计指南：10分钟切换界面语言并参与翻译贡献

【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot

上周你在 Penpot 里做完一套组件库，丢给欧洲同事后，对方回了一句："我在界面上找不到导出按钮在哪。"原因很简单——界面是英文，而你的团队只看得懂中文。Penpot 多语言能力可以解决这个麻烦：一键切换界面语言，还能直接参与翻译。对新手和带队的人来说，10分钟就能自己上手。

🚀 最小可行路径：5分钟跑通 Penpot 多语言界面

1. 拉代码并启动服务：执行git clone https://gitcode.com/GitHub_Trending/pe/penpot，然后在根目录运行./manage.sh run。
2. 启动后点右上角头像进入设置，在语言栏选择"简体中文"。也可以直接把浏览器语言设成中文，界面会自动识别。
3. 想改一个词？用编辑器打开frontend/translations/zh_CN.po，找到那个词的英文键（msgid），改掉对应的中文（msgstr）。

做完这三步，你就有了一个全中文的 Penpot。下面说说它背后的机制。

Penpot 多语言机制：四个问题拆解

翻译文件怎么组织？每种语言一个 PO 文件

界面里的所有字符串都存在 frontend/translations/ 目录，一种语言一个 .po 文件（gettext 翻译文件格式，开源项目通用）。每一行是"英文键 → 译文"，上面还挂着源码文件和行号的注释。键名按模块分段，比如auth.*是登录注册区，看到名字就能定位。带复数的字符串，msgstr 会是两个元素的数组，运行时按数量选单复数形式。中文文件长这样：

;; zh_CN.po 片段：msgid 是英文键，msgstr 是译文，上面一行标注源码出处 #: src/app/main/ui/auth/login.cljs:270 msgid "auth.login-tagline" msgstr "Penpot 是一款用于设计与代码协作的自由开源设计工具"

键和界面代码解耦，翻译者只动数据文件，开发者不用改一行代码。

界面怎么知道该切哪个语言？

前端启动时，frontend/src/app/util/i18n.cljs里的 i18n（internationalization，国际化）模块先读浏览器语言偏好，再逐个匹配内置的 34 种语言，全都对不上就退回英文。这就是"改了浏览器语言、界面跟着变"的全部逻辑：

;; i18n.cljs 的 autodetect：按序匹配浏览器语言，失败返回默认英语 (loop [locales (seq @browser-locales)] (if-let [locale (first locales)] (if (contains? supported locale) locale (recur (rest locales))) cf/default-language))

对不上就英文，这种"永不失败"的设计保证界面不会开天窗：最坏情况用户读英文。你在设置里手动选语言时，则会动态加载对应语言的翻译包并即时换界面。

Penpot 翻译贡献怎么跑？

社区翻译在 Weblate 平台（在线翻译管理网站）进行，仓库里的脚本负责善后。在语言列表里点进某一种语言，就能看到每类字符串的翻译进度：

想加一门全新语言？点"Start new translation"，它会从英文模板生成骨架，你直接往里填：

你保存的每条字符串都是"等待审核"状态，团队确认后合入。代码侧的基线对齐命令是：

# 在 frontend/ 目录执行：以英文基线为准，清理并对齐所有语言文件 pnpm translations sync

英文文件是唯一事实来源，sync 会自动删掉代码里已不存在的字符串、对齐注释，语言分支不会带着废数据跑。

边界在哪？

说清一件事：Penpot 多语言只翻译工具界面，不翻译你画的设计内容。设计稿里的中文要靠你自己设计——文本对象原生支持 rtl（right-to-left，从右到左）排版方向，做阿拉伯语或希伯来语时直接在文本对象上翻转方向即可。需要按语言出不同文案的内容，用组件覆盖（在组件实例里修改局部属性的机制）生成各语言的变体：

还有一个边界：社区翻译的语言不一定 100% 完整。缺的字符串会按设计回退英文，连英文文件都缺时会原样显示键名——那是提示缺翻译，不是程序崩溃。

你可能会遇到：Penpot 多语言配置三个典型问题

1. 选了中文，界面还是全英文

症状：改了语言、刷新页面，菜单依然是英文。原因：旧翻译包还在内存里，或浏览器语言不在 34 种支持列表内，自动识别没生效。解法：在个人资料设置里手动选一次语言，再强刷页面（Ctrl+Shift+R）。这步卡住基本就是缓存没清，先别怀疑代码。

2. 字符串明明翻译了，界面还显示英文

症状：zh_CN.po里有译文，界面却显示英文原文。原因：运行时把空的 msgstr 当作"无翻译"，直接回退英文。解法：确认该条 msgstr 不是空值，改完后重启./manage.sh run让开发服务重新加载。

3. 重构后一批字符串被标记 unused

症状：改完代码，PO 文件里许多条目标了# , unused。原因：引用注释是靠扫描源码算出来的，重构后旧代码位置对不上。解法：执行pnpm translations rehash，重新扫描源码并刷新引用与标记。

延伸：从界面翻译到设计本地化

i18n 模块已经把翻译入口统一暴露，插件开发者可以在插件系统上继续搭实时翻译、区域化辅助工具，Penpot 多语言的边界正被社区往外推。动手前建议先读这三份项目内文件：翻译引擎 frontend/src/app/util/i18n.cljs、维护脚本 frontend/scripts/translations.js、官方贡献指南 docs/contributing-guide/translations/。

现在就打开仓库，给你的团队跑一个中文界面：git clone https://gitcode.com/GitHub_Trending/pe/penpot，然后./manage.sh run。

【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot