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 多語言界面拉代碼并啟動服務執(zhí)行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.*是登錄注冊區(qū)看到名字就能定位。帶復數(shù)的字符串msgstr 會是兩個元素的數(shù)組運行時按數(shù)量選單復數(shù)形式。中文文件長這樣;; zh_CN.po 片段msgid 是英文鍵msgstr 是譯文上面一行標注源碼出處 #: src/app/main/ui/auth/login.cljs:270 msgid auth.login-tagline msgstr Penpot 是一款用于設計與代碼協(xié)作的自由開源設計工具鍵和界面代碼解耦翻譯者只動數(shù)據(jù)文件開發(fā)者不用改一行代碼。界面怎么知道該切哪個語言前端啟動時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))對不上就英文這種永不失敗的設計保證界面不會開天窗最壞情況用戶讀英文。你在設置里手動選語言時則會動態(tài)加載對應語言的翻譯包并即時換界面。Penpot 翻譯貢獻怎么跑社區(qū)翻譯在 Weblate 平臺在線翻譯管理網站進行倉庫里的腳本負責善后。在語言列表里點進某一種語言就能看到每類字符串的翻譯進度想加一門全新語言點Start new translation它會從英文模板生成骨架你直接往里填你保存的每條字符串都是等待審核狀態(tài)團隊確認后合入。代碼側的基線對齊命令是# 在 frontend/ 目錄執(zhí)行以英文基線為準清理并對齊所有語言文件 pnpm translations sync英文文件是唯一事實來源sync 會自動刪掉代碼里已不存在的字符串、對齊注釋語言分支不會帶著廢數(shù)據(jù)跑。邊界在哪說清一件事Penpot 多語言只翻譯工具界面不翻譯你畫的設計內容。設計稿里的中文要靠你自己設計——文本對象原生支持 rtlright-to-left從右到左排版方向做阿拉伯語或希伯來語時直接在文本對象上翻轉方向即可。需要按語言出不同文案的內容用組件覆蓋在組件實例里修改局部屬性的機制生成各語言的變體還有一個邊界社區(qū)翻譯的語言不一定 100% 完整。缺的字符串會按設計回退英文連英文文件都缺時會原樣顯示鍵名——那是提示缺翻譯不是程序崩潰。你可能會遇到Penpot 多語言配置三個典型問題1. 選了中文界面還是全英文癥狀改了語言、刷新頁面菜單依然是英文。原因舊翻譯包還在內存里或瀏覽器語言不在 34 種支持列表內自動識別沒生效。解法在個人資料設置里手動選一次語言再強刷頁面CtrlShiftR。這步卡住基本就是緩存沒清先別懷疑代碼。2. 字符串明明翻譯了界面還顯示英文癥狀zh_CN.po里有譯文界面卻顯示英文原文。原因運行時把空的 msgstr 當作無翻譯直接回退英文。解法確認該條 msgstr 不是空值改完后重啟./manage.sh run讓開發(fā)服務重新加載。3. 重構后一批字符串被標記 unused癥狀改完代碼PO 文件里許多條目標了# , unused。原因引用注釋是靠掃描源碼算出來的重構后舊代碼位置對不上。解法執(zhí)行pnpm translations rehash重新掃描源碼并刷新引用與標記。延伸從界面翻譯到設計本地化i18n 模塊已經把翻譯入口統(tǒng)一暴露插件開發(fā)者可以在插件系統(tǒng)上繼續(xù)搭實時翻譯、區(qū)域化輔助工具Penpot 多語言的邊界正被社區(qū)往外推。動手前建議先讀這三份項目內文件翻譯引擎 frontend/src/app/util/i18n.cljs、維護腳本 frontend/scripts/translations.js、官方貢獻指南 docs/contributing-guide/translations/?，F(xiàn)在就打開倉庫給你的團隊跑一個中文界面git clone https://gitcode.com/GitHub_Trending/pe/penpot然后./manage.sh run?！久赓M下載鏈接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.項目地址: https://gitcode.com/GitHub_Trending/pe/penpot創(chuàng)作聲明：本文部分內容由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 多語言界面拉代碼并啟動服務執(zhí)行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.*是登錄注冊區(qū)看到名字就能定位。帶復數(shù)的字符串msgstr 會是兩個元素的數(shù)組運行時按數(shù)量選單復數(shù)形式。中文文件長這樣;; zh_CN.po 片段msgid 是英文鍵msgstr 是譯文上面一行標注源碼出處 #: src/app/main/ui/auth/login.cljs:270 msgid auth.login-tagline msgstr Penpot 是一款用于設計與代碼協(xié)作的自由開源設計工具鍵和界面代碼解耦翻譯者只動數(shù)據(jù)文件開發(fā)者不用改一行代碼。界面怎么知道該切哪個語言前端啟動時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))對不上就英文這種永不失敗的設計保證界面不會開天窗最壞情況用戶讀英文。你在設置里手動選語言時則會動態(tài)加載對應語言的翻譯包并即時換界面。Penpot 翻譯貢獻怎么跑社區(qū)翻譯在 Weblate 平臺在線翻譯管理網站進行倉庫里的腳本負責善后。在語言列表里點進某一種語言就能看到每類字符串的翻譯進度想加一門全新語言點Start new translation它會從英文模板生成骨架你直接往里填你保存的每條字符串都是等待審核狀態(tài)團隊確認后合入。代碼側的基線對齊命令是# 在 frontend/ 目錄執(zhí)行以英文基線為準清理并對齊所有語言文件 pnpm translations sync英文文件是唯一事實來源sync 會自動刪掉代碼里已不存在的字符串、對齊注釋語言分支不會帶著廢數(shù)據(jù)跑。邊界在哪說清一件事Penpot 多語言只翻譯工具界面不翻譯你畫的設計內容。設計稿里的中文要靠你自己設計——文本對象原生支持 rtlright-to-left從右到左排版方向做阿拉伯語或希伯來語時直接在文本對象上翻轉方向即可。需要按語言出不同文案的內容用組件覆蓋在組件實例里修改局部屬性的機制生成各語言的變體還有一個邊界社區(qū)翻譯的語言不一定 100% 完整。缺的字符串會按設計回退英文連英文文件都缺時會原樣顯示鍵名——那是提示缺翻譯不是程序崩潰。你可能會遇到Penpot 多語言配置三個典型問題1. 選了中文界面還是全英文癥狀改了語言、刷新頁面菜單依然是英文。原因舊翻譯包還在內存里或瀏覽器語言不在 34 種支持列表內自動識別沒生效。解法在個人資料設置里手動選一次語言再強刷頁面CtrlShiftR。這步卡住基本就是緩存沒清先別懷疑代碼。2. 字符串明明翻譯了界面還顯示英文癥狀zh_CN.po里有譯文界面卻顯示英文原文。原因運行時把空的 msgstr 當作無翻譯直接回退英文。解法確認該條 msgstr 不是空值改完后重啟./manage.sh run讓開發(fā)服務重新加載。3. 重構后一批字符串被標記 unused癥狀改完代碼PO 文件里許多條目標了# , unused。原因引用注釋是靠掃描源碼算出來的重構后舊代碼位置對不上。解法執(zhí)行pnpm translations rehash重新掃描源碼并刷新引用與標記。延伸從界面翻譯到設計本地化i18n 模塊已經把翻譯入口統(tǒng)一暴露插件開發(fā)者可以在插件系統(tǒng)上繼續(xù)搭實時翻譯、區(qū)域化輔助工具Penpot 多語言的邊界正被社區(qū)往外推。動手前建議先讀這三份項目內文件翻譯引擎 frontend/src/app/util/i18n.cljs、維護腳本 frontend/scripts/translations.js、官方貢獻指南 docs/contributing-guide/translations/?，F(xiàn)在就打開倉庫給你的團隊跑一個中文界面git clone https://gitcode.com/GitHub_Trending/pe/penpot然后./manage.sh run?！久赓M下載鏈接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.項目地址: https://gitcode.com/GitHub_Trending/pe/penpot創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考