LeptonX Lite MVC UI

LeptonX Lite 为 ABP Razor Pages 提供了实现。它是 LeptonX Theme 的一个简化版本。

如果您正在寻找一个专业、企业级的主题，可以查看 LeptonX Theme，它是 ABP 的一部分。

有关主题的详细信息，请参阅主题文档。

安装

当您使用启动模板创建新解决方案时，此主题已预装。如果您使用的是其他模板，可以按照以下步骤安装此主题：

将 Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite 包添加到您的 Web 应用程序中。

dotnet add package Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite --prerelease

从项目中移除 Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic 的引用，因为切换到 LeptonX Lite 后不再需要它。
确保您的模块类中已移除旧主题并添加了 LeptonX。

[DependsOn(
     // 从 DependsOn 属性中移除 BasicTheme 模块
-    typeof(AbpAspNetCoreMvcUiBasicThemeModule),
     
     // 向 DependsOn 属性中添加 LeptonX Lite 模块
+    typeof(AbpAspNetCoreMvcUiLeptonXLiteThemeModule),
)]

在 AbpBundlingOptions 中，将 BasicThemeBundles 替换为 LeptonXLiteThemeBundles：

Configure<AbpBundlingOptions>(options =>
{
    options.StyleBundles.Configure(
        // 移除以下行
-       BasicThemeBundles.Styles.Global,
        // 改为添加以下行
+       LeptonXLiteThemeBundles.Styles.Global,
        bundle =>
        {
            bundle.AddFiles("/global-styles.css");
        }
    );
});

自定义

布局

基于 ABP 主题系统，LeptonX Lite MVC 为您的用户界面提供了布局。您可以使用布局来组织您的用户界面。

主题的主要职责是提供布局。所有主题都必须实现三个预定义的布局：

应用程序 (Application)： 默认布局，用于主应用程序页面。
账户 (Account)： 主要由账户模块用于登录、注册、忘记密码等页面。
空布局 (Empty)： 极简布局，不包含任何布局组件。

布局名称是 MVC 项目根目录下 LeptonXLiteTheme 类中定义的常量。

布局页面定义在 Themes/LeptonXLite/Layouts 文件夹下。您可以通过创建同名文件并放置在相同路径的文件夹中来覆盖它。

工具栏

LeptonX Lite 为桌面和移动设备提供了独立的工具栏。您可以独立管理这些工具栏。工具栏名称可在 LeptonXLiteToolbars 类中访问。

LeptonXLiteToolbars.Main
LeptonXLiteToolbars.MainMobile

public class MyProjectNameMainToolbarContributor : IToolbarContributor
{
    public async Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
    {
        if (context.Toolbar.Name == LeptonXLiteToolbars.Main)
        {
            context.Toolbar.Items.Add(new ToolbarItem(typeof(MyDesktopComponent)));
        }

        if (context.Toolbar.Name == LeptonXLiteToolbars.MainMobile)
        {
            context.Toolbar.Items.Add(new ToolbarItem(typeof(MyMobileComponent)));
        }
    }
}

LeptonX Lite MVC 组件

ABP 帮助您构建高度可定制的用户界面。您可以轻松自定义主题以满足您的需求。虚拟文件系统使得管理物理上不存在于文件系统（磁盘）上的文件成为可能。它主要用于将 (js、css、图片等) 文件嵌入到程序集中，并在运行时像物理文件一样使用它们。一个应用程序（或另一个模块）可以覆盖模块的虚拟文件，就像将同名同扩展名的文件放入虚拟文件所在文件夹一样简单。

LeptonX Lite 构建于 ABP 之上，因此您可以按照 ABP MVC UI 自定义指南轻松自定义您的 ASP.NET Core MVC 用户界面。

品牌组件

品牌组件是一个简单的组件，用于显示您的品牌。它包含一个徽标和一个公司名称。

如何在 LeptonX Lite MVC 中覆盖品牌组件

