言切換怎么做？3 步給界面裝上中英文日切換開(kāi)關(guān))
Yaak 多語(yǔ)言切換怎么做3 步給界面裝上中英文日切換開(kāi)關(guān)【免費(fèi)下載鏈接】yaakThe most intuitive desktop API client. Organize and execute REST, GraphQL, WebSockets, Server Sent Events, and gRPC 項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ya/yaak用 Yaak 管理 REST、GraphQL、gRPC 請(qǐng)求時(shí)最直觀的感受是功能順手但整個(gè)界面是英文的。如果你希望日常操作里看到中文菜單和提示這篇 i18n 實(shí)戰(zhàn)i18n 就是讓軟件界面說(shuō)用戶母語(yǔ)的做法會(huì)帶你從零搭出一套可實(shí)時(shí)切換的多語(yǔ)言方案中文、英文、日文、韓文切換不用重啟應(yīng)用。先說(shuō)結(jié)論Yaak 官方目前還沒(méi)內(nèi)置界面本地化所以自建方案不是臨時(shí)方案而是值得參考的正路。為什么這個(gè)工具還不會(huì)說(shuō)中文Yaak 的定位是最直覺(jué)的桌面 API 客戶端開(kāi)發(fā)重心一直在協(xié)議能力上——REST、WebSockets、Server Sent Events、gRPC 全支持。翻過(guò) apps/yaak-client/components/ 下的源碼后會(huì)確認(rèn)界面文案基本是直接寫死的英文比如設(shè)置頁(yè)里的 Update Channel、右鍵菜單里的 Copy as Curl。它不是藏了個(gè)語(yǔ)言開(kāi)關(guān)而是根本沒(méi)有這一層。這對(duì)國(guó)內(nèi)用戶的影響很具體快捷鍵列表、設(shè)置項(xiàng)描述、報(bào)錯(cuò)提示全是英文。方案思路也很直接——既然官方?jīng)]做我們自己補(bǔ)一層而且盡量不動(dòng) Yaak 的既有架構(gòu)。語(yǔ)言切換背后的三個(gè)部件不管哪個(gè)框架做多語(yǔ)言拆開(kāi)看都只有三樣?xùn)|西先把它們說(shuō)清楚再動(dòng)手。資源文件每個(gè)語(yǔ)言一個(gè) JSON 文件存的是key → 文案的映射。key 是語(yǔ)言無(wú)關(guān)的標(biāo)識(shí)比如common.send中文包里值是發(fā)送英文包里是Send。全局狀態(tài)一個(gè)全應(yīng)用共享的當(dāng)前語(yǔ)言變量。React 生態(tài)里常見(jiàn)做法是 jotai 的 atom——你可以理解成一個(gè)誰(shuí)都能訂閱的共享格子。文案替換點(diǎn)界面上每句寫死的文字改成拿著 key 去當(dāng)前語(yǔ)言的包里查。理解這三點(diǎn)后你會(huì)發(fā)現(xiàn)所謂本地化沒(méi)有魔法難點(diǎn)全在工程細(xì)節(jié)key 怎么組織、狀態(tài)放哪里、替換點(diǎn)怎么不漏。從零搭出切換能力目錄結(jié)構(gòu)先示意一下語(yǔ)言包放在前端應(yīng)用目錄下apps/yaak-client/ ├── locales/ │ ├── en.json │ ├── zh-CN.json │ ├── ja.json │ └── ko.json └── lib/i18n/ └── context.tsx翻譯包保持克制只放界面真正用到的文案兩三個(gè)鍵就夠起步{ common: { send: 發(fā)送, cancel: 取消 }, settings: { language: 界面語(yǔ)言 } }然后做三件事在設(shè)置頁(yè)加語(yǔ)言選項(xiàng)。Yaak 的設(shè)置頁(yè)是分區(qū)渲染的apps/yaak-client/components/Settings/ 下每個(gè)文件對(duì)應(yīng)一個(gè)分區(qū)。給語(yǔ)言加選項(xiàng)就是在外觀或通用分區(qū)里仿照現(xiàn)有的下拉設(shè)置項(xiàng)再加一行選項(xiàng)值填en、zh-CN、ja、ko。寫語(yǔ)言上下文。React 的 Context 機(jī)制可以把數(shù)據(jù)穿到任意深度的組件相當(dāng)于應(yīng)用級(jí)廣播。核心就一個(gè)翻譯函數(shù)t按 key 的層級(jí)去包里取值取不到就回退英文再不行直接顯示 key 方便排查// 示意語(yǔ)言上下文向全應(yīng)用提供翻譯函數(shù) export function useI18n() { const [language, setLanguage] useAtom(languageAtom); const pack translations[language] ?? translations.en; const t (key: string, vars?: Recordstring, string) { let out key.split(.).reduceany((o, k) o?.[k], pack); if (typeof out ! string) out translations.en t(key); return vars ? out.replace(/\{(\w)\}/g, (_, n) vars[n]) : out; }; return { t, language, setLanguage }; }替換文案。把組件里的ButtonSend/Button換成Button{t(common.send)}/Button這樣的形式。不必追求一步到位先從側(cè)邊欄、設(shè)置頁(yè)這些高頻區(qū)域改起用改一處、切一次語(yǔ)言確認(rèn)的節(jié)奏推進(jìn)。切換即時(shí)生效怎么做實(shí)時(shí)兩個(gè)字拆開(kāi)看其實(shí)是兩個(gè)問(wèn)題切換后界面立刻變以及關(guān)掉應(yīng)用后選擇還在。第一個(gè)問(wèn)題狀態(tài)放對(duì)了位置就自動(dòng)解決了。languageAtom是全應(yīng)用共享的翻譯函數(shù)每次都讀當(dāng)前 atom 的值React 的依賴追蹤會(huì)讓所有用到t()的組件在 atom 變化時(shí)重新渲染——你在下拉框里選了中文整屏文案當(dāng)場(chǎng)跟著變不需要任何通知代碼。第二個(gè)問(wèn)題靠持久化。切換時(shí)把語(yǔ)言值寫進(jìn)本地存儲(chǔ)Yaak 的設(shè)置本身是存在模型里的更貼合的做法是像它的 Update Channel 那樣給設(shè)置加一個(gè)language字段不想動(dòng)數(shù)據(jù)層的話寫 localStorage 也完全夠用。應(yīng)用啟動(dòng)時(shí)先讀一次持久化的值初始化 atom再兜底取系統(tǒng)語(yǔ)言navigator.language以zh開(kāi)頭就給zh-CN用戶首次打開(kāi)應(yīng)用就能看到對(duì)應(yīng)語(yǔ)言的界面。這兩個(gè)點(diǎn)做到位實(shí)時(shí)切換就沒(méi)有額外成本本質(zhì)是狀態(tài)聯(lián)動(dòng)加一次持久化。驗(yàn)證、遺漏與常見(jiàn)坑怎么算改對(duì)了用每種語(yǔ)言走一遍主流程新建請(qǐng)求 → 發(fā)送 → 看響應(yīng) → 打開(kāi)設(shè)置切語(yǔ)言任何一處出現(xiàn)漏譯的英文就是遺漏點(diǎn)。容易漏的文案有幾類可以對(duì)照檢查類別典型位置處理建議彈窗與確認(rèn)框刪除確認(rèn)、大文件提示優(yōu)先補(bǔ)出鏡率高Toast 與報(bào)錯(cuò)信息請(qǐng)求失敗提示保留錯(cuò)誤碼原文只翻譯前綴快捷鍵、右鍵菜單側(cè)邊欄、編輯器最后統(tǒng)一過(guò)一遍插件提供的界面插件面板插件側(cè)支持 key 覆蓋宿主提供回退插件是容易忽略的一塊Yaak 的插件運(yùn)行在獨(dú)立運(yùn)行時(shí)里宿主可以通過(guò)注入翻譯函數(shù)的方式讓插件也調(diào)t()插件沒(méi)提供對(duì)應(yīng)語(yǔ)言文案時(shí)回退英文這樣插件生態(tài)不會(huì)成為多語(yǔ)言短板。常見(jiàn)的坑還有兩個(gè)。一是 key 用中文當(dāng)值導(dǎo)致英文回退時(shí)直接顯示中文二是翻譯了靜態(tài)文案卻漏了模板字符串比如共 3 條響應(yīng)這類帶數(shù)字的句子建議用變量占位{count}而不是字符串拼接。這套方案的適用邊界把適用邊界說(shuō)透。它覆蓋的是 Yaak 應(yīng)用自身的界面文案插件文案要靠注入機(jī)制跟隨后端返回的錯(cuò)誤原文、請(qǐng)求和響應(yīng)內(nèi)容本身不在范圍內(nèi)也不該翻譯。它同樣是一份外掛改動(dòng)散落在幾十個(gè)組件里官方升級(jí)后大概率需要重新對(duì)齊長(zhǎng)期看更省力的姿勢(shì)是盯著官方是否內(nèi)置 i18n一旦內(nèi)置就把自建方案平滑過(guò)去?！久赓M(fèi)下載鏈接】yaakThe most intuitive desktop API client. Organize and execute REST, GraphQL, WebSockets, Server Sent Events, and gRPC 項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ya/yaak創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Yaak 多語(yǔ)言切換怎么做？3 步給界面裝上中英文日切換開(kāi)關(guān)
Yaak 多語(yǔ)言切換怎么做3 步給界面裝上中英文日切換開(kāi)關(guān)【免費(fèi)下載鏈接】yaakThe most intuitive desktop API client. Organize and execute REST, GraphQL, WebSockets, Server Sent Events, and gRPC 項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ya/yaak用 Yaak 管理 REST、GraphQL、gRPC 請(qǐng)求時(shí)最直觀的感受是功能順手但整個(gè)界面是英文的。如果你希望日常操作里看到中文菜單和提示這篇 i18n 實(shí)戰(zhàn)i18n 就是讓軟件界面說(shuō)用戶母語(yǔ)的做法會(huì)帶你從零搭出一套可實(shí)時(shí)切換的多語(yǔ)言方案中文、英文、日文、韓文切換不用重啟應(yīng)用。先說(shuō)結(jié)論Yaak 官方目前還沒(méi)內(nèi)置界面本地化所以自建方案不是臨時(shí)方案而是值得參考的正路。為什么這個(gè)工具還不會(huì)說(shuō)中文Yaak 的定位是最直覺(jué)的桌面 API 客戶端開(kāi)發(fā)重心一直在協(xié)議能力上——REST、WebSockets、Server Sent Events、gRPC 全支持。翻過(guò) apps/yaak-client/components/ 下的源碼后會(huì)確認(rèn)界面文案基本是直接寫死的英文比如設(shè)置頁(yè)里的 Update Channel、右鍵菜單里的 Copy as Curl。它不是藏了個(gè)語(yǔ)言開(kāi)關(guān)而是根本沒(méi)有這一層。這對(duì)國(guó)內(nèi)用戶的影響很具體快捷鍵列表、設(shè)置項(xiàng)描述、報(bào)錯(cuò)提示全是英文。方案思路也很直接——既然官方?jīng)]做我們自己補(bǔ)一層而且盡量不動(dòng) Yaak 的既有架構(gòu)。語(yǔ)言切換背后的三個(gè)部件不管哪個(gè)框架做多語(yǔ)言拆開(kāi)看都只有三樣?xùn)|西先把它們說(shuō)清楚再動(dòng)手。資源文件每個(gè)語(yǔ)言一個(gè) JSON 文件存的是key → 文案的映射。key 是語(yǔ)言無(wú)關(guān)的標(biāo)識(shí)比如common.send中文包里值是發(fā)送英文包里是Send。全局狀態(tài)一個(gè)全應(yīng)用共享的當(dāng)前語(yǔ)言變量。React 生態(tài)里常見(jiàn)做法是 jotai 的 atom——你可以理解成一個(gè)誰(shuí)都能訂閱的共享格子。文案替換點(diǎn)界面上每句寫死的文字改成拿著 key 去當(dāng)前語(yǔ)言的包里查。理解這三點(diǎn)后你會(huì)發(fā)現(xiàn)所謂本地化沒(méi)有魔法難點(diǎn)全在工程細(xì)節(jié)key 怎么組織、狀態(tài)放哪里、替換點(diǎn)怎么不漏。從零搭出切換能力目錄結(jié)構(gòu)先示意一下語(yǔ)言包放在前端應(yīng)用目錄下apps/yaak-client/ ├── locales/ │ ├── en.json │ ├── zh-CN.json │ ├── ja.json │ └── ko.json └── lib/i18n/ └── context.tsx翻譯包保持克制只放界面真正用到的文案兩三個(gè)鍵就夠起步{ common: { send: 發(fā)送, cancel: 取消 }, settings: { language: 界面語(yǔ)言 } }然后做三件事在設(shè)置頁(yè)加語(yǔ)言選項(xiàng)。Yaak 的設(shè)置頁(yè)是分區(qū)渲染的apps/yaak-client/components/Settings/ 下每個(gè)文件對(duì)應(yīng)一個(gè)分區(qū)。給語(yǔ)言加選項(xiàng)就是在外觀或通用分區(qū)里仿照現(xiàn)有的下拉設(shè)置項(xiàng)再加一行選項(xiàng)值填en、zh-CN、ja、ko。寫語(yǔ)言上下文。React 的 Context 機(jī)制可以把數(shù)據(jù)穿到任意深度的組件相當(dāng)于應(yīng)用級(jí)廣播。核心就一個(gè)翻譯函數(shù)t按 key 的層級(jí)去包里取值取不到就回退英文再不行直接顯示 key 方便排查// 示意語(yǔ)言上下文向全應(yīng)用提供翻譯函數(shù) export function useI18n() { const [language, setLanguage] useAtom(languageAtom); const pack translations[language] ?? translations.en; const t (key: string, vars?: Recordstring, string) { let out key.split(.).reduceany((o, k) o?.[k], pack); if (typeof out ! string) out translations.en t(key); return vars ? out.replace(/\{(\w)\}/g, (_, n) vars[n]) : out; }; return { t, language, setLanguage }; }替換文案。把組件里的ButtonSend/Button換成Button{t(common.send)}/Button這樣的形式。不必追求一步到位先從側(cè)邊欄、設(shè)置頁(yè)這些高頻區(qū)域改起用改一處、切一次語(yǔ)言確認(rèn)的節(jié)奏推進(jìn)。切換即時(shí)生效怎么做實(shí)時(shí)兩個(gè)字拆開(kāi)看其實(shí)是兩個(gè)問(wèn)題切換后界面立刻變以及關(guān)掉應(yīng)用后選擇還在。第一個(gè)問(wèn)題狀態(tài)放對(duì)了位置就自動(dòng)解決了。languageAtom是全應(yīng)用共享的翻譯函數(shù)每次都讀當(dāng)前 atom 的值React 的依賴追蹤會(huì)讓所有用到t()的組件在 atom 變化時(shí)重新渲染——你在下拉框里選了中文整屏文案當(dāng)場(chǎng)跟著變不需要任何通知代碼。第二個(gè)問(wèn)題靠持久化。切換時(shí)把語(yǔ)言值寫進(jìn)本地存儲(chǔ)Yaak 的設(shè)置本身是存在模型里的更貼合的做法是像它的 Update Channel 那樣給設(shè)置加一個(gè)language字段不想動(dòng)數(shù)據(jù)層的話寫 localStorage 也完全夠用。應(yīng)用啟動(dòng)時(shí)先讀一次持久化的值初始化 atom再兜底取系統(tǒng)語(yǔ)言navigator.language以zh開(kāi)頭就給zh-CN用戶首次打開(kāi)應(yīng)用就能看到對(duì)應(yīng)語(yǔ)言的界面。這兩個(gè)點(diǎn)做到位實(shí)時(shí)切換就沒(méi)有額外成本本質(zhì)是狀態(tài)聯(lián)動(dòng)加一次持久化。驗(yàn)證、遺漏與常見(jiàn)坑怎么算改對(duì)了用每種語(yǔ)言走一遍主流程新建請(qǐng)求 → 發(fā)送 → 看響應(yīng) → 打開(kāi)設(shè)置切語(yǔ)言任何一處出現(xiàn)漏譯的英文就是遺漏點(diǎn)。容易漏的文案有幾類可以對(duì)照檢查類別典型位置處理建議彈窗與確認(rèn)框刪除確認(rèn)、大文件提示優(yōu)先補(bǔ)出鏡率高Toast 與報(bào)錯(cuò)信息請(qǐng)求失敗提示保留錯(cuò)誤碼原文只翻譯前綴快捷鍵、右鍵菜單側(cè)邊欄、編輯器最后統(tǒng)一過(guò)一遍插件提供的界面插件面板插件側(cè)支持 key 覆蓋宿主提供回退插件是容易忽略的一塊Yaak 的插件運(yùn)行在獨(dú)立運(yùn)行時(shí)里宿主可以通過(guò)注入翻譯函數(shù)的方式讓插件也調(diào)t()插件沒(méi)提供對(duì)應(yīng)語(yǔ)言文案時(shí)回退英文這樣插件生態(tài)不會(huì)成為多語(yǔ)言短板。常見(jiàn)的坑還有兩個(gè)。一是 key 用中文當(dāng)值導(dǎo)致英文回退時(shí)直接顯示中文二是翻譯了靜態(tài)文案卻漏了模板字符串比如共 3 條響應(yīng)這類帶數(shù)字的句子建議用變量占位{count}而不是字符串拼接。這套方案的適用邊界把適用邊界說(shuō)透。它覆蓋的是 Yaak 應(yīng)用自身的界面文案插件文案要靠注入機(jī)制跟隨后端返回的錯(cuò)誤原文、請(qǐng)求和響應(yīng)內(nèi)容本身不在范圍內(nèi)也不該翻譯。它同樣是一份外掛改動(dòng)散落在幾十個(gè)組件里官方升級(jí)后大概率需要重新對(duì)齊長(zhǎng)期看更省力的姿勢(shì)是盯著官方是否內(nèi)置 i18n一旦內(nèi)置就把自建方案平滑過(guò)去?！久赓M(fèi)下載鏈接】yaakThe most intuitive desktop API client. Organize and execute REST, GraphQL, WebSockets, Server Sent Events, and gRPC 項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ya/yaak創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考