Blazor 國際化多語言介面 (I18nText )

AlexChow發表於2022-04-06
Blazor

在實際使用中,我們經常會遇到需要把程式介面多種語言切換,適應不同地區使用者的需求,本文介紹一個我初學Blazor接觸到的庫,邊擼邊講解.

包名: Toolbelt.Blazor.I18nText https://github.com/jsakamoto/Toolbelt.Blazor.I18nText

此包是在 Blazor Web 應用程式中本地化文字的另一種方法！但不是唯一的方法, 因為微軟官方也將 Blazor WebAssembly 從 v.3.2 preview 4 開始正式開始本地化支援。它基於 .NET StandardIStringLocalizer和帶有.resx , 大家可以自己取捨.

image

特性

  • Blazor 伺服器和 WebAssembly 都受支援。
  • 在 Blazor Wasm 中，它甚至可以在靜態 Web 主機上執行。（不需要 ASP.NET Core 主機）
  • 只需要純文字編輯器 - 不需要 .resx
  • 靜態型別 - IntelliSense、程式碼提示...
  • 它支援 Blazor 元件庫。你可以建立使用“Blazor I18nText”本地化的庫的 NuGet 包。

1.新建工程

新建工程n08I18nText
使用 nuget.org 進行 Toolbelt.Blazor.I18nText 元件安裝
將專案新增到解決方案中：

dotnet new blazorserver -o n08I18nText
dotnet add n08I18nText package Toolbelt.Blazor.I18nText
dotnet sln add n08I18nText/n08I18nText.csproj

2.建立本地化文字原始檔 JSON 或 CSV (注意:檔案的編碼必須是UTF-8)

新建i18ntext目錄, 新增每種語言的本地化文字原始檔

本地化的文字原始檔必須是簡單的僅鍵值對 JSON 檔案，如下例所示：

{
   "Key1" : "本地化文字 1 " ,
   "Key2" : "本地化文字 2 " ,
   ... 
}

或者，只有 2 列的 CSV 檔案，沒有標題行，如下例所示。

Key1,Localized text 1
Key2,Localized text 2

本地化文字原始檔的命名規則必須如下：

<Text Table Name>.<Language Code>.{json|csv}

image

我們示例專案新增三個語言檔案

中文 MyText.zh.json

{
  "Title": "首頁",
  "HelloWorld": "世界你好!",
  "Tip1": "Blazor 可以幫您幹啥？",

  "BarCode": "條碼",
  "UnitPrice": "價格",
  "ProductName": "商品",
  "Remark": "備註",

  "View": "檢視",
  "Save": "儲存",
  "Edit": "編輯"
}

英文 MyText.en.json

{
  "Title": "Index",
  "HelloWorld": "Hello,World!",
  "Tip1": "How is Blazor working for you?",

  "BarCode": "BarCode",
  "UnitPrice": "Price",
  "ProductName": "ProductName",
  "Remark": "Remark",

  "View": "View",
  "Save": "Save",
  "Edit": "Edit"
}

西班牙文 MyText.es.json

{
  "Title": "Índice",
  "HelloWorld": "¡Hola Mundo!",
  "Tip1": "¿Cómo funciona Blazor para ti?",

  "BarCode": "Codigo",
  "UnitPrice": "Precio",
  "ProductName": "Producto",
  "Remark": "Nota",

  "View": "Vista",
  "Save": "Guardar",
  "Edit": "Editar"
}

image

3.每當建立或更新本地化文字原始檔時要重新生成專案。或者點一次除錯後,下次除錯才能生效.

會使用source generator功能生成 "Typed Text Table class"檔案."本地化文字資源 JSON"檔案將在輸出資料夾中生成.

image

4.新增I18nText服務到Program.cs檔案

using Toolbelt.Blazor.Extensions.DependencyInjection; // 新增這行

builder.Services.AddI18nText();  // 新增這行

5.新增程式碼到Index.razor檔案

@inject Toolbelt.Blazor.I18nText.I18nText I18nText //注入服務

@code {
  I18nText.MyText MyText = new I18nText.MyText(); 

  protected override async Task OnInitializedAsync()
  {
    MyText = await I18nText.GetTextTableAsync<I18nText.MyText>(this);
  }
}

如果這一步驟出現波浪線或者紅字,請參考上一步驟, !!!重新生成工程,或者點一次執行!!!

image

6.使用

<h1>@MyText["HelloWorld"]</h1>

如果Key字串的拼寫錯誤也不會出問題，它只會按原樣返回Key字串，不會出現任何執行時異常.

image

7.完整頁面程式碼如下

@page "/"
@inject Toolbelt.Blazor.I18nText.I18nText I18nText

<PageTitle>@MyText["Title"]</PageTitle>

<h1>@MyText["HelloWorld"]</h1>

<table>
    <tr>
        <th>@MyText["BarCode"]</th>
        <th>@MyText["UnitPrice"]</th>
        <th>@MyText["ProductName"]</th>
        <th>@MyText["Remark"]</th>
    </tr>
    <tr>
        <td>12345</td>
        <td>1.22</td>
        <td>Big ball</td>
        <td>來之大山深處的原始</td>
    </tr>
    <tr>
        <td>EA888</td>
        <td>35.99</td>
        <td>Francisco doll</td>
        <td>巴拉巴拉巴拉</td>
    </tr>
</table>


<SurveyPrompt Title="@MyText["Tip1"]" />

<button class="btn btn-primary">@MyText["View"]</button>
<button class="btn btn-secondary">@MyText["Save"]</button>
<button class="btn btn-danger">@MyText["Edit"]</button>

<br />
<br />
<br />
<br />
<hr />

<button class="btn btn-primary" @onclick='(async ()=>await OnChangeCurrentLang("zh"))'>中文</button>
<button class="btn btn-primary" @onclick='(async ()=>await OnChangeCurrentLang("en"))'>英文</button>
<button class="btn btn-primary" @onclick='(async ()=>await OnChangeCurrentLang("es"))'>西班牙文</button>

@code 
{
    I18nText.MyText MyText = new I18nText.MyText();
    protected override async Task OnInitializedAsync()
    {
        MyText = await I18nText.GetTextTableAsync<I18nText.MyText>(this);
    }

    private async Task OnChangeCurrentLang(string lang)
    {
        //"en", "es", "zh"
        await I18nText.SetCurrentLanguageAsync(lang);
    }
}

6.執行程式

I18nText 服務會自動檢測 Web 瀏覽器的語言設定，並讀取最適合檢測到的語言的本地化文字資源JSON. 也可以配置中介軟體以及語言回落順序等等, 請參考原始專案地址或者評論區發言詢問,我會把程式碼繼續貼出來.

多語言

很帥,有沒有? 共享,一個小小的國際化多語言Blazor建好了! Happy coding !

專案原始碼

Github | Gitee

關聯專案

FreeSql QQ群：4336577(已滿)、8578575(已滿)、52508226(線上)

BA & Blazor QQ群：795206915、675147445

知識共享許可協議

本作品採用 知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議 進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名AlexChow（包含連結： https://github.com/densen2014 ），不得用於商業目的，基於本文修改後的作品務必以相同的許可釋出。如有任何疑問，請與我聯絡 。

AlexChow

今日頭條 | 部落格園 | 知乎 | Gitee | GitHub

相關文章