在ABP Framework MVC / Razor Pages UI 项目中使用 AdminLTE 主题

本文逐步介绍了如何针对ABP Framework MVC / Razor Page UI应用程序使用AdminLTE主题。

首先，让我们使用以下命令安装ABP CLI工具。

dotnet tool install -g Volo.Abp.Cli

如果已经安装，则可以使用以下命令对其进行更新：

dotnet tool update -g Volo.Abp.Cli

让我们创建一个示例新项目以应用主题：

abp new AbpThemeAdminLte

让我们在项目主目录中为主题项目创建一个主题文件夹，然后在命令行上转到主题目录：

mkdir theme
cd theme

再通过git获得用于ABP的AdminLTE主题模块项目：

git clone https://github.com/mucahiddanis/Abp.AspNetCore.Mvc.UI.Theme.AdminLTE.git

返回项目主目录：

cd ../../

让我们将AdminLTE主题项目添加到sln文件中：

dotnet sln add theme/Abp.AspNetCore.Mvc.UI.Theme.AdminLTE/Abp.AspNetCore.Mvc.UI.Theme.AdminLTE.csproj

在AbpThemeAdminLte.Web项目中引用AdminLTE主题项目：

配置模块 AbpThemeAdminLte.Web.AbpThemeAdminLteWebModule.cs:

[DependsOn(
        typeof(AbpThemeAdminLteHttpApiModule),
        typeof(AbpThemeAdminLteApplicationModule),
        typeof(AbpThemeAdminLteEntityFrameworkCoreDbMigrationsModule),
        typeof(AbpAutofacModule),
        typeof(AbpIdentityWebModule),
        typeof(AbpAccountWebIdentityServerModule),
        typeof(AbpAspNetCoreMvcUiBasicThemeModule),
        typeof(AbpAspNetCoreAuthenticationJwtBearerModule),
        typeof(AbpTenantManagementWebModule),
        typeof(AbpAspNetCoreSerilogModule)
        )]
    public class AbpThemeAdminLteWebModule : AbpModule

typeof(AbpAspNetCoreMvcUiBasicThemeModule),

在上面的代码下面添加以下代码：

typeof(AbpAspNetCoreMvcUiAdminLTEThemeModule),

添加使用以引用主题项目

using Abp.AspNetCore.Mvc.UI.Theme.AdminLTE;

依赖清单最终应该是：

[DependsOn(
        typeof(AbpThemeAdminLteHttpApiModule),
        typeof(AbpThemeAdminLteApplicationModule),
        typeof(AbpThemeAdminLteEntityFrameworkCoreDbMigrationsModule),
        typeof(AbpAutofacModule),
        typeof(AbpIdentityWebModule),
        typeof(AbpAccountWebIdentityServerModule),
        typeof(AbpAspNetCoreMvcUiBasicThemeModule),
        typeof(AbpAspNetCoreMvcUiAdminLTEThemeModule),
        typeof(AbpAspNetCoreAuthenticationJwtBearerModule),
        typeof(AbpTenantManagementWebModule),
        typeof(AbpAspNetCoreSerilogModule)
        )]
    public class AbpThemeAdminLteWebModule : AbpModule

为AdminLTE主题的css, js, image设置 VirtualFileSystem. 在 AbpThemeAdminLte.Web.AbpThemeAdminLteWebModule.cs 中. 添加 ConfigureVirtualFileSystem 方法:

private void ConfigureVirtualFileSystem(IWebHostEnvironment hostingEnvironment)
        {
            if (hostingEnvironment.IsDevelopment())
            {
                Configure(options =>
                {
                    options.FileSets.ReplaceEmbeddedByPhysical(Path.Combine(hostingEnvironment.ContentRootPath, $"..{Path.DirectorySeparatorChar}AbpThemeAdminLte.Domain.Shared"));
                    options.FileSets.ReplaceEmbeddedByPhysical(Path.Combine(hostingEnvironment.ContentRootPath, $"..{Path.DirectorySeparatorChar}AbpThemeAdminLte.Domain"));
                    options.FileSets.ReplaceEmbeddedByPhysical(Path.Combine(hostingEnvironment.ContentRootPath, $"..{Path.DirectorySeparatorChar}AbpThemeAdminLte.Application.Contracts"));
                    options.FileSets.ReplaceEmbeddedByPhysical(Path.Combine(hostingEnvironment.ContentRootPath, $"..{Path.DirectorySeparatorChar}AbpThemeAdminLte.Application"));
                    options.FileSets.ReplaceEmbeddedByPhysical(hostingEnvironment.ContentRootPath);

                    // AdminLTE teması
                    options.FileSets.ReplaceEmbeddedByPhysical(Path.Combine(hostingEnvironment.ContentRootPath, $"..{Path.DirectorySeparatorChar}..{Path.DirectorySeparatorChar}Abp.AspNetCore.Mvc.UI.Theme.AdminLTE"));
                });
            }
        }

构建项目。并运行AbpThemeAdminLte.DbMigrator和AbpThemeAdminLte.Web项目。

——————-完成———————

版本更新

活动版本ABP v3.2.0

您只需要在主题项目文件Abp.AspNetCore.Mvc.UI.Theme.AdminLTE.csproj中更新ABP软件包的版本。