ASP.NET Core MVC / Razor 页面：基础主题

基础主题是为ASP.NET Core MVC / Razor 页面UI实现的一套主题方案。这是一个极简风格的主题，在原生Bootstrap框架基础上未添加任何额外样式。您可以将基础主题作为基础模板，并基于此构建自己的主题或样式。具体请参阅自定义章节。

基础主题支持RTL（从右到左书写）语言。

如果您需要专业级的企业版主题，可查看作为ABP框架组成部分的Lepton主题。

请参阅主题文档了解主题相关概念。

安装指南

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

• 为您的Web项目安装Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic NuGet包
• 在Web项目的模块类的[DependsOn(...)]属性中添加AbpAspNetCoreMvcUiBasicThemeModule
• 为Web项目安装@abp/aspnetcore.mvc.ui.theme.basic NPM包（例如执行abp add-package @abp/aspnetcore.mvc.ui.theme.basic）
• 在Web项目文件夹的命令行终端中运行abp install-libs命令

布局体系

基础主题实现了标准布局结构。所有布局均包含以下组成部分：

• 全局资源包
• 页面提示
• 布局钩子
• 小部件资源

应用布局

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

• 品牌标识
• 主导航菜单
• 含语言选择与用户菜单的主工具栏

账户布局

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

• 品牌标识
• 主导航菜单
• 含语言选择与用户菜单的主工具栏
• 租户切换区域

空白布局

空白布局如其名所示保持空状态，但仍包含上述通用组成部分。

自定义方案

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

覆盖样式/组件

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

覆盖样式

1. 在项目wwwroot文件夹中创建CSS文件：

1. 在模块的ConfigureServices方法中将样式文件添加到全局包：

Configure<AbpBundlingOptions>(options =>
{
    options.StyleBundles.Configure(BasicThemeBundles.Styles.Global, bundle =>
    {
        bundle.AddFiles("/styles/global-styles.css");
    });
});

覆盖组件

请参阅用户界面自定义指南了解如何替换组件、自定义和扩展用户界面。

复制并自定义

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

abp add-source-code Volo.Abp.BasicTheme

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

相关参考

• 主题系统