第 12 章自定义主页

使用 app-config 时，您可以执行以下操作：

根据您安装并启用的插件，使用显示的额外卡自定义并扩展默认的 Home 页面布局。
更改快速访问链接。
添加、重新组织和删除以下可用卡：
- 搜索栏
- 快速访问
- 标题
- Markdown
- 占位符
- 目录不足实体
- 特性文档

12.1. 自定义主页卡
复制链接

作为管理员，您可以自定义 Home 页面的布局和内容，以创建定制的用户体验。这包括将各种专用卡集成到主视图中。

Home 页面布局使用 12 个列网格系统。您可以在多个屏幕断点中精确定义每个卡的位置(x)、宽(w)和高度(h)：

extra-large (xl)
Large (lg)
Medium (md)
small (sm)
extra-small (xs)
extra-extra-small (xxs)

默认 Home 页面如以下 app-config.yaml 文件配置所示：

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      dynamicRoutes:
        - path: /
          importName: DynamicHomePage
      mountPoints:
        - mountPoint: home.page/cards
          importName: SearchBar
          config:
            layouts:
              xl: { w: 10, h: 1, x: 1 }
              lg: { w: 10, h: 1, x: 1 }
              md: { w: 10, h: 1, x: 1 }
              sm: { w: 10, h: 1, x: 1 }
              xs: { w: 12, h: 1 }
              xxs: { w: 12, h: 1 }
        - mountPoint: home.page/cards
          importName: QuickAccessCard
          config:
            layouts:
              xl: { w: 7, h: 8 }
              lg: { w: 7, h: 8 }
              md: { w: 7, h: 8 }
              sm: { w: 12, h: 8 }
              xs: { w: 12, h: 8 }
              xxs: { w: 12, h: 8 }
        - mountPoint: home.page/cards
          importName: CatalogStarredEntitiesCard
          config:
            layouts:
              xl: { w: 5, h: 4, x: 7 }
              lg: { w: 5, h: 4, x: 7 }
              md: { w: 5, h: 4, x: 7 }
              sm: { w: 12, h: 4 }
              xs: { w: 12, h: 4 }
              xxs: { w: 12, h: 4 }

先决条件

您有管理访问权限，并可修改动态插件配置的 app-config.yaml 文件。

流程

在 Red Hat Developer Hub 中为 Home 页面配置不同的卡，如以下代码所示：

搜索

您可以使用 SearchBar 卡直接在 Home 页面中提供基本搜索功能。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: SearchBar
          config:
            layouts:
              xl: { w: 10, h: 1, x: 1 }
              lg: { w: 10, h: 1, x: 1 }
              md: { w: 10, h: 1, x: 1 }
              sm: { w: 10, h: 1, x: 1 }
              xs: { w: 12, h: 1 }
              xxs: { w: 12, h: 1 }
            props:
              path: /search
              queryParam: query

Expand

表 12.1. 可用的 props
prop	default	描述
`path`	`/search`	如果需要，覆盖链接的搜索路径
`queryParam`	`query`	如果需要，覆盖搜索查询参数名称

快速访问

您可以使用 QuickAccessCard 卡作为可自定义的快捷方式面板。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: QuickAccessCard
          config:
            layouts:
              xl: { h: 8 }
              lg: { h: 8 }
              md: { h: 8 }
              sm: { h: 8 }
              xs: { h: 8 }
              xxs: { h: 8 }
            props:
              title: Quick Access
              path: /quickaccess

Expand

表 12.2. 可用的 props
prop	default	描述
`title`	`快速访问`	如果需要，覆盖链接的搜索路径
`path`	none	如果需要，覆盖搜索查询参数名称

标题

您可以使用 head line 卡显示重要信息。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: Headline
          config:
            layouts:
              xl: { h: 1 }
              lg: { h: 1 }
              md: { h: 1 }
              sm: { h: 1 }
              xs: { h: 1 }
              xxs: { h: 1 }
            props:
              title: Important info

Expand

表 12.3. 可用的 props
prop	default	描述
`title`	none	标题

Markdown

