抠丁客 抠丁客
项目
编辑 (2025/12/26)

Lepton 主题模块

你必须拥有 ABP Team 或更高级别的许可 才能使用此主题。

Lepton 主题是专为 ABP 设计的专业主题。

  • 基于 Bootstrap 5 库构建。
  • 与 Bootstrap 5 的 HTML 结构和 CSS 类 100% 兼容。
  • 响应式设计，兼容移动设备。
  • 提供多种样式，如 Material、深色、浅色。
  • 提供 Datatables 的样式支持。

以下是该主题浅色样式的截图：

lepton-theme-light

查看所有主题样式并创建演示以查看实际效果。

如何安装

如果你在启动模板中将主题指定为 LeptonTheme，Lepton 主题模块可以预安装（请参阅 CLI 文档）。因此，无需手动安装。

包

此模块遵循模块开发最佳实践指南，包含多个 NuGet 和 NPM 包。如果你想了解这些包及其之间的关系，请参阅该指南。

NuGet 包

  • Volo.Abp.LeptonTheme.Management.Domain.Shared
  • Volo.Abp.LeptonTheme.Management.Domain
  • Volo.Abp.LeptonTheme.Management.Application.Contracts
  • Volo.Abp.LeptonTheme.Management.Application
  • Volo.Abp.LeptonTheme.Management.HttpApi
  • Volo.Abp.LeptonTheme.Management.HttpApi.Client
  • Volo.Abp.LeptonTheme.Management.Web
  • Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton

NPM 包

  • @volo/abp.ng.theme.lepton

用户界面

Lepton 主题模块不提供任何独立的 UI 页面。它仅改变应用程序现有 UI 页面的外观。以下是一些示例页面：

登录页面

lepton-theme-module-login-page

语言页面

lepton-theme-module-languages-page

页面

此模块未定义任何独立页面。

Identity 模块设置界面

Lepton 主题模块在设置页面中添加了一个新选项卡，用于在运行时自定义主题行为。

lepton-theme-module-settings-page

内部细节

设置

有关此模块定义的所有设置，请参阅 LeptonThemeSettingNames 类的成员。

权限

有关此模块定义的所有权限，请参阅 LeptonThemeManagementPermissions 类的成员。

源代码

要下载 Lepton 主题的源代码，请使用以下 CLI 命令：

abp get-source Volo.Abp.LeptonTheme # 适用于新版 ABP CLI

如果你使用的是旧版 ABP CLI，可以使用以下命令：

abp get-source Volo.LeptonTheme

Lepton 主题定制

查看如何定制 Lepton 主题以改变你网站的整体外观。

在本文档中