第 11 章 自定义主页

先决条件

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

流程

• 在 Red Hat Developer Hub 中为 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 }

  Copy to Clipboard

  表 11.1. 可用的 props

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

  快速访问

  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 }

  Copy to Clipboard

  表 11.2. 可用的 props

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

  标题

  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

  表 11.3. 可用的 props

  prop	default	描述
  title	none	标题

  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

  占位符

  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

  目录不足实体

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

  Copy to Clipboard

  特性文档

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

  Copy to Clipboard