您可以使用 Markdown 卡直接在 Home 页面布局中显示丰富的格式化内容。此卡使用 Markdown 语法来显示结构化信息，如列表和链接（文档和插件存储库）。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: MarkdownCard
          config:
            layouts:
              xl: { w: 6, h: 4 }
              lg: { w: 6, h: 4 }
              md: { w: 6, h: 4 }
              sm: { w: 6, h: 4 }
              xs: { w: 6, h: 4 }
              xxs: { w: 6, h: 4 }
            props:
              title: Company links
              content: |
                ### RHDH
                * [Website](https://developers.redhat.com/rhdh/overview)
                * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
                * [Backstage Community Plugins](https://github.com/backstage/community-plugins)
                * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins)
                * [RHDH Hub](https://github.com/redhat-developer/rhdh)
        - mountPoint: home.page/cards
          importName: Markdown
          config:
            layouts:
              xl: { w: 6, h: 4, x: 6 }
              lg: { w: 6, h: 4, x: 6 }
              md: { w: 6, h: 4, x: 6 }
              sm: { w: 6, h: 4, x: 6 }
              xs: { w: 6, h: 4, x: 6 }
              xxs: { w: 6, h: 4, x: 6 }
            props:
              title: Important company links
              content: |
                ### RHDH
                * [Website](https://developers.redhat.com/rhdh/overview)
                * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
                * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
                * [Backstage Community Plugins](https://github.com/backstage/community-plugins)
                * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins)
                * [RHDH Hub](https://github.com/redhat-developer/rhdh)

占位符

您可以使用 Placeholder 卡作为实用程序元素，用于保留空间或在 Home 页面中进行布局测试。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 1, h: 1 }
              lg: { w: 1, h: 1 }
              md: { w: 1, h: 1 }
              sm: { w: 1, h: 1 }
              xs: { w: 1, h: 1 }
              xxs: { w: 1, h: 1 }
            props:
              showBorder: true
              debugContent: '1'

目录不足实体

您可以使用 CatalogStarredEntitiesCard 卡在 Home 页面中提供一个专用空间，供用户查看标记为 starred 的目录实体。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: CatalogStarredEntitiesCard

特性文档

您可以使用 FeaturedDocsCard 卡来突出显示 Red Hat Developer Hub 中的特定文档，因为它可在 Home 页面中部署。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: FeaturedDocsCard

EntitySection

您可以使用 EntitySection 卡创建一个视觉参与的部分，该部分突出显示各种类型的目录实体，如 组件、API、资源 和 系统。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: EntitySection
          config:
            layouts:
              xl: { w: 12, h: 6 }
              lg: { w: 12, h: 6 }
              md: { w: 12, h: 6 }
              sm: { w: 12, h: 6 }
              xs: { w: 12, h: 6 }
              xxs: { w: 12, h: 14.5 }

OnboardingSection

您可以使用 OnboardingSection 卡快速发现 RHDH 中的学习资源。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: OnboardingSection
          config:
            layouts:
              xl: { w: 12, h: 5 }
              lg: { w: 12, h: 5 }
              md: { w: 12, h: 5 }
              sm: { w: 12, h: 5 }
              xs: { w: 12, h: 7 }
              xxs: { w: 12, h: 12 }

TemplateSection

您可以使用 TemplateSection 卡在 RHDH 中快速探索并启动软件模板。

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: TemplateSection
          config:
            layouts:
              xl: { w: 12, h: 5 }
              lg: { w: 12, h: 5 }
              md: { w: 12, h: 5 }
              sm: { w: 12, h: 5 }
              xs: { w: 12, h: 5 }
              xxs: { w: 12, h: 14 }

第 12 章自定义主页

12.1. 自定义主页卡
复制链接

学习

尝试、购买和销售

社区

关于红帽文档

让开源更具包容性

關於紅帽

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links

第 12 章 自定义主页

12.1. 自定义主页卡复制链接链接已复制到粘贴板!

学习

尝试、购买和销售

社区

关于红帽文档

让开源更具包容性

關於紅帽

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links

第 12 章自定义主页

12.1. 自定义主页卡
复制链接