{%hackmd @Airethz/Theme_GrayAndBlue_01 %}

## 參考文件
* [多國語系魔術](https://ithelp.ithome.com.tw/articles/10252226)
* [ASP.NET Core Blazor 全球化和本地化](https://learn.microsoft.com/zh-tw/aspnet/core/blazor/globalization-localization?view=aspnetcore-6.0&pivots=webassembly)
* [Localization in Blazor WebAssembly Applications](https://code-maze.com/localization-in-blazor-webassembly-applications/)

## 環境
* Blazor Webassembly
* .Net 6

## 專案
[Github](https://github.com/Airethz/Blazor-WASM_Localization)

## 操作流程
### 1. 安裝套件
> 套件名稱：Microsoft.Extensions.Localization


### 2. 服務註冊
在 ==Program.cs== 加入：

builder.Services.AddLocalization();


### 3. 取得JS儲存的語系
在 ==Program.cs== 加入：

var host = builder.Build();
CultureInfo culture;
var js = host.Services.GetRequiredService<IJSRuntime>();
var result = await js.InvokeAsync<string>("blazorCulture.get");//取得 JS localStorage的儲存內容
if (result != null)
{
    culture = new CultureInfo(result);
}
else
{
    culture = new CultureInfo("en-US");
    await js.InvokeVoidAsync("blazorCulture.set", "en-US");
}
CultureInfo.DefaultThreadCurrentCulture = culture;
CultureInfo.DefaultThreadCurrentUICulture = culture;


### 4. 專案設定
點擊專案後，加入：

<BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>


#### 未設定導致的錯誤訊息

### 5. JS的blazorCulture存取設定
在 ==wwwroot/index.html== 加入：

<script>
    window.blazorCulture = {
        get: () => window.localStorage['BlazorCulture'],
        set: (value) => window.localStorage['BlazorCulture'] = value
    };
</script>


### 6. 建立資源檔
* 新增ResourceFiles資料夾存放檔案
* 加入 :arrow_right: 新增項目 :arrow_right: 資源檔


:::success
命名規則：
* 檔名.resx
ex. ==Resource.resx==
* 檔名.語系.resx
ex. ==Resource.en.resx==
:::

### 7. 設定資源檔
設定語系所呈現的文字。
:::danger
注意事項：Resource.resx的存取修飾詞要設定為Public，其他Resource檔案(ex. Resource.en.resx)不用設定。
:::

### 8. 頁面顯示內容設定
使用 ==IStringLocalizer<資源檔>== 呼叫名稱對應的值

@using Blazor_WASM_Localization.Shared.ResourceFiles
@inject Microsoft.Extensions.Localization.IStringLocalizer<Resource> localizer
    
@localizer["helloWorld"] <!--顯示對應的語系內容-->

### 9. 下拉選單變更語系

<select @bind="Culture">
    @foreach (var culture in supportedCultures)
    {
        <option value="@culture">@culture.DisplayName</option>
    }
</select>


@code
{
    CultureInfo[] supportedCultures = new[]
    {
        new CultureInfo("en-US"),
        new CultureInfo("zh-TW"),
    };

    CultureInfo Culture
    {
        get => CultureInfo.CurrentCulture;
        set
        {
            if (CultureInfo.CurrentCulture != value)
            {
                var js = (IJSInProcessRuntime)JSRuntime;
                js.InvokeVoid("blazorCulture.set", value.Name);//設定JS中blazorCulture的值
                Nav.NavigateTo(Nav.Uri, forceLoad: true);
            }
        }
    }
}