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 多语言界面拉代码并启动服务执行git clone https://gitcode.com/GitHub_Trending/pe/penpot然后在根目录运行./manage.sh run。启动后点右上角头像进入设置在语言栏选择简体中文。也可以直接把浏览器语言设成中文界面会自动识别。想改一个词用编辑器打开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里的 i18ninternationalization国际化模块先读浏览器语言偏好再逐个匹配内置的 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 多语言只翻译工具界面不翻译你画的设计内容。设计稿里的中文要靠你自己设计——文本对象原生支持 rtlright-to-left从右到左排版方向做阿拉伯语或希伯来语时直接在文本对象上翻转方向即可。需要按语言出不同文案的内容用组件覆盖在组件实例里修改局部属性的机制生成各语言的变体还有一个边界社区翻译的语言不一定 100% 完整。缺的字符串会按设计回退英文连英文文件都缺时会原样显示键名——那是提示缺翻译不是程序崩溃。你可能会遇到Penpot 多语言配置三个典型问题1. 选了中文界面还是全英文症状改了语言、刷新页面菜单依然是英文。原因旧翻译包还在内存里或浏览器语言不在 34 种支持列表内自动识别没生效。解法在个人资料设置里手动选一次语言再强刷页面CtrlShiftR。这步卡住基本就是缓存没清先别怀疑代码。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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Penpot 多语言设计指南：10分钟切换界面语言并参与翻译贡献
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 多语言界面拉代码并启动服务执行git clone https://gitcode.com/GitHub_Trending/pe/penpot然后在根目录运行./manage.sh run。启动后点右上角头像进入设置在语言栏选择简体中文。也可以直接把浏览器语言设成中文界面会自动识别。想改一个词用编辑器打开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里的 i18ninternationalization国际化模块先读浏览器语言偏好再逐个匹配内置的 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 多语言只翻译工具界面不翻译你画的设计内容。设计稿里的中文要靠你自己设计——文本对象原生支持 rtlright-to-left从右到左排版方向做阿拉伯语或希伯来语时直接在文本对象上翻转方向即可。需要按语言出不同文案的内容用组件覆盖在组件实例里修改局部属性的机制生成各语言的变体还有一个边界社区翻译的语言不一定 100% 完整。缺的字符串会按设计回退英文连英文文件都缺时会原样显示键名——那是提示缺翻译不是程序崩溃。你可能会遇到Penpot 多语言配置三个典型问题1. 选了中文界面还是全英文症状改了语言、刷新页面菜单依然是英文。原因旧翻译包还在内存里或浏览器语言不在 34 种支持列表内自动识别没生效。解法在个人资料设置里手动选一次语言再强刷页面CtrlShiftR。这步卡住基本就是缓存没清先别怀疑代码。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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考