Penpot 多語(yǔ)言設(shè)計(jì)指南10分鐘切換界面語(yǔ)言并參與翻譯貢獻(xiàn)【免費(fèi)下載鏈接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/pe/penpot上周你在 Penpot 里做完一套組件庫(kù)丟給歐洲同事后對(duì)方回了一句我在界面上找不到導(dǎo)出按鈕在哪。原因很簡(jiǎn)單——界面是英文而你的團(tuán)隊(duì)只看得懂中文。Penpot 多語(yǔ)言能力可以解決這個(gè)麻煩一鍵切換界面語(yǔ)言還能直接參與翻譯。對(duì)新手和帶隊(duì)的人來(lái)說(shuō)10分鐘就能自己上手。 最小可行路徑5分鐘跑通 Penpot 多語(yǔ)言界面拉代碼并啟動(dòng)服務(wù)執(zhí)行g(shù)it clone https://gitcode.com/GitHub_Trending/pe/penpot然后在根目錄運(yùn)行./manage.sh run。啟動(dòng)后點(diǎn)右上角頭像進(jìn)入設(shè)置在語(yǔ)言欄選擇簡(jiǎn)體中文。也可以直接把瀏覽器語(yǔ)言設(shè)成中文界面會(huì)自動(dòng)識(shí)別。想改一個(gè)詞用編輯器打開(kāi)frontend/translations/zh_CN.po找到那個(gè)詞的英文鍵msgid改掉對(duì)應(yīng)的中文msgstr。做完這三步你就有了一個(gè)全中文的 Penpot。下面說(shuō)說(shuō)它背后的機(jī)制。Penpot 多語(yǔ)言機(jī)制四個(gè)問(wèn)題拆解翻譯文件怎么組織每種語(yǔ)言一個(gè) PO 文件界面里的所有字符串都存在 frontend/translations/ 目錄一種語(yǔ)言一個(gè) .po 文件gettext 翻譯文件格式開(kāi)源項(xiàng)目通用。每一行是英文鍵 → 譯文上面還掛著源碼文件和行號(hào)的注釋。鍵名按模塊分段比如auth.*是登錄注冊(cè)區(qū)看到名字就能定位。帶復(fù)數(shù)的字符串msgstr 會(huì)是兩個(gè)元素的數(shù)組運(yùn)行時(shí)按數(shù)量選單復(fù)數(shù)形式。中文文件長(zhǎng)這樣;; zh_CN.po 片段msgid 是英文鍵msgstr 是譯文上面一行標(biāo)注源碼出處 #: src/app/main/ui/auth/login.cljs:270 msgid auth.login-tagline msgstr Penpot 是一款用于設(shè)計(jì)與代碼協(xié)作的自由開(kāi)源設(shè)計(jì)工具鍵和界面代碼解耦翻譯者只動(dòng)數(shù)據(jù)文件開(kāi)發(fā)者不用改一行代碼。界面怎么知道該切哪個(gè)語(yǔ)言前端啟動(dòng)時(shí)frontend/src/app/util/i18n.cljs里的 i18ninternationalization國(guó)際化模塊先讀瀏覽器語(yǔ)言偏好再逐個(gè)匹配內(nèi)置的 34 種語(yǔ)言全都對(duì)不上就退回英文。這就是改了瀏覽器語(yǔ)言、界面跟著變的全部邏輯;; i18n.cljs 的 autodetect按序匹配瀏覽器語(yǔ)言失敗返回默認(rèn)英語(yǔ) (loop [locales (seq browser-locales)] (if-let [locale (first locales)] (if (contains? supported locale) locale (recur (rest locales))) cf/default-language))對(duì)不上就英文這種永不失敗的設(shè)計(jì)保證界面不會(huì)開(kāi)天窗最壞情況用戶(hù)讀英文。你在設(shè)置里手動(dòng)選語(yǔ)言時(shí)則會(huì)動(dòng)態(tài)加載對(duì)應(yīng)語(yǔ)言的翻譯包并即時(shí)換界面。Penpot 翻譯貢獻(xiàn)怎么跑社區(qū)翻譯在 Weblate 平臺(tái)在線翻譯管理網(wǎng)站進(jìn)行倉(cāng)庫(kù)里的腳本負(fù)責(zé)善后。在語(yǔ)言列表里點(diǎn)進(jìn)某一種語(yǔ)言就能看到每類(lèi)字符串的翻譯進(jìn)度想加一門(mén)全新語(yǔ)言點(diǎn)Start new translation它會(huì)從英文模板生成骨架你直接往里填你保存的每條字符串都是等待審核狀態(tài)團(tuán)隊(duì)確認(rèn)后合入。代碼側(cè)的基線對(duì)齊命令是# 在 frontend/ 目錄執(zhí)行以英文基線為準(zhǔn)清理并對(duì)齊所有語(yǔ)言文件 pnpm translations sync英文文件是唯一事實(shí)來(lái)源sync 會(huì)自動(dòng)刪掉代碼里已不存在的字符串、對(duì)齊注釋語(yǔ)言分支不會(huì)帶著廢數(shù)據(jù)跑。邊界在哪說(shuō)清一件事Penpot 多語(yǔ)言只翻譯工具界面不翻譯你畫(huà)的設(shè)計(jì)內(nèi)容。設(shè)計(jì)稿里的中文要靠你自己設(shè)計(jì)——文本對(duì)象原生支持 rtlright-to-left從右到左排版方向做阿拉伯語(yǔ)或希伯來(lái)語(yǔ)時(shí)直接在文本對(duì)象上翻轉(zhuǎn)方向即可。需要按語(yǔ)言出不同文案的內(nèi)容用組件覆蓋在組件實(shí)例里修改局部屬性的機(jī)制生成各語(yǔ)言的變體還有一個(gè)邊界社區(qū)翻譯的語(yǔ)言不一定 100% 完整。缺的字符串會(huì)按設(shè)計(jì)回退英文連英文文件都缺時(shí)會(huì)原樣顯示鍵名——那是提示缺翻譯不是程序崩潰。你可能會(huì)遇到Penpot 多語(yǔ)言配置三個(gè)典型問(wèn)題1. 選了中文界面還是全英文癥狀改了語(yǔ)言、刷新頁(yè)面菜單依然是英文。原因舊翻譯包還在內(nèi)存里或?yàn)g覽器語(yǔ)言不在 34 種支持列表內(nèi)自動(dòng)識(shí)別沒(méi)生效。解法在個(gè)人資料設(shè)置里手動(dòng)選一次語(yǔ)言再?gòu)?qiáng)刷頁(yè)面CtrlShiftR。這步卡住基本就是緩存沒(méi)清先別懷疑代碼。2. 字符串明明翻譯了界面還顯示英文癥狀zh_CN.po里有譯文界面卻顯示英文原文。原因運(yùn)行時(shí)把空的 msgstr 當(dāng)作無(wú)翻譯直接回退英文。解法確認(rèn)該條 msgstr 不是空值改完后重啟./manage.sh run讓開(kāi)發(fā)服務(wù)重新加載。3. 重構(gòu)后一批字符串被標(biāo)記 unused癥狀改完代碼PO 文件里許多條目標(biāo)了# , unused。原因引用注釋是靠掃描源碼算出來(lái)的重構(gòu)后舊代碼位置對(duì)不上。解法執(zhí)行pnpm translations rehash重新掃描源碼并刷新引用與標(biāo)記。延伸從界面翻譯到設(shè)計(jì)本地化i18n 模塊已經(jīng)把翻譯入口統(tǒng)一暴露插件開(kāi)發(fā)者可以在插件系統(tǒng)上繼續(xù)搭實(shí)時(shí)翻譯、區(qū)域化輔助工具Penpot 多語(yǔ)言的邊界正被社區(qū)往外推。動(dòng)手前建議先讀這三份項(xiàng)目?jī)?nèi)文件翻譯引擎 frontend/src/app/util/i18n.cljs、維護(hù)腳本 frontend/scripts/translations.js、官方貢獻(xiàn)指南 docs/contributing-guide/translations/。現(xiàn)在就打開(kāi)倉(cāng)庫(kù)給你的團(tuán)隊(duì)跑一個(gè)中文界面git clone https://gitcode.com/GitHub_Trending/pe/penpot然后./manage.sh run?！久赓M(fèi)下載鏈接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/pe/penpot創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考