介紹
ABP抽象了主題系統，將已有的UI更改到其他的UI框架非常簡單，本文介紹了如何將主題切換為AntBlazor Theme， 原始碼以及示例在GitHub開源，
Lsw.Abp.AntDesignUI 專案與ABP官方無關，它是一個社區專案，
什么是Ant Blazor 和 Lsw.Abp.AntDesignUI
Ant Blazor全稱Ant Design Blazor，是一個流行的社區專案，比較符合國人審美,用于創建美觀，高性能的Blazor應用程式，
Lsw.Abp.AntDesignUI 是一個基于 Ant Design Blazor 的ABP前端主題專案，完全替換了基本主題所有頁面，
創建一個新的ABP解決方案
使用ABP CLI命令創建Blazor應用程式:
abp new BookStore -u blazor
如果沒有安裝ABP CLI使用下面命令安裝:
dotnet tool install -g Volo.Abp.Cli
解決方案如下圖所示:
更換默認主題包
ABP默認使用Blazorise做為UI框架基于它創建了一套基本主題，使用 Lsw.Abp.AntDesignUI 替換基本主題.
打開 BookStore.Blazor.csproj 檔案替換為以下內容:
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<Import Project="..\..\common.props" />
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.0" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Volo.Abp.Autofac.WebAssembly" Version="5.1.4" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Lsw.Abp.IdentityManagement.Blazor.WebAssembly.AntDesignUI" Version="0.1.0" />
<PackageReference Include="Lsw.Abp.SettingManagement.Blazor.WebAssembly.AntDesignUI" Version="0.1.0" />
<PackageReference Include="Lsw.Abp.TenantManagement.Blazor.WebAssembly.AntDesignUI" Version="0.1.0" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\..\src\BookStore.HttpApi.Client\BookStore.HttpApi.Client.csproj" />
</ItemGroup>
</Project>
更改匯入檔案
打開 _Imports.razor 檔案將提示錯誤的參考替換為以下參考:
@using AntDesign
@using Lsw.Abp.AntDesignUI
@using Lsw.Abp.AntDesignUI.Components
@using Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Layout
更改Blazor專案
BookStoreBlazorModule 模塊類
1. 洗掉ConfigureBlazorise 方法
2. 根據IDE提示修復錯誤的命令空間參考
3. 替換模塊依賴，比如將 AbpIdentityBlazorWebAssemblyModule 替換為 AbpIdentityBlazorWebAssemblyAntDesignModule
更新Icon
打開選單配置類 BookStoreMenuContributor:
"fas fa-home"更改為IconType.Outline.Home"fa fa-cog"更改為IconType.Outline.Setting
更新Index頁面
使用以下代碼替換 Index.razor:
@page "/"
@inherits BookStoreComponentBase
<AbpPageHeader Title="Index"></AbpPageHeader>
<div >
<div style="text-align: center">
<Alert Type="@AlertType.Success"
Message="Success"
Description=" Congratulations, BookStore is successfully running!"
ShowIcon="true"/>
<Divider/>
</div>
</div>
更新靜態資源包
在 BookStore.Blazor 專案目錄打開 terminal 運行 dotnet build & abp hundle 命令, abp bundle 用于更新捆綁資源.
All done
使用 BookStore.DbMigrator 創建資料庫與初始化種子資料，運行 BookStore.HttpApi.Host 和 BookStore.Blazor 專案，你會看到以下頁面:
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/438592.html
標籤：.NET技术