使用自定义 CSS 定制 Lepton 主题

你可能希望通过自定义 CSS（层叠样式表）文件来改变网站的某些外观。本文档将向你展示如何向你的 ABP Angular 解决方案添加自定义 CSS，以替换现有的 Lepton 主题 CSS。通过添加自定义 CSS，你将修改网站的整体外观。

添加自定义样式

在 provideThemeLepton(withLeptonOptions({...})) 方法中有一个 customStyle 布尔配置。如果此配置为 true，则主题设置表单中不包含样式选择框，并且 theme-lepton 不会加载其自身的样式。在这种情况下，必须在 angular.json 的 styles 数组中添加自定义样式文件，或者通过 style.scss 导入该文件。

只有 Angular 项目的样式可以通过这种方式更改。如果授权流程是授权码流程，MVC 页面（登录、个人资料等）将不受此更改的影响。

可以按照以下步骤实现自定义样式：

在调用 provideThemeLepton(withLeptonOptions({...})) 方法的地方，将 customStyle 属性设置为 true。

// app.config.ts
import { provideThemeLepton, withOptions as withLeptonOptions } from '@volo/abp.ng.theme.lepton';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideThemeLepton(
      withLeptonOptions({
        customStyle: true
      })
    )
  ],
};

将你的样式文件导入到 src/style.scss

/* style.scss */
@import 'your-custom-style';

或者

/* style.scss */
@use 'your-custom-style';

或者将你的样式文件添加到 angular.json 文件的 styles 数组中

// angular.json
{
   // 其他配置
  "projects": {
    "YourProject": {
      // 其他配置
      "architect": {
        "build": {
            "styles": [
              // 其他样式
              "your-custom-style-file"
            ],
          },
        },
        "test": {
          "options": {
            "styles": [
               // 其他样式
              "your-custom-style-file"
            ],
          }
        },
      }
    }
  }
}

向 Lepton 菜单插入自定义内容

Lepton 菜单可以在显示的菜单项之前和之后接收自定义内容。为此，请在你导入根应用配置（即 appConfig）中的提供程序时，将一个组件作为内容通过 provideThemeLepton(withLeptonOptions({...})) 的参数传递。让我们看一些例子。

在菜单项前后放置自定义内容

第一步是创建一个将用作自定义内容的组件。

// ...
@Component({
  // ...
  imports: [AsyncPipe],
  template: `<a href="https://support.my-domain.com">
    <span class="lp-icon"><i class="fas fa-headset"></i></span>
    <span class="lp-text">支持问题</span>
    <div class="d-flex justify-content-end">
      <span class="badge badge-pill badge-warning">{{ issueCount$ | async }}</span>
    </div>
  </a>`,
})
export class SupportLinkComponent {
  issueCount$ = of(26); // 虚拟数量，请用实际服务替换
}

现在，将此组件作为 contentAfterRoutes 选项传递给 provideThemeLepton(withLeptonOptions({...}))。

import { provideThemeLepton, withOptions as withLeptonOptions } from '@volo/abp.ng.theme.lepton';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideThemeLepton(
      withLeptonOptions({
        contentAfterRoutes: [SupportLinkComponent],
      })
    )
  ],
};

如果你启动开发服务器，应该会看到插入的内容如下：

将内容放置在菜单项之前很简单：只需将 contentAfterRoutes 替换为 contentBeforeRoutes。

在菜单项前放置搜索输入框

Lepton 包有一个设计用于与菜单中的路由协同工作的搜索组件。你可以简单地导入该提供程序，并将组件作为 contentBeforeRoutes 选项传递给 provideThemeLepton(withLeptonOptions({...}))。

import { provideThemeLepton, withOptions as withLeptonOptions } from '@volo/abp.ng.theme.lepton';
import { MenuSearchComponent, provideMenuSearch } from '@volo/abp.ng.theme.lepton/extensions';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideThemeLepton(
      withLeptonOptions({
        contentBeforeRoutes: [MenuSearchComponent],
      })
    ),
    provideMenuSearch({
      limit: 3 // 搜索结果限制（默认：无限制）
    })
  ],
};

以下是搜索输入框的工作方式：

请注意，搜索组件仅过滤路由，无法隐藏自定义内容。