Blazor UI：基础主题

基础主题是专为Blazor UI实现的主题方案。这是一个极简风格的主题，在原生 Bootstrap 框架基础上未添加任何额外样式。您可以将基础主题作为底层主题，并基于它构建自己的主题或样式。具体请参阅自定义章节。

如果您需要专业且具备企业级Ready的主题，可查看作为 ABP 组成部分的 Lepton主题。

关于主题系统的完整说明，请参阅主题文档。

安装指南

如需手动安装此主题，请按以下步骤操作：

在Blazor项目中安装Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Bundling NuGet包
在Blazor项目的模块类的[DependsOn(...)]属性中添加AbpAspNetCoreComponentsWebAssemblyBasicThemeBundlingModule
在Blazor.Client项目中安装Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme NuGet包
在Blazor.Client项目的模块类的[DependsOn(...)]属性中添加AbpAspNetCoreComponentsWebAssemblyBasicThemeModule

按以下方式更新Blazor.Client项目中的Routes.razor文件：

@using Volo.Abp.AspNetCore.Components.Web.BasicTheme.Themes.Basic
@using Volo.Abp.AspNetCore.Components.WebAssembly.WebApp
<Router AppAssembly="typeof(Program).Assembly" AdditionalAssemblies="WebAppAdditionalAssembliesHelper.GetAssemblies<YourBlazorClientModule>()">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)">
            <NotAuthorized>
                <RedirectToLogin />
            </NotAuthorized>
        </AuthorizeRouteView>
    </Found>
</Router>

布局结构

应用布局除包含上述通用部分外，还实现了以下组件区域：

品牌标识区域
主导航菜单
包含语言选择与用户菜单的主工具栏
页面提示

自定义方案

您可通过两种方式自定义此主题：

覆盖样式/组件

此方案中，您可继续使用NuGet和NPM包形式提供的主题，并按需自定义特定部分：

样式覆盖

您可以直接在应用程序的全局样式文件中覆盖样式定义。

组件覆盖

请参阅自定义/覆盖组件了解如何替换组件、定制和扩展用户界面。

覆盖菜单项

基础主题支持使用自定义组件覆盖单个菜单项。您可创建自定义组件并在菜单贡献者中调用UseComponent扩展方法。

using Volo.Abp.UI.Navigation;

//...

context.Menu.Items.Add(
  new ApplicationMenuItem("Custom.1", "我的自定义菜单", "#")
    .UseComponent(typeof(MyMenuItemComponent)));

<li class="nav-item">
    <a href="#" class="nav-link">
        我的自定义菜单
    </a>
</li>

复制源码并自定义

在BlazorWebAssembly项目目录中执行以下 ABP CLI 命令，将源代码复制至您的解决方案：

abp add-package Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme --with-source-code --add-to-solution-file

随后进入下载的Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme项目目录并执行：

abp add-package Volo.Abp.AspNetCore.Components.Web.BasicTheme --with-source-code --add-to-solution-file

或者，您也可以下载基础主题的源代码，手动将项目内容复制到解决方案中，重新配置包/模块依赖关系（参见上文安装章节了解原始安装方式），并根据应用需求自由定制主题。

基础主题源代码

扩展阅读

主题系统