上一篇(點擊閱讀)我們實現了UI在Web端(Blazor Server/Wasm)和客戶端(Windows/macOS/Android/iOS)共享，這篇我加上 Masa Blazor^[2]組件庫的引用，并把前幾個月寫的時間戳轉換^[3]工具加上。

1. 前置知識

關于Masa Blazor請點擊Masa Blazor官網^[4]了解：

MASA Blazor

基于Material Design和BlazorComponent的交互能力提供標準的基礎組件庫。提供如布局、彈框標準、Loading、全局異常處理等標準場景的預置組件。

2. 組件庫的引用

組件庫的添加參考Masa官網^[5]，這里寫下Dotnet9后臺^[6]添加記錄：

2.1 UI共享庫的修改-Dotnet9.WebApp

1. UI共享庫 Dotnet9.WebApp 添加Maas.Blazor包，剛好今天（21號）Masa發布了0.5.0-preview.3版本，我們下載使用：

Install-Package?Masa.Blazor?-Version?0.5.0-preview.3

1. 封裝Maas.Blazor組件引用

添加文件./MasaExtensions/MasaSetup.cs，代碼如下：

using?Microsoft.Extensions.DependencyInjection;namespace?Dotnet9.WebApp.MasaExtensions;public?static?class?MasaSetup
{public?static?void?AddMasaSetup(this?IServiceCollection?services){if?(services?==?null)?throw?new?ArgumentNullException(nameof(services));services.AddMasaBlazor();???//?這句關鍵代碼}
}

關鍵代碼只有一行services.AddMasaBlazor();，添加擴展類是為了功能擴展，為了其他項目方便使用...

1. _Imports.razor 引入Masa.Blazor命名空間

@using?Masa.Blazor

就這3步對 Dotnet9.WebApp的修改。

2.2 跨平臺項目修改-Dotnet9.MAUI

1. 修改MauiProgram.cs文件，添加上面封裝的擴展方法AddMasaSetup():

using?Dotnet9.WebApp.MasaExtensions;????//?第1處：添加這個命名空間namespace?Dotnet9.MAUI;public?static?class?MauiProgram
{public?static?MauiApp?CreateMauiApp(){var?builder?=?MauiApp.CreateBuilder();builder.UseMauiApp<App>().ConfigureFonts(fonts?=>?{?fonts.AddFont("OpenSans-Regular.ttf",?"OpenSansRegular");?});builder.Services.AddMauiBlazorWebView();
#if?DEBUGbuilder.Services.AddBlazorWebViewDeveloperTools();
#endifbuilder.Services.AddMasaSetup();????//?第2外：添加擴展方法引入Masa Blazorreturn?builder.Build();}
}

1. 添加Masa.Blazor資源文件

修改wwwwroot/index.html文件，添加以下樣式（直接復制 Masa.Blazor^[7]Blazor WebAssembly使用的資源文件）

<link?href="_content/Masa.Blazor/css/masa-blazor.css"?rel="stylesheet"?/>
<link?href="_content/Masa.Blazor/css/masa-extend-blazor.css"?rel="stylesheet"?/><link?href="https://cdn.masastack.com/npm/@mdi/font@5.x/css/materialdesignicons.min.css"?rel="stylesheet">
<link?href="https://cdn.masastack.com/npm/materialicons/materialicons.css"?rel="stylesheet">
<link?href="https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css"?rel="stylesheet"><script?src="_content/BlazorComponent/js/blazor-component.js"></script>

2.3 Blazor WebAssembly項目修改-Dotnet9.Wasm

1. 修改Program.cs文件，添加上面封裝的擴展方法AddMasaSetup():

using?Dotnet9.WebApp;
using?Dotnet9.WebApp.MasaExtensions;????????//?第1處：添加這個命名空間
using?Microsoft.AspNetCore.Components.Web;
using?Microsoft.AspNetCore.Components.WebAssembly.Hosting;var?builder?=?WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<Main>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");builder.Services.AddMasaSetup();????????????//?第2外：添加擴展方法引入Masa Blazor
builder.Services.AddScoped(sp?=>?new?HttpClient?{?BaseAddress?=?new?Uri(builder.HostEnvironment.BaseAddress)?});await?builder.Build().RunAsync();

1. 添加Masa.Blazor資源文件

同Dotnet9.MAUI

2.4 Blazor Server項目修改-Dotnet9.Server

1. 修改Program.cs文件，添加上面封裝的擴展方法AddMasaSetup():

using?Dotnet9.WebApp.MasaExtensions;????????//?第1處：添加這個命名空間var?builder?=?WebApplication.CreateBuilder(args);//?Add?services?to?the?container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddMasaSetup();????????????//?第2外：添加擴展方法引入Masa Blazorvar?app?=?builder.Build();//?Configure?the?HTTP?request?pipeline.
if?(!app.Environment.IsDevelopment())
{app.UseExceptionHandler("/Error");//?The?default?HSTS?value?is?30?days.?You?may?want?to?change?this?for?production?scenarios,?see?https://aka.ms/aspnetcore-hsts.app.UseHsts();
}app.UseHttpsRedirection();app.UseStaticFiles();app.UseRouting();app.MapBlazorHub();?
app.MapFallbackToPage("/_Host");app.Run();

1. 添加Masa.Blazor資源文件

修改Pages/_Layout.cshtml文件，添加以下樣式（復制 Masa.Blazor^[8]Blazor Server使用的資源文件）

<!--?masa?blazor?css?style?-->
<link?href="_content/Masa.Blazor/css/masa-blazor.css"?rel="stylesheet"?/>
<link?href="_content/Masa.Blazor/css/masa-extend-blazor.css"?rel="stylesheet"?/><!--icon?file,import?need?to?use-->
<link?href="https://cdn.masastack.com/npm/@("@mdi")/font@5.x/css/materialdesignicons.min.css"?rel="stylesheet">
<link?href="https://cdn.masastack.com/npm/materialicons/materialicons.css"?rel="stylesheet">
<link?href="https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css"?rel="stylesheet"><!--js(should?lay?the?end?of?file)-->
<script?src="_content/BlazorComponent/js/blazor-component.js"></script>

注意：MAUI Blazor和Blazor WebAssembly兩個項目引入Masa Blazor資源文件的代碼一樣，Blazor Server和前兩者主要區別是materialdesignicons.min.css文件：

這里關于Masa.Blazor的引入就介紹完了，總結下關鍵三步：

1. 添加Masa.Blazor Nuget包：Install-Package Masa.Blazor；

2. Masa.Blazor組件注冊使用：services.AddMasaBlazor();；

3. 添加Masa.Blazor資源文件：Wasm是wwwwroot/index.html, blazor server是_Layout.cshtml，注意兩者添加資源文件的區別。

3. 時間戳功能的添加

在做Blazor Server版本網站時，有過一次時間戳功能開發的介紹(點擊閱讀^[9])，代碼很簡單，這里不再細說，不能再水了....

4. 總結

Masa.Blazor組件庫已經添加，并恢復了時間戳功能，下一步，就是繼續搭建網站后臺了，使用Masa.Blazor搭建框架嘍。

• 本文Blazor Server站點預覽：https://server.dotnet9.com/

• 本文Blazor Wasm站點預覽：https://wasm.dotnet9.com/

• MAUI(Android\Windows\macOS\iOS)預覽：https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnet9.MAUI（未做發布文件，需要您源碼自行編譯）

參考資料

[1]

點擊閱讀: https://dotnet9.com/2022/06/Share-razor-library-between-maui-and-blazor-server-or-client

[2]

Masa Blazor: https://masa-blazor-docs-dev.lonsid.cn/

[3]

時間戳轉換: https://dotnet9.com/2022/02/Use-Blazor-to-be-a-simple-online-timestamp-conversion-tool

[4]

Masa Blazor官網: https://masa-blazor-docs-dev.lonsid.cn/

[5]

Masa官網: https://masa-blazor-docs-dev.lonsid.cn/

[6]

Dotnet9后臺: https://github.com/dotnet9/Dotnet9

[7]

Masa.Blazor: https://masa-blazor-docs-dev.lonsid.cn/getting-started/installation

[8]

Masa.Blazor: https://masa-blazor-docs-dev.lonsid.cn/getting-started/installation

[9]

點擊閱讀: https://dotnet9.com/2022/02/Use-Blazor-to-be-a-simple-online-timestamp-conversion-tool