助力项目快捷实现国际化，造个多语言轮子
前段時(shí)間跟同事吹水聊天時(shí)，吐槽一個(gè)話題，就是公司項(xiàng)目都需要做多語言，前端后端都需要做。
而且是需要支持8國語言翻譯，每次弄起來都特麻煩，每加一個(gè)Key就需要去翻譯其他7個(gè)語言出來添加，每新增一個(gè)項(xiàng)目就需要弄一遍多語言資源，重復(fù)且枯燥費(fèi)時(shí)的體力活。
項(xiàng)目想法
本項(xiàng)目主打一個(gè)一處配置多語言，多處使用的想法。助力項(xiàng)目方便快捷實(shí)現(xiàn)國際化（多語言）。
主要解決的問題：
- 自動(dòng)翻譯多語言資源。
- 通用資源無需重復(fù)添加（關(guān)聯(lián)項(xiàng)目即可）
- 新增地區(qū)時(shí)自動(dòng)同步且翻譯已存在的資源。
- 友好的界面配置。
- 修改資源時(shí)可實(shí)時(shí)同步到資源客戶端（使用SignalR接入）
- 多語言資源批量打包導(dǎo)出。
目前主要功能如下（目前還只是雛形，不算完善）：
-
可配關(guān)聯(lián)項(xiàng)目，主項(xiàng)目關(guān)聯(lián)其他項(xiàng)目即可獲取其他項(xiàng)目的多語言資源，相同Key則優(yōu)先取主項(xiàng)目中的資源（即覆蓋）
-
批量導(dǎo)入已存在項(xiàng)目多語言資源（目前只支持JSON格式）
-
多語言配置導(dǎo)出（目前支持json,toml,messages.properties, xml格式）
-
可配置自動(dòng)翻譯其他語言的資源（目前接入百度翻譯和有道翻譯API，冷門地區(qū)語言翻譯暫不支持，翻譯不準(zhǔn)確時(shí)可手動(dòng)修改）
-
API/SignalR接入
-
界面管理
-
.NET SDK 接入 （其他語言待開發(fā)）
測(cè)試環(huán)境歡迎體驗(yàn)并給點(diǎn)意見或提提ISSUE，當(dāng)然歡迎PR一起完善項(xiàng)目。
http://47.119.20.111/Projects
http://47.119.20.111/swagger/index.html
項(xiàng)目地址：
https://github.com/fanslead/LinguaNex
應(yīng)用場(chǎng)景
通過API/SDK拉取多語言資源加載，可選WebSocket對(duì)接實(shí)現(xiàn)即時(shí)更新多語言資源。
- API后端項(xiàng)目響應(yīng)內(nèi)容，如錯(cuò)誤碼對(duì)應(yīng)的Message國際化多語言處理。
- Web項(xiàng)目國際化多語言集成，可導(dǎo)出多語言文件編譯，或?qū)覣PI/SDK即時(shí)獲取加載數(shù)據(jù)。
- APP項(xiàng)目與Web基本一致。
- 騷操作：實(shí)現(xiàn)一個(gè)短Key完成長(zhǎng)文章多語言顯示。
效果圖
運(yùn)行環(huán)境
- .NET 8
- Redis
- RabbitMQ(可選)
- EF Core SQLLite（可自行替換數(shù)據(jù)庫）
OpenApi接入
請(qǐng)求地址：/api/OpenApi/Resources/{ProjectId}?cultureName=&all=
- ProjectId表示項(xiàng)目ID
- cultureName 可選參數(shù)，不傳則默認(rèn)當(dāng)前請(qǐng)求環(huán)境語言資源。
- all 可選參數(shù)，默認(rèn)false，cultureName為空時(shí)，true則返回所有語言資源
響應(yīng)結(jié)構(gòu)如下：
[
{
"cultureName": "zh-Hans",
"resources": {
"Hello": "你好"
}
},
{
"cultureName": "en",
"resources": {
"Hello": "Hello"
}
}
]
SignalR接入(c#例子)
var connection = new HubConnectionBuilder()
.WithUrl($"{linguaNexApiUrl}/hubs/LinguaNex?project={project}", Microsoft.AspNetCore.Http.Connections.HttpTransportType.WebSockets)
.AddJsonProtocol()
.WithAutomaticReconnect()
.Build();
connection.On<LinguaNexResources>("CreateOrUpdateResource", obj =>
{
if (_resourcesCache.TryGetValue(obj.CultureName, out var value))
{
foreach (var resource in obj.Resources)
{
value[resource.Key] = resource.Value;
}
_resourcesCache[obj.CultureName] = value;
}else
{
_resourcesCache[obj.CultureName] = new ConcurrentDictionary<string, string>(obj.Resources);
}
});
connection.StartAsync();
//拉取資源 參數(shù)跟OpenApi接口一致
connection.InvokeAsync<List<LinguaNexResources>>("GetResources", projectId, cultureName,all);
.NET SDK接入
需要引用LinguaNex.Localization.Net包。
在依賴注入中添加如下代碼即可：
builder.Services.AddLinguaNexLocalization(options =>
{
options.LinguaNexApiUrl = builder.Configuration["LinguaNex:ApiUrl"];
options.Project = builder.Configuration["LinguaNex:Project"];
options.UseWebSocket = true;
});
.NET SDK是通過實(shí)現(xiàn)IStringLocalizer接口對(duì)接的。所以可以無縫銜接已有多語言的項(xiàng)目切換。
本項(xiàng)目自身已使用SDK對(duì)接自己。
測(cè)試效果
antd design pro使用API接入
由于目前還沒時(shí)間完事前端界面的多語言配置。但是之前試過使用antd design pro接入過ABP的后端多語言的配置。
接入流程是一致的。這里提供下參考代碼：
import { addLocale, getLocale } from 'umi';
import { Locale } from 'antd/es/locale';
let locale = getLocale() as string;
let antdLocale = {} as Locale
const applicationLocalization = await getApplicationLocalization(); // 這里可以實(shí)現(xiàn)接入后端API獲取資源
const resources = applicationLocalization.resources
const allText = {}
for(let key in resources) {
if(resources[key]){
Object.assign(allText, resources[key].texts)
}
}
locale = getLocale() as string;
addLocale(
locale,
allText,
{
momentLocale: antdLocale.locale,
antd: antdLocale,
}
RoadMap
總結(jié)
以上是生活随笔為你收集整理的助力项目快捷实现国际化，造个多语言轮子的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 字正腔圆,万国同音,coqui-ai T
- 下一篇： Ef Core花里胡哨系列(10) 动态