AntBlazor Theme in ABP Framework

liangshiwei發表於2022-03-06
BlazorFramework

介紹

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 class="page-content">
    <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 專案，你會看到以下頁面:

相關文章