第 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 }
Copy to Clipboard Toggle word wrap

先决条件

  • 您有管理访问权限,并可修改动态插件配置的 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
    Copy to Clipboard Toggle word wrap
    Expand
    表 12.1. 可用的 props
    propdefault描述

    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
    Copy to Clipboard Toggle word wrap
    Expand
    表 12.2. 可用的 props
    propdefault描述

    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
    Copy to Clipboard Toggle word wrap
    Expand
    表 12.3. 可用的 props
    propdefault描述

    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/)
                    * [Janus Plugins](https://github.com/janus-idp/backstage-plugins)
                    * [Backstage Community Plugins](https://github.com/backstage/community-plugins)
                    * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins)
                    * [RHDH Showcase](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/)
                    * [Janus Plugins](https://github.com/janus-idp/backstage-plugins)
                    * [Backstage Community Plugins](https://github.com/backstage/community-plugins)
                    * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins)
                    * [RHDH Showcase](https://github.com/redhat-developer/rhdh)
    Copy to Clipboard Toggle word wrap
    占位符

    您可以使用 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'
    Copy to Clipboard Toggle word wrap
    目录不足实体

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

    dynamicPlugins:
      frontend:
        red-hat-developer-hub.backstage-plugin-dynamic-home-page:
          mountPoints:
            - mountPoint: home.page/cards
              importName: CatalogStarredEntitiesCard
    Copy to Clipboard Toggle word wrap
    特性文档

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

    dynamicPlugins:
      frontend:
        red-hat-developer-hub.backstage-plugin-dynamic-home-page:
          mountPoints:
            - mountPoint: home.page/cards
              importName: FeaturedDocsCard
    Copy to Clipboard Toggle word wrap
    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 }
    Copy to Clipboard Toggle word wrap
    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 }
    Copy to Clipboard Toggle word wrap
    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 }
    Copy to Clipboard Toggle word wrap
返回顶部
Red Hat logoGithubredditYoutubeTwitter

学习

尝试、购买和销售

社区

关于红帽文档

通过我们的产品和服务,以及可以信赖的内容,帮助红帽用户创新并实现他们的目标。 了解我们当前的更新.

让开源更具包容性

红帽致力于替换我们的代码、文档和 Web 属性中存在问题的语言。欲了解更多详情,请参阅红帽博客.

關於紅帽

我们提供强化的解决方案,使企业能够更轻松地跨平台和环境(从核心数据中心到网络边缘)工作。

Theme

© 2025 Red Hat