品牌组件页面 (.cshtml 文件) 定义在 Themes/LeptonXLite/Components/Brand/Default.cshtml 文件中。您可以通过在相同路径下创建同名文件来覆盖它。
品牌组件 (C# 文件) 定义在 Themes/LeptonXLite/Components/Brand/MainNavbarBrandViewComponent.cs 文件中。您可以通过在相同路径下创建同名文件来覆盖它。

如何在 LeptonX Lite MVC 中覆盖网站图标

您可以通过向 ~/wwwroot/favicon.svg 和 ~/wwwroot/favicon.ico 路径添加新的网站图标文件来覆盖当前网站图标。

面包屑组件

对于拥有大量页面的网站，面包屑导航可以极大地提升用户寻找路径的方式。在可用性方面，面包屑减少了网站访问者到达高层级页面所需的操作次数，并提高了网站各部分和页面的可查找性。

如何在 LeptonX Lite MVC 中覆盖面包屑组件

面包屑组件页面 (.cshtml 文件) 定义在 Themes/LeptonXLite/Components/Breadcrumbs/Default.cshtml 文件中。您可以通过在相同路径下创建同名文件来覆盖它。
面包屑组件 (C# 文件) 定义在 Themes/LeptonXLite/Components/Breadcrumbs/BreadcrumbsViewComponent.cs 文件中。您可以通过在相同路径下创建同名文件来覆盖它。

侧边栏菜单组件

侧边栏菜单通常用作相关页面的目录，用于指向某个服务的导航项、特定服务或主题，甚至只是用户可能感兴趣的链接。

如何在 LeptonX Lite MVC 中覆盖侧边栏菜单组件

侧边栏菜单页面 (.cshtml 文件) 定义在 Themes/LeptonXLite/Components/Menu/Default.cshtml 文件中。您可以通过在相同路径下创建同名文件来覆盖它。
如果您想覆盖菜单组件 (C# 文件)，您可以覆盖 Themes/LeptonXLite/Components/Menu/MainMenuViewComponent.cs 文件。您可以通过在相同路径下创建同名文件来覆盖它。

侧边栏菜单会动态渲染菜单项。菜单项是一个局部视图，定义在 Themes/LeptonXLite/Components/Menu/_MenuItem.cshtml 文件中。您可以通过在相同路径下创建同名文件来覆盖它。

页面提示组件

通过多种可用且灵活的提示消息，为典型的用户操作提供上下文反馈消息。提示消息可以容纳任意长度的文本，并支持可选的关闭按钮。

如何在 LeptonX Lite MVC 中覆盖页面提示组件

页面提示组件页面 (.cshtml 文件) 定义在 Themes/LeptonXLite/Components/PageAlerts/Default.cshtml 文件中。您可以通过在相同路径下创建同名文件来覆盖它。
页面提示组件 (C# 文件) 定义在 Themes/LeptonXLite/Components/PageAlerts/PageAlertsViewComponent.cs 文件中。您可以通过在相同路径下创建同名文件来覆盖它。

工具栏组件

工具栏项用于为工具栏添加额外功能。工具栏是一个水平栏，包含一组工具栏项。

如何在 LeptonX Lite MVC 中覆盖工具栏组件

工具栏组件页面 (.cshtml 文件) 定义在 Themes/LeptonXLite/Components/Toolbar/Default.cshtml 文件中。您可以通过在相同路径下创建同名文件来覆盖它。
工具栏组件 (C# 文件) 定义在 Themes/LeptonXLite/Components/Toolbar/ToolbarViewComponent.cs 文件中。您可以通过在相同路径下创建同名文件来覆盖它。

工具栏项组件

工具栏项是单个项目，包含一个链接、一个图标、一个标签等。

如何在 LeptonX Lite MVC 中覆盖工具栏项组件

工具栏项组件页面 (.cshtml 文件) 定义在 Themes/LeptonXLite/Components/ToolbarItems/Default.cshtml 文件中。您可以通过在相同路径下创建同名文件来覆盖它。
工具栏项组件 (C# 文件) 定义在 Themes/LeptonXLite/Components/ToolbarItems/ToolbarItemsViewComponent.cs 文件中。您可以通过在相同路径下创建同名文件来覆盖它。

您可以在下方找到工具栏组件：

语言切换组件

考虑到一个多语言网站，首先映入您脑海的可能就是语言切换组件。导航栏是嵌入语言切换器的绝佳位置。通过在网站的导航栏中嵌入语言切换器，您可以让用户更容易找到它并轻松切换语言，无需在网站各处费力寻找。

如何在 LeptonX Lite MVC 中覆盖语言切换组件

语言切换组件页面 (.cshtml 文件) 定义在 Themes/LeptonXLite/Components/LanguageSwitch/Default.cshtml 文件中。您可以通过在相同路径下创建同名文件来覆盖它。
语言切换组件 (C# 文件) 定义在 Themes/LeptonXLite/Components/LanguageSwitch/LanguageSwitchViewComponent.cs 文件中。您可以通过在相同路径下创建同名文件来覆盖它。

移动端语言切换组件

移动端语言切换组件用于在移动设备上切换网站的语言。移动端语言切换组件是一个下拉菜单，包含网站的所有语言选项。

如何在 LeptonX Lite MVC 中覆盖移动端语言切换组件

移动端语言切换组件页面 (.cshtml 文件) 定义在 Themes/LeptonXLite/Components/MobileLanguageSwitch/Default.cshtml 文件中。您可以通过在相同路径下创建同名文件来覆盖它。
移动端语言切换组件 (C# 文件) 定义在 Themes/LeptonXLite/Components/MobileLanguageSwitch/MobileLanguageSwitchViewComponent.cs 文件中。您可以通过在相同路径下创建同名文件来覆盖它。

用户菜单组件

用户菜单是当您在页面右上角（工具栏内）点击您的姓名或个人资料图片时下拉显示的菜单。它会显示诸如设置、注销等选项。

如何在 LeptonX Lite MVC 中覆盖用户菜单组件

用户菜单组件页面 (.cshtml 文件) 定义在 Themes/LeptonXLite/Components/UserMenu/Default.cshtml 文件中。您可以通过在相同路径下创建同名文件来覆盖它。
用户菜单组件 (C# 文件) 定义在 Themes/LeptonXLite/Components/UserMenu/UserMenuViewComponent.cs 文件中。您可以通过在相同路径下创建同名文件来覆盖它。

移动端用户菜单组件

移动端用户菜单组件用于在移动设备上显示用户菜单。移动端用户菜单组件是一个下拉菜单，包含用户菜单的所有选项。

如何在 LeptonX Lite MVC 中覆盖移动端用户菜单组件

移动端用户菜单组件页面 (.cshtml 文件) 定义在 Themes/LeptonXLite/Components/MobileUserMenu/Default.cshtml 文件中。您可以通过在相同路径下创建同名文件来覆盖它。
移动端用户菜单组件 (C# 文件) 定义在 Themes/LeptonLite/Components/MobileUserMenu/MobileUserMenuViewComponent.cs 文件中。您可以通过在相同路径下创建同名文件来覆盖它。