Backstage主页 - 设置和定制

Homepage

拥有一个好的Backstage主页可以大大提高平台的可发现性。 你希望用户能在主页上找到他们需要的所有东西，而不必在Backstage记住直接的 URL。主页插件介绍了一个为Backstage组成主页的系统，以显示相关信息，并为常见任务提供方便的快捷方式。 它的设计考虑到了可组合性，采用开放式生态系统，允许任何人贡献任何组件，并将其包含在任何主页中。

对于应用程序集成商来说，该系统的设计是可组合的，可以完全自由地设计符合组织需求的主页。 从组件开发人员的角度来看，他们希望为主页提供构建模块，因此有一个方便的界面来捆绑不同的部分并导出它们，同时在表面之下处理错误边界和懒加载。

在本教程结束时，您可以期待：

• 您的 Backstage 应用程序要有专门的主页，而不是软件目录。 * 了解主页的可组合性，以及如何开始为自己的组织定制主页。

先决条件

在我们开始之前，请确保

• 您使用 @backstage/create-app创建了自己的独立Backstage应用程序，而不是使用 backstage 源的 fork。 * 您没有现有的主页，默认情况下，打开Backstage时您会被重定向到软件目录。

现在，让我们开始安装主页插件，为你的 Backstage 应用程序创建一个简单的主页。

设置主页

1. 安装插件

# From your Backstage root directory
yarn add --cwd packages/app @backstage/plugin-home

2. 创建一个新的主页组件

您的packages/app目录下，创建一个新文件，用于存放我们的新主页组件。 创建packages/app/src/components/home/HomePage.tsx初始代码如下

import React from 'react';

export const HomePage = () => (
  /* We will shortly compose a pretty homepage here. */
  <h1>Welcome to Backstage!</h1>
);

3. 更新根/路由的路由器

如果您还没有主页，很可能您已经设置了重定向，将目录主页用作主页。

您的packages/app/src/App.tsx寻找

packages/app/src/App.tsx

const routes = (
  <FlatRoutes>
    <Navigate key="/" to="catalog" />
    {/* ... */}
  </FlatRoutes>
);

让我们把<Navigate>行，并使用我们在上一步中创建的新组件作为新的主页。

packages/app/src/App.tsx

import { HomepageCompositionRoot } from '@backstage/plugin-home';
import { HomePage } from './components/home/HomePage';

const routes = (
  <FlatRoutes>
    <Navigate key="/" to="catalog" />
    <Route path="/" element={<HomepageCompositionRoot />}>
      <HomePage />
    </Route>
    {/* ... */}
  </FlatRoutes>
);

4. 更新侧边栏项目

让我们更新Backstage侧边栏中 "主页 "的路径，使其指向新主页。 我们还将添加一个侧边栏项，以快速打开目录。

| 之前 | 之后 | | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | | |||

Backstage 侧边栏的代码很可能就在你的packages/app/src/components/Root/Root.tsx.

让我们做如下改动

packages/app/src/components/Root/Root.tsx

import CategoryIcon from '@material-ui/icons/Category';

export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
      <SidebarLogo />
      {/* ... */}
      <SidebarGroup label="Menu" icon={<MenuIcon />}>
        {/* Global nav, not org-specific */}
        <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
        <SidebarItem icon={HomeIcon} to="/" text="Home" />
        <SidebarItem icon={CategoryIcon} to="catalog" text="Catalog" />
        <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
        <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
        <SidebarItem icon={LayersIcon} to="explore" text="Explore" />
        <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
        {/* End global nav */}
        <SidebarDivider />
        {/* ... */}
      </SidebarGroup>
    </Sidebar>
  </SidebarPage>
);

就是这样！您现在应该有虽然略显无聊)_a 主页！

在接下来的步骤中，我们将使其变得有趣和有用！

使用默认模板

有一个默认的主页模板 (故事书链接)，我们将使用它来设置主页。 查看博文公告有关Backstage主页模板的更多信息。

撰写您的主页

制作主页与制作普通的 React 组件没有什么不同，也就是说，应用程序集成者可以自由地添加他们喜欢的任何内容。 不过，也有一些组件是专门为主页开发的。 如果您正在寻找制作主页时可以使用的组件，您可以看看主页组件集如果您没有找到适合您需要的组件，但又想贡献自己的力量，请查看提供文件.

如果您想使用可用的主页模板，可以在故事书中的 "主页 "插件下找到 > 模板。 如果您想贡献 > 一个模板，请查看 > 贡献文档

import React from 'react';
import Grid from '@material-ui/core/Grid';
import { HomePageCompanyLogo } from '@backstage/plugin-home';

export const homePage = (
  <Grid container spacing={3}>
    <Grid item xs={12} md={4}>
      <HomePageCompanyLogo />
    </Grid>
  </Grid>
);