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

1. 前置知識

關于Masa Blazor請點擊Masa Blazor官網(wǎng)了解：

MASA Blazor

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

2. 組件庫的引用

組件庫的添加參考Masa官網(wǎng)，這里寫下Dotnet9后臺添加記錄：

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

1. UI共享庫 Dotnet9.WebApp 添加Maas.Blazor包，剛好今天（21號）Masa發(fā)布了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?DEBUG
????????builder.Services.AddBlazorWebViewDeveloperTools();
#endif
????????builder.Services.AddMasaSetup();????//?第2外：添加擴展方法引入Masa?Blazor

????????return?builder.Build();
????}
}


1. 添加Masa.Blazor資源文件

修改wwwwroot/index.html文件，添加以下樣式（直接復制 Masa.Blazor 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?Blazor

var?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 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和前兩者主要區(qū)別是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，注意兩者添加資源文件的區(qū)別。

3. 時間戳功能的添加

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

4. 總結

Masa.Blazor組件庫已經(jīng)添加，并恢復了時間戳功能，下一步，就是繼續(xù)搭建網(wǎng)站后臺了，使用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（未做發(fā)布文件，需要您源碼自行編譯）