Skip to main content

使用插件配置应用程序

Backstage 插件可根据您的需要定制应用程序。插件目录提供满足许多常见基础架构需求的插件--CI/CD、监控、审计等。

为应用程序添加现有插件​

以下步骤假定您已创建了Backstage应用程序并想在其中添加一个现有插件。

我们正在使用CircleCI在本示例中，该插件旨在显示软件目录中实体所附的 CI/CD 管道信息。

  1. Add the plugin's npm package to the repo: bash # From your Backstage root directory yarn add --cwd packages/app @circleci/backstage-plugin Note the plugin is added to the app package, rather than the root package.json. Backstage Apps are set up as monorepos with Yarn workspaces. Since CircleCI is a frontend UI plugin, it goes in app rather than backend. 2. Add the EntityCircleCIContent extension to the entity pages in the app: tsx title="packages/app/src/components/catalog/EntityPage.tsx" /* highlight-add-start */ import { EntityCircleCIContent, isCircleCIAvailable, } from '@circleci/backstage-plugin'; /* highlight-add-end */ const cicdContent = ( <EntitySwitch> {/* ... */} {/* highlight-add-next-line */} <EntitySwitch.Case if={isCircleCIAvailable}> <EntityCircleCIContent /> </EntitySwitch.Case> ;{/* highlight-add-end */} </EntitySwitch> ); This is just one example, but each Backstage instance may integrate content or cards to suit th

在侧边栏添加插件页面​

在一个标准的 Backstage 应用程序中，使用@backstage/create-app，侧边栏在packages/app/src/components/Root/Root.tsx该文件导出了整个Sidebar元素，您可以通过添加新的SidebarItem元素。

例如，如果您安装了api-docs插件，一个匹配的SidebarItem可以是这样的

packages/app/src/components/Root/Root.tsx
// Import icon from Material UI
import ExtensionIcon from '@material-ui/icons/Extension';

// ... inside the AppSidebar component
<SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />;

您也可以直接使用自己的 SVG 作为图标组件，只要确保它们的大小符合 Material UI 的SvgIcon默认值为 24x24px，并将扩展名设置为.icon.svg例如

import InternalToolIcon from './internal-tool.icon.svg';

在移动设备上Sidebar为了定制体验，您可以将以下内容分组SidebarItems于SidebarGroup(例 1)或创建一个SidebarGroup全部SidebarGroup会以图标形式显示在底部导航栏中。

// Example 1
<SidebarGroup icon={<MenuIcon />} label="Menu">
  ...
  <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
  ...
<SidebarGroup />
// Example 2
<SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
  ...
  <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
  ...
<SidebarGroup />

如果没有SidebarGroup默认菜单将显示Sidebar内容。