自定义 Red Hat Developer Hub

Red Hat Developer Hub 1.5

自定义 Red Hat Developer Hub 外观和功能，如模板、学习路径、技术 Radar、主页和快速访问卡。

Red Hat Customer Content Services

法律通告

摘要

授权用户可以自定义 Red Hat Developer Hub 外观和功能，如模板、学习路径、技术 Radar、主页和快速访问卡。

前言
复制链接

授权用户可以自定义 Red Hat Developer Hub 外观和功能，如模板、学习路径、技术 Radar、主页和快速访问卡。

第 1 章自定义 Red Hat Developer Hub 标题
复制链接

您可以更改默认的 Red Hat Developer Hub 显示名称。

先决条件

自定义开发人员 Hub 配置。

流程

在自定义 app-config.yaml 文件中，输入您的 Developer Hub 实例显示名称，如 < Red Hat Developer Hub >。
app-config.yaml excerpt
```
app:
  title: My custom Red Hat Developer Hub title
```

第 2 章自定义 Red Hat Developer Hub 基本 URL
复制链接

您可以更改默认的 Red Hat Developer Hub 基础 URL。

先决条件

您知道所需的 Developer Hub 外部 URL：https:// &lt;my_developer_hub_url >，并配置了 DNS 以指向 Red Hat OpenShift Container Platform 集群。
自定义开发人员 Hub 配置。

流程

在自定义 app-config.yaml 文件中，输入您的 Developer Hub 外部 URL，如 https:// <my_developer_hub_url>。

app-config.yaml excerpt

app:
  baseUrl: https://<my_developer_hub_url>
backend:
  baseUrl: https://<my_developer_hub_url>
  cors:
    origin: https://<my_developer_hub_url>

第 3 章自定义 Red Hat Developer Hub 后端 secret
复制链接

默认 Red Hat Developer Hub 配置定义了 Developer Hub 后端 secret，供服务用于服务身份验证。

您可以定义自定义 Developer Hub 后端 secret。

先决条件

您添加了自定义 Developer Hub 应用程序配置，并有足够的权限来修改它。

流程

要定义 Developer Hub 后端 secret，请添加到自定义 < my_product_secrets& gt; .txt 文件中，使用 base64 编码字符串为 BACKEND_SECRET 环境变量。为每个 Developer Hub 实例使用唯一值。
```
$ echo > <my_product_secrets>.txt "BACKEND_SECRET=$(node -p 'require("crypto").randomBytes(24).toString("base64")')"
```
<my_product_secrets> .txt 示例
```
BACKEND_SECRET=3E2/rIPuZNFCtYHoxVP8wjriffnN1q/z
```

将后端 secret 添加到自定义 app-config.yaml 文件中。

app-config.yaml 摘录定义后端 secret

backend:
  auth:
    externalAccess:
      - type: legacy
        options:
          subject: legacy-default-config
          secret: "${BACKEND_SECRET}"

第 4 章配置模板
复制链接

配置模板以创建软件组件，并将这些组件发布到不同的位置，如 Red Hat Developer Hub 软件目录或 Git 存储库。

模板由 YAML 文件中定义的不同 UI 字段组成。模板包括操作，它们是按顺序执行的步骤，并可有条件地执行。

4.1. 使用模板编辑器创建软件模板
复制链接

使用 Red Hat Developer Hub 模板编辑器创建软件模板。

另外，您可以使用 Template Editor 来执行以下操作：

file > Open template directory
file > Create template directory
file > Close template editor
使用 Custom Fields Explorer 按钮测试 templates.yaml 文件中的自定义字段
查看 Installed Actions 文档

流程

要使用 Template Editor 模板创建软件模板，请完成以下步骤：

在 Red Hat Developer Hub 导航菜单中点击 Create…。
单击概述菜单，再选择 Manage Templates。
注意
- Managed Templates 页面中的以下选项不会在 Red Hat Developer Hub 实例中创建软件组件：
  Template Form Playground: 用来创建和测试 templates.yaml 文件
  Custom Field Explorer ：使用测试自定义字段
在 Managed Templates 页面中，选择以下选项之一：
- Load Template Directory: 用来加载现有的 templates.yaml 文件
  - 在本地文件管理器中，导航到存储 templates.yaml 文件的文件夹，然后点 Select。
- 创建新模板 ：使用创建 templates.yaml 文件
  1. 在本地文件管理器中，导航到您希望 Template Editor 创建 templates.yaml 文件的文件夹，然后点 Select。
  2. 在 Template Editor 页面中，选择 templates.yaml 文件。
  3. （可选）您可以预览和测试模板规格。
    在 一些步骤选项卡中的 Fill 中，在必填字段中输入文本，然后单击 Next。
    在 Repository Location 选项卡中，在必填字段中输入文本，然后单击 Review。
    修改模板参数的 YAML 定义。有关这些参数的详情请参考第 4.2 节 “将软件模板创建为 YAML 文件”。
    查看准确性的信息，然后点 Create。

验证

单击导航面板中的 Catalog 选项卡。
在 Kind 下拉菜单中，选择 Template。
确认您的 Software Template 显示在现有模板列表中。

后续步骤

在您的 RHDH 实例中导入您的软件模板。

4.2. 将软件模板创建为 YAML 文件
复制链接

您可以通过将 Template 对象定义为 YAML 文件来创建软件 模板。

Template 对象描述了模板及其元数据。它还包含所需的输入变量，以及构建服务所执行的操作列表。

模板 对象示例

apiVersion: scaffolder.backstage.io/v1beta3
kind: Template
metadata:
  name: template-name


  title: Example template


  description: An example template for v1beta3 scaffolder.


spec:
  owner: backstage/techdocs-core


  type: service


  parameters:


    - title: Fill in some steps
      required:
        - name
      properties:
        name:
          title: Name
          type: string
          description: Unique name of the component
        owner:
          title: Owner
          type: string
          description: Owner of the component
    - title: Choose a location
      required:
        - repoUrl
      properties:
        repoUrl:
          title: Repository Location
          type: string
  steps:


    - id: fetch-base
      name: Fetch Base
      action: fetch:template
      # ...
  output:


    links:
      - title: Repository


        url: ${{ steps['publish'].output.remoteUrl }}
      - title: Open in catalog


        icon: catalog
        entityRef: ${{ steps['register'].output.entityRef }}
# ...

1

为软件模板指定一个名称。

2

为软件模板指定标题。这是 Create… 视图中的 Software Template 标题可见的标题。

3

指定软件模板的描述。这是在 Create… 视图中的 Software Template 标题可见的描述。

4

指定软件模板的所有权。owner 字段提供有关谁负责维护或监督系统或机构中的软件模板的信息。在提供的示例中，owner 字段设为 backstage/wagon-core。这意味着此软件模板属于 backstage 命名空间中的 HEKETI -core 项目。

5

指定组件类型。此必填字段接受任何字符串值，但您的组织应针对这些必填字段建立正确的税务。Red Hat Developer Hub 实例可能会读取此字段，并的行为因其值而异。例如，Web 站点类型组件可能会在特定于网站的 Red Hat Developer Hub 界面中显示工具。

以下值对于此字段是通用的：

service: 后端服务，通常公开 API。
网站: 网站。
library: 软件库，如 npm 模块或 Java 库。

6

当用户使用 Red Hat Developer Hub 控制台中的 Software Template 创建组件时，使用 parameters 部分为用户输入指定参数。每个 parameters 子部分由标题和属性定义，创建一个新的表单页面，其中包含该定义。

7

使用 steps 部分指定后端中执行的步骤。这些步骤必须使用唯一步骤 ID、名称和一个操作来定义。您可以通过访问 URL https://<rhdh_url>/create/actions 来查看 Red Hat Developer Hub 实例中可用的操作。

8

使用 output 部分指定使用软件模板时创建的输出数据的结构。输出 部分（特别是 links 子部分）提供了重要的引用和 URL，供用户访问并从软件模板创建的组件进行交互。

9

提供与生成的组件关联的存储库的引用或 URL。

10

提供引用或 URL，允许用户在列出各种组件的目录或目录中打开生成的组件。

4.3. 将现有软件模板导入到 Red Hat Developer Hub
复制链接

您可以使用 Catalog Processor 将现有软件模板添加到 Red Hat Developer Hub 实例中。

先决条件

您已创建了一个目录或仓库，它至少包含一个 Software Template YAML 文件。
如果要使用存储在 GitHub 或 GitLab 等存储库中的软件模板，您必须为您的供应商配置 Red Hat Developer Hub 集成。

流程

在 app-config.yaml 配置文件中，修改 catalog.rules 部分使其包含模板的规则，并将 catalog.locations 部分配置为指向要添加的软件模板，如下例所示：
```
# ...
catalog:
  rules:
    - allow: [Template] 
```
1
```
  locations:
    - type: url 
```
2
```
      target: https://<repository_url>/example-template.yaml 
```
3
```
# ...
```
1
要允许新软件模板添加到目录中，您必须添加一个 Template 规则。
2
如果您要从存储库（如 GitHub 或 GitLab）导入模板，请使用 url 类型。
3
指定软件模板的 URL。

验证

单击导航面板中的 Catalog 选项卡。
在 Kind 下拉菜单中，选择 Template。
确认您的 Software Template 显示在现有软件模板列表中。

第 5 章在 Red Hat Developer Hub 中自定义学习路径
复制链接

在 Red Hat Developer Hub 中，您可以通过将数据作为代理传递给 app-config.yaml 文件来配置学习路径。基本 URL 必须包含 /developer-hub/learning-paths 代理。

注意

由于对 learning-path 和 主页快速访问代理使用重叠的 pathRewrites，因此您必须在创建主页 配置(^api/proxy/developer-hub)之前创建 learning-paths 配置(^api/proxy/developer-hub)。

有关在 Red Hat Developer Hub 中自定义 Home 页面的更多信息，请参阅 Red Hat Developer Hub 中的自定义 Home 页面。

您可以将数据提供给以下源的学习路径：

托管在 GitHub 或 GitLab 上的 JSON 文件。
使用 API 以 JSON 格式提供学习路径数据的专用服务。

5.1. 使用托管的 JSON 文件向学习路径提供数据
复制链接

先决条件

已使用 Operator 或 Helm Chart 安装 Red Hat Developer Hub。如需更多信息，请参阅在 OpenShift Container Platform 上安装 Red Hat Developer Hub。

流程

要从 JSON 文件中访问数据，请完成以下步骤：

将以下代码添加到 app-config.yaml 文件中：

proxy:
  endpoints:
    '/developer-hub':
      target: https://raw.githubusercontent.com/
      pathRewrite:
        '^/api/proxy/developer-hub/learning-paths': '/redhat-developer/rhdh/main/packages/app/public/learning-paths/data.json'
        '^/api/proxy/developer-hub/tech-radar': '/redhat-developer/rhdh/main/packages/app/public/tech-radar/data-default.json'
        '^/api/proxy/developer-hub': '/redhat-developer/rhdh/main/packages/app/public/homepage/data.json'
      changeOrigin: true
      secure: true

5.2. 使用专用服务向学习路径提供数据
复制链接

在使用专用服务时，您可以执行以下操作：

使用相同的服务向所有可配置的 Developer Hub 页面提供数据，或者为每个页面使用不同的服务。
使用 red-hat-developer-hub-customization-provider 作为示例服务，它为 Home 和 Tech Radar 页面提供数据。red-hat-developer-hub-customization-provider 服务提供与默认 Developer Hub 数据相同的数据。您可以从 GitHub 分叉 red-hat-developer-hub-customization-provider 服务存储库，并根据需要使用自己的数据进行修改。
在同一集群中部署 red-hat-developer-hub-customization-provider 服务和 Developer Hub Helm Chart。

先决条件

已使用 Helm Chart 安装 Red Hat Developer Hub。如需更多信息，请参阅在 OpenShift Container Platform 上安装 Red Hat Developer Hub。

流程

要使用专用服务来提供学习路径数据，请完成以下步骤：

将以下代码添加到 app-config.yaml 文件中：

   proxy:
      endpoints:
        # Other Proxies
        '/developer-hub/learning-paths':
          target: ${LEARNING_PATH_DATA_URL}
          changeOrigin: true
          # Change to "false" in case of using self hosted cluster with a self-signed certificate
          secure: true

其中 LEARNING_PATH_DATA_URL 定义为 http://<SERVICE_NAME>/learning-paths，例如 http://rhdh-customization-provider/learning-paths。

注意

您可以通过将 LEARNING_PATH_DATA_URL 添加到 rhdh-secrets，或将其替换为自定义 ConfigMap 中的值来定义 LEARNING_PATH_DATA_URL。

删除 Developer Hub pod，以确保正确载入新配置。

第 6 章在 Red Hat Developer Hub 中配置全局标头
复制链接

作为管理员，您可以配置 Red Hat Developer Hub 全局标头，以便在 Developer Hub 实例中创建一致且灵活的导航栏。默认情况下，Developer Hub 全局标头包括以下组件：

Create 按钮可让您快速访问各种模板，使用户能够高效地设置 Developer Hub 中的服务、后端和前端插件
可以链接内部或外部支持页面的支持按钮
通知按钮显示来自插件和外部服务的警报和更新
搜索输入字段允许用户在 Developer Hub 中查找服务、组件、文档和其他资源
插件扩展功能 在 Developer Hub 中提供预装并启用可用插件目录
用户配置集 下拉菜单提供对配置集设置、外观自定义、Developer Hub 元数据和 logout 按钮的访问

6.1. 自定义 Red Hat Developer Hub 全局标头
复制链接

您可以使用 red-hat-developer-hub.backstage-plugin-global-header 动态插件来扩展带有额外按钮的全局标头，并自定义图标和功能的顺序和位置。另外，您可以使用这个新标头功能提供的挂载点创建并集成自定义动态标头插件，允许您进一步定制以满足您的需求。有关启用动态插件的更多信息，请参阅 Red Hat Developer Hub 中安装和查看插件。

默认全局标头配置

  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
    disabled: false
    pluginConfig:
      app:
        sidebar:
          search: false


          settings: false


      dynamicPlugins:
        frontend:
          default.main-menu-items:


            menuItems:
              default.create:
                title: ''
          red-hat-developer-hub.backstage-plugin-global-header: # the default enabled dynamic header plugin
            mountPoints:
              - mountPoint: application/header
                importName: GlobalHeader
                config:
                  position: above-main-content


              - mountPoint: global.header/component
                importName: SearchComponent
                config:
                  priority: 100
              - mountPoint: global.header/component
                importName: Spacer
                config:
                  priority: 99
                  props:
                    growFactor: 0
              - mountPoint: global.header/component
                importName: HeaderIconButton
                config:
                  priority: 90
                  props:
                    title: Create...
                    icon: add
                    to: create
              - mountPoint: global.header/component
                importName: SupportButton
                config:
                  priority: 80
              - mountPoint: global.header/component
                importName: NotificationButton
                config:
                  priority: 70
              - mountPoint: global.header/component
                importName: Divider
                config:
                  priority: 50
              - mountPoint: global.header/component
                importName: ProfileDropdown
                config:
                  priority: 10
              - mountPoint: global.header/profile
                importName: MenuItemLink
                config:
                  priority: 100
                  props:
                    title: Settings
                    link: /settings
                    icon: manageAccounts
              - mountPoint: global.header/profile
                importName: LogoutButton
                config:
                  priority: 10

1: 搜索：在侧边栏菜单中隐藏搜索模态。将其更改为 true 以在侧边栏中显示 Search modal。
2: 设置：在侧边栏菜单中隐藏 Settings 按钮。将它更改为 true 以显示边栏中的 Settings 按钮。
3: default.main-menu-items ：从侧边栏菜单中隐藏 Create 按钮。删除此字段，以显示边栏中的 Create 按钮。
4: position ：定义标头的位置。选项： above-main-content 或 above-sidebar.

要扩展默认全局标头的功能，请在全局标头条目中包含以下属性：

mountPoint

指定标头的位置。使用 application/header 将它指定为全局标头。您可以通过在 mountPoints 字段中添加条目，在不同的位置配置多个全局标头。

importName

指定全局标头插件导出的组件。

red-hat-developer-hub.backstage-plugin-global-header 软件包（默认为启用）提供以下标头组件作为可能的挂载点值：

SearchComponent ：添加一个搜索栏（默认为启用）。
Spacer ：在标头中添加空间以定位按钮（在结尾处）。当您禁用 SearchComponent 时很有用。
HeaderIconButton ：添加一个图标按钮。默认情况下，Create 图标按钮保持启用。
SupportButton ：添加一个支持图标按钮，允许用户配置到内部或外部页面的链接。默认启用，但需要额外的配置来显示。
NotificationButton ：添加一个通知图标按钮，以实时显示未读取通知并导航到通知页面。默认启用（需要通知插件）。
划分器 ：添加垂直划分器。默认情况下，配置集下拉菜单和其他标头组件之间会显示一个划分器。
ProfileDropdown ：添加一个配置文件下拉菜单，其中显示已登录的用户名。默认情况下，它包含两个菜单项。
MenuItemLink ：从下拉菜单中选择链接项。默认情况下，配置集下拉菜单包含 Settings 页面的链接。
LogoutButton ：在配置文件下拉列表中添加注销按钮（默认为启用）。
CreateDropdown ：添加一个创建下拉菜单按钮（默认为禁用）。菜单项是可配置的。
SoftwareTemplatesSection ：向创建下拉菜单添加软件模板链接列表（默认为禁用）。您必须启用 CreateDropdown。
RegisterAComponentSection ：在 Create 下拉菜单中添加到 Register a Component 页面的链接（默认为禁用）。您必须启用 CreateDropdown。

config.position

指定标头的位置。支持的值有 above-main-content 和 above-sidebar。

先决条件

您必须在 app-config.yaml 文件中配置支持 URL，以便在标头中显示 Support 按钮。
您必须安装通知插件，以便在标头中显示 Notifications 按钮。

流程

复制默认配置并修改字段值以满足您的需要。您可以调整每个标头组件的 优先级值 来控制其位置。另外，您可以通过在配置中添加或删除组件来启用或禁用组件。要确保剩余的标头按钮与配置集下拉菜单按钮前标头的末尾一致，请在 Spacer 挂载点中将 config.props.growFactor 设置为 1 来启用 Spacer 组件。例如：
```
- mountPoint: global.header/component
  importName: Spacer
  config:
    priority: 100
    props:
      growFactor: 1
```

要使用自定义标头，您必须通过将插件配置添加到 app-config-dynamic.yaml 文件中来将其作为动态插件安装。例如：

- package: <npm_or_oci_package-reference>
  disabled: false
  pluginConfig:
    dynamicPlugins:
      frontend:
        <package_name>:
          mountPoints:
            - mountPoint: application/header
              importName: <application_header_name>
              config:
                position: above-main-content
            - mountPoint: global.header/component
              importName: <header_component_name>
              config:
                priority: 100
            - mountPoint: global.header/component
              importName: <header_component_name>
              config:
                priority: 90

其中：

<npm_or_oci_package-reference>: 指定软件包名称。
<application_header_name>: 指定应用程序标头的名称。例如： MyHeader
<header_component_name>: 指定标头组件的名称。例如： MyHeaderComponent
注意
importName 是一个可选名称，引用 scaffolder 字段扩展 API 返回的值。

可选：要禁用全局标头，请在 dynamic-plugins.yaml 文件中将 disabled 字段的值设置为 true。例如：
```
- package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
  disabled: true
```

6.2. 动态插件集成的挂载点
复制链接

您可以使用动态插件的挂载点自定义 Developer Hub 中的应用程序标头。这些挂载点为配置标头、其组件和下拉菜单的位置提供了灵活性。您可以使用以下改进创建自定义体验：

application/header

控制标头位置。使用 config.position 将放置设置为 above-main-content 或 above-sidebar。

global.header/component

配置标头组件。使用 config.priority 设置组件顺序，并通过 config.props 传递属性（包括 CSS 风格）。

添加 自助服务 按钮示例

- mountPoint: global.header/component
  importName: HeaderIconButton
  config:
    priority: 80
    props:
      title: Self-service
      icon: add
      to: create

添加一个 spacer 元素示例

- mountPoint: global.header/component
  importName: Spacer
  config:
    priority: 99
    props:
      growFactor: 0

添加划分元素示例

mountPoints:
  - mountPoint: global.header/component
    importName: Divider
    config:
      priority: 150

global.header/profile

启用 ProfileDropdown 组件时，配置配置文件下拉列表。

在配置集下拉菜单中添加设置链接示例

- mountPoint: global.header/profile
  importName: MenuItemLink
  config:
    priority: 100
    props:
      title: Settings
      link: /settings
      icon: manageAccounts

global.header/create

启用 CreateDropdown 组件时，配置创建下拉列表。

添加用于注册组件的部分示例

- mountPoint: global.header/create
  importName: RegisterAComponentSection
  config:
    props:
      growFactor: 0

第 7 章在 Red Hat Developer Hub 中配置浮动操作按钮
复制链接

您可以使用 floating 操作按钮插件将任何操作配置为 Developer Hub 实例中的浮动按钮。浮动操作按钮插件默认启用。您还可以将浮动操作按钮配置为主浮动操作按钮中的子菜单选项，方法是将浮动操作按钮分配给 dynamic-plugins.yaml 文件的相同 插槽 字段。

7.2. 浮动操作按钮参数
复制链接

使用下表中的参数来配置浮动操作按钮插件。

Expand

表 7.1. 浮动操作按钮参数
Name	描述	类型	默认值	必填
`slot`	浮动操作按钮的位置。有效值： `PAGE_END`,`BOTTOM_LEFT`	`enum`	`PAGE_END`	否
`label`	浮动操作按钮的名称	`字符串`	Not applicable	是
`icon`	浮动操作按钮的图标。建议您使用 Material Design 库中的填充图标。您还可以使用 svg 图标。例如： < `svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 24" height="24px" viewBox="0 0 24" width="24px" fill://[e8eaed"> <rect fill="none" height="24" width="24"`/> <path d="M11,7L9.6, 8.4l2.6,2.6H2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/> </svg>	`字符串`,`React.ReactElement`,`SVG 镜像图标`,`HTML 镜像图标`	Not applicable	否
`showLabel`	显示图标旁边的标签	`布尔值`	Not applicable	否
`size`	浮动操作按钮的大小	`Small`,`medium`,`large`	`中`	否
`color`	组件的颜色。它支持默认和自定义主题颜色，这些颜色添加了来自 grandmaster Getting started 指南。	`默认`,`error`,`info`,`继承`,`主`,`secondary`,`成功`,`警告`	`default`	否
`onClick`	选择浮动操作按钮时执行操作	`React.MouseEventHandler`	Not applicable	否
`至`	选择浮动操作按钮时打开的链接	`字符串`	Not applicable	否
`toolTip`	将鼠标悬停在浮动操作按钮时显示的文本	`字符串`	Not applicable	否
`priority`	子菜单中显示的浮动操作按钮的顺序。较大的值代表优先级更高。	`number`	Not applicable	否
`visibleOnPaths`	在指定路径中显示浮动操作按钮	`string[]`	在所有路径中显示浮动操作按钮	否
`excludeOnPaths`	在指定路径上隐藏浮动操作按钮	`string[]`	在所有路径中显示浮动操作按钮	否

注意

如果将多个浮动按钮操作分配给同一 插槽 值，则浮动按钮将显示为主浮动操作按钮中的子菜单选项。

第 8 章在 Red Hat Developer Hub 中自定义 Tech Radar 页面
复制链接

在 Red Hat Developer Hub 中，技术 Radar 页面由 tech-radar 动态插件提供，该插件默认为禁用。有关在 Red Hat Developer Hub 中启用动态插件的详情，请参考配置动态插件。

在 Red Hat Developer Hub 中，您可以通过将数据作为代理传递给 app-config.yaml 文件来配置学习路径。基础技术 Radar URL 必须包含 /developer-hub/tech-radar 代理。

注意

由于将重叠的 pathRewrite 用于 tech-radar 和 homepage 快速访问代理，因此您必须在创建 主页 配置(^api/proxy/developer-hub/tech-radar)前创建 tech-radar 配置(^/api/proxy/developer-hub)。

有关在 Red Hat Developer Hub 中自定义 Home 页面的更多信息，请参阅 Red Hat Developer Hub 中的自定义 Home 页面。

您可以从以下源向 Tech Radar 页面提供数据：

托管在 GitHub 或 GitLab 上的 JSON 文件。
使用 API 以 JSON 格式提供 Tech Radar 数据的专用服务。

8.1. 使用 JSON 文件自定义 Tech Radar 页面
复制链接

为了便于使用和简单性，您可以使用托管的 JSON 文件配置 Tech Radar 页面。

先决条件

您已在 app-config.yaml 文件的 integrations 部分中指定了 Tech Radar 插件的数据源。例如，要将 GitHub 配置为集成，请参阅使用 GitHub 身份验证。
您已启用了 ./dynamic-plugins/dist/backstage-community-plugin-tech-radar 和 /dynamic-plugins/dist/backstage-community-plugin-tech-radar-backend-dynamic 插件。

流程

将包含您的 Tech Radar 数据的 JSON 文件发布到 web 服务器，如 GitHub 或 Gitlab。您可以在 https://raw.githubusercontent.com/redhat-developer/rhdh/release-1.5/packages/app/public/tech-radar/data-default.json 找到示例。
通过将以下内容添加到 app-config.yaml 文件中，配置 Developer Hub 以访问托管 JSON 文件中的 Tech Radar 数据：
```
techRadar:
  url: <tech_radar_data_url>
```
<tech_radar_data_url>
输入 Tech Radar 数据托管 JSON URL。

8.2. 使用自定义服务自定义 Tech Radar 页面
复制链接

对于高级场景，您可以托管 Red Hat Developer Hub 自定义服务，以为所有可配置的 Developer Hub 页面（如 Tech Radar 页面）提供数据。您甚至可以为每个页面使用不同的服务。

先决条件

您已在 app-config.yaml 文件的 integrations 部分中指定了 Tech Radar 插件的数据源。例如，要将 GitHub 配置为集成，请参阅使用 GitHub 身份验证。
您已启用了 ./dynamic-plugins/dist/backstage-community-plugin-tech-radar 和 /dynamic-plugins/dist/backstage-community-plugin-tech-radar-backend-dynamic 插件。

流程

在与 Developer Hub 实例相同的 OpenShift Container Platform 集群上部署 Developer Hub 自定义服务。您可以在 red-hat-developer-hub-customization-provider 中找到一个示例，它提供与默认 Developer Hub 数据相同的数据。自定义服务提供了一个 Tech Radar 数据 URL，例如： http:// <rhdh-customization-provider>/tech-radar。
通过在 app-config.yaml 文件中添加以下代码，将专用服务作为允许的主机添加：
```
backend:
   reading:
        allow:
          - host: '<rhdh_customization_provider_base_url>'
```
<rhdh_customization_provider_base_url>
输入您的 Tech Radar 数据 URL 的基本 URL，例如： < rhdh-customization-provider >。
将以下内容添加到 app-config.yaml 文件中：
```
techRadar:
    url: <tech_radar_data_url>
```
<tech_radar_data_url>
输入您的 Tech Radar 数据 URL，例如： http:// <rhdh-customization-provider>/tech-radar。

第 9 章自定义 Red Hat Developer Hub 外观
复制链接

Red Hat Developer Hub 有以下默认主题配置：

Red Hat Developer Hub 主题: 默认主题配置使开发人员门户像一个标准的 Red Hat Developer Hub 实例。如需更多信息，请参阅第 9.9 节 “默认 Red Hat Developer Hub 主题”。
Backstage 主题: 使开发人员门户成为标准 Backstage 实例的默认主题配置。如需更多信息，请参阅第 9.10 节 “默认阶段主题”。

您可以通过修改 app-config-rhdh.yaml 文件来更改或禁用特定参数。在 app-config-rhdh.yaml 文件中，您可以自定义常见的主题组件，包括：

公司名称和徽标
字体颜色、大小和样式，以段落、标题、标头和按钮形式
标头颜色、科学和形成
按钮颜色
导航指示器颜色

您还可以从 Developer Hub GUI 自定义一些组件，如主题模式(Light Theme,Dark Theme, 或 Auto)。

9.1. 为 Developer Hub 实例自定义主题模式
复制链接

注意

在 Developer Hub 中，使用主题配置来更改不同 UI 组件的外观和感觉。因此，您可能会注意到不同 UI 组件的更改，如按钮、标签页、侧边栏、卡和表，以及背景颜色和 RHDH 页面上所使用的字体。

您可以为 Developer Hub 实例选择以下主题模式之一：

辅助主题
dark theme
auto

默认主题模式是 Auto，它会根据您的系统首选项自动设置 light 或 dark 主题。

先决条件

已登陆到 Developer Hub web 控制台。

流程

在 Developer Hub web 控制台中点 Settings。
在 Appearance 面板中，单击 LIGHT THEME、DARK THEME 或 AUTO 以更改主题模式。

9.2. 自定义 Developer Hub 实例的品牌徽标
复制链接

您可以通过在 app-config.yaml 文件中配置 branding 部分来自定义 Developer Hub 实例 的品牌 徽标，如下例所示：

app:
  branding:
    fullLogo: ${BASE64_EMBEDDED_FULL_LOGO}


    iconLogo: ${BASE64_EMBEDDED_ICON_LOGO}

其中：

1

fullLogo 是展开的（固定）侧栏上的徽标，需要采用 base64 编码的图像。

2

iconLogo 是折叠（未固定）边栏上的徽标，需要一个 base64 编码的图像。

您可以格式化 BASE64_EMBEDDED_FULL_LOGO 环境变量，如下所示：

BASE64_EMBEDDED_FULL_LOGO: "data:_<media_type>_;base64,<base64_data>"

以下示例演示了如何使用 data :_<media_type>_;base64, <base64_data> 格式自定义 BASE64_EMBEDDED_ FULL_LOGO ：

SVGLOGOBASE64=$(base64 -i logo.svg)
BASE64_EMBEDDED_FULL_LOGO="data:image/svg+xml;base64,$SVGLOGOBASE64"

将 image/svg+xml 替换为您的镜像的正确介质类型（如 image/png 和 image/jpeg），并相应地调整文件扩展名。因此，您可以在不引用外部文件的情况下直接嵌入徽标。

您还可以通过为品牌部分中的 fullLogoWidth 字段设置值来自定义 品牌 徽标的宽度，如下例所示：

app:
  branding:
    fullLogoWidth: 110px


# ...

1: 徽标宽度的默认值为 110px。支持以下单位： 整数,px,em,rem, , percentage.

9.3. 为 Developer Hub 实例自定义侧边栏菜单项
复制链接

Red Hat Developer Hub 中的侧边栏菜单由您可以配置的两个主要部分组成：

动态插件菜单项

您的首选项和您的活跃插件会动态定义侧边栏菜单的一部分。

主菜单项

侧边栏的核心导航结构是 static。

动态插件菜单项 ：这些项目显示在主菜单下，并可以根据安装的插件进行自定义。主菜单项部分是动态的，可以根据您的首选项和已安装的插件进行更改。

9.3.1. 为 Developer Hub 实例自定义侧边栏菜单项
复制链接

使用以下步骤自定义主菜单项：

流程

打开 app-config.yaml 文件。
1. 要自定义主菜单项的顺序和父子关系，请使用 dynamicPlugins.frontend.default.main-menu-items.menuItems 字段。
2. 对于动态插件菜单项，请使用 dynamicPlugins.frontend.<package_name>.menuItems 字段。

app-config.yaml 文件示例

dynamicPlugins:
  frontend:
    default.main-menu-items:
        menuItems:
          default.home:
            title: Home
            icon: home
            priority: 100
          default.my-group:
            title: My Group
            icon: group
            priority: 90
          default.catalog:
            title: Catalog
            icon: category
            to: catalog
            priority: 80
          default.apis:
            title: APIs
            icon: extension
            to: api-docs
            priority: 70
          default.learning-path:
            title: Learning Paths
            icon: school,
            to: learning-paths
            priority: 60
          default.create:
            title: Create
            icon: add
            to: create
            priority: 50

9.3.2. 为 Developer Hub 实例配置动态插件菜单项
复制链接

使用以下步骤配置动态插件菜单项：

流程

在 app-config.yaml 文件中，更新 < plugin_name> 插件的 menuItems 部分。例如：
```
dynamicPlugins:
  frontend:
    _<plugin_name>_: 
```
1
```
      menuItems:
        <menu_item_name>: 
```
2
```
          icon: # home | group | category | extension | school | _<my_icon>_ 
```
3
```
          title: _<plugin_page_title>_ 
```
4
```
          priority: 10 
```
5
```
          parent: favorites 
```
6
1
<plugin_name > : 输入插件名称。这个名称与 package.json 文件中的 scalprum.name 键相同。
2
<menu_item_name > : 在主侧边栏中为独立菜单项或父菜单项输入唯一名称。如果此字段指定了插件菜单项，则菜单项的名称必须与 dynamicRoutes 中对应路径中的名称匹配。例如，如果 dynamicRoutes 定义 path: /my-plugin，则 menu_item_name 必须定义为 my-plugin。
3
图标 ：（可选）输入图标名称。您可以使用以下图标中的任何一个：
默认图标，如 家、组、flavor、extension 和 ations。要使用默认图标，请将图标设置为(" ")空字符串。
一个自定义图标，其中 & lt;my_icon > 指定自定义图标的名称
一个 SVG 图标，例如： icon: <svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill://[ffffff">…</svg>
HTML 镜像，如： icon: https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png
4
标题 ：（可选）输入菜单项标题。当标题已在 menuItem.text 下的 dynamicRoutes 配置中被指定时，省略它。要隐藏边栏中的标题，请将标题设置为(" ")空字符串。
5
priority: （可选）设置菜单项在侧边栏中显示的顺序。默认优先级是 0，它将项目放在列表的底部。较高的优先级值会将项目更高的位置放在边栏中。您可以为每个部分定义此字段。
6
parent: （可选）输入当前项目嵌套的父菜单项。如果使用此字段，则必须在任何已启用插件的 menuItem 配置中定义 父菜单项。您可以为每个部分定义此字段。
menuItems 配置示例
```
dynamicPlugins:
  frontend:
    _<package_name>_:
      dynamicRoutes:
        - path: /my-plugin
          module: CustomModule
          importName: FooPluginPage
          menuItem:
            icon: fooIcon
            text: Foo Plugin Page
      menuItems:
        my-plugin: 
```
1
```
          priority: 10 
```
2
```
          parent: favorites 
```
3
```
        favorites: 
```
4
```
          icon: favorite 
```
5
```
          title: Favorites 
```
6
```
          priority: 100 
```
7
1
my-plugin ：匹配 dynamicRoutes 中的 path 字段的值。
2
优先级 ：控制父菜单项下的插件顺序。
3
parent: 将此插件嵌套在喜欢 的父 菜单项下。
4
Favorites: 配置父菜单项。
5
图标 ：显示 RHDH 系统图标中的 喜欢 图标。
6
标题 ：显示父菜单项的标题名称。
7
priority: 侧边栏中的 favourites 菜单项的顺序。

9.3.3. 为 Developer Hub 实例修改或添加自定义菜单项
复制链接

使用以下命令修改主菜单项或添加自定义菜单项：

流程

在 app-config.yaml 文件中，在 default.main-menu-items > menuItems 部分添加一个部分。使用 default. 前缀将键标识为主菜单项。
```
dynamicPlugins:
  frontend:
    default.main-menu-items:
      menuItems:
        default._<menu_group_parent_item_name>_: 
```
1
```
          icon: # home | group | category | extension | school | _<my_icon>_ 
```
2
```
          title: _<menu_group_parent_title>_ 
```
3
```
          priority: 10 
```
4
```
        default._<menu_item_name>_: 
```
5
```
          parent: _<menu_group_parent_item_name>_ 
```
6
```
          icon:  # home | group | category | extension | school | _<my_icon>_ 
```
7
```
          title: _<my_menu_title>_ 
```
8
```
          to: _<path_to_the_menu_target_page>_ 
```
9
```
          priority: 100 
```
10
1
default.<menu_group_parent_item_name > : （可选）输入菜单组父项来配置静态主菜单项。如果没有 默认值。<menu_item_name & gt; 设置了父 值，则不需要此字段。
2
图标 ：输入菜单图标。父菜单项是必需的。
3
title: 输入菜单组标题。父菜单项是必需的。
4
priority: （可选）在菜单级别输入此菜单项的顺序。
5
default. <menu_item_name > : 输入您要覆盖默认值的菜单项名称。添加 default. 前缀，以识别主菜单项。
6
parent: （可选）输入此项目的父菜单项。如果 <menu_item_name> 指定为任何菜单项的子级，则需要此项。
7
图标 ：（可选）输入菜单图标。要使用默认图标，请将图标设置为(" ")空字符串。
8
title: （可选）输入菜单组标题。只需要添加新的自定义主菜单项。要隐藏边栏中的默认主菜单项标题，请将标题设置为(" ")空字符串。
9
to: （可选）输入菜单项导航到的路径。如果没有设置，则默认为主页。
10
priority: （可选）在菜单级别输入此菜单项的顺序。
mainItems 配置示例
```
default.main-menu-items:
      menuItems:
        default.catalog:
          icon: category 
```
1
```
          title: My Catalog
          priority: 5
        default.learning-path:
          title: '' 
```
2
```
        default.parentlist: 
```
3
```
          title: Overview
          icon: bookmarks
        default.home:
          parent: default.parentlist 
```
4
```
        default.references:
          title: References 
```
5
```
          icon: school 
```
6
```
          to: /references 
```
7
1
icon: 指定是否要更改目录的图标默认菜单项。
2
title: 指定空字符串 " " 以从默认边栏隐藏学习路径。
3
default.parentlist ：显示父菜单项。
4
parent: 在 default.parentlist 父菜单项下，嵌套主页菜单。
5
title: 指定 default.references的名称
6
图标 ：显示 学区 图标。
7
要: 将 default.references 重定向到 /references 页面。

9.4. 配置实体标签页标题
复制链接

Red Hat Developer Hub 为目录实体视图提供了默认的 opinionated 选项卡。为了与您的组织需求保持一致，您可以重命名、重新排序、删除和添加选项卡标题。

流程

对于修改的每个标签页，在 app-config.yaml 文件的 entityTabs 部分中输入您需要的值：
```
upstream:
  backstage:
    appConfig:
      dynamicPlugins:
        frontend:
         <plugin_name>:
            entityTabs:
              - mountPoint: <mount_point>
                path: <path>
                title: <title>
                priority: <priority>
```
<plugin_name>
输入插件名称，如 backstage-community.plugin-topology。
mountPoint
输入选项卡挂载点，如 entity.page.topology。
path
输入选项卡路径，如 /topology。
title
输入选项卡标题，如 Topology。
priority
可选。
要重新排序标签页，请输入标签优先级，如 42。优先级会首先显示。
要删除选项卡，请输入负值，如 -1。

9.5. 配置实体详情选项卡布局
复制链接

每个 Red Hat Developer Hub 实体详情标签都有一个默认的建议布局。为了与您的机构需要保持一致，您可以在贡献标签内容的插件时更改实体详情标签页内容。

先决条件

贡献标签内容的插件允许配置，如 Developer Hub 插件在 config 部分中定义默认配置。

流程

在 app-config.yaml 文件中复制插件默认配置，并更改 布局属性。
```
global:
  dynamic:
    plugins:
      - package: <package_location>
        disabled: false
        pluginConfig:
          dynamicPlugins:
            frontend:
              <plugin_name>:
                mountPoints:
                  - mountPoint: <mount_point>
                    importName: <import_name>
                    config:
                      layout:
                        gridColumn:
                          lg: span 6
                          xs: span 12
```
package
输入您的软件包位置，如 ./dynamic-plugins/dist/backstage-community-plugin-tekton。
<plugin_name>
输入插件名称，例如： backstage-community.plugin-tekton。
mountPoint
复制插件默认配置中定义的挂载点，例如： entity.page.ci/cards。
importName
复制插件默认配置中定义的导入名称，例如： TektonCI。
布局
输入您的布局配置。选项卡内容显示在响应网格中，它使用 12 列网格，并支持不同的断点(xs、sm、md、lg、xl)，它被指定为 CSS 属性，如 gridColumn。示例使用 12 个列中的 6 个在大型(lg)屏幕(span 6 列)上显示两个 Tekton CI 卡，并在自身(xs 和以上 跨 12 列)中显示它们。

9.6. 为您的 Developer Hub 实例自定义主题模式颜色面板
复制链接

您可以通过配置 app-config.yaml 文件的 branding.palette 部分中的 light.palette 和 dark.palette 参数来自定义 Developer Hub 实例中 light 和 dark . palette 的颜色面板，如下例所示：

app:
  branding:
    theme:
      light:
        palette:
          primary:
            main: <light_primary_color>


          navigation:
            indicator: <light_indicator_color>


        pageTheme:
          default:
            backgroundColor: [<light_background_color_1>, <light_background_color_2>]


      dark:
        palette:
          primary:
            main: <dark_primary_color>


          navigation:
            indicator: <dark_indicator_color>


        pageTheme:
          default:
            backgroundColor: [<dark_background_color_1>, <dark_background_color_2>]


# ...

1: light color palette 的主要颜色，例如：": ffffff 或 white
2: light color palette 的导航指示符颜色，它是一个垂直栏，它表示导航面板中的所选标签页，如 #FF0000 或 red
3: light color palette 的默认页面主题的背景颜色，例如：": ffffff 或 white
4: dark color palette 的主要颜色，例如： #000000 或 black
5: dark color palette 的导航指示符颜色，它是一个垂直栏，代表导航面板中的所选标签页，例如 #FF0000 或 red
6: dark color palette 的默认页面主题的背景颜色，例如 #000000 或 black

其他资源

第 9.1 节 “为 Developer Hub 实例自定义主题模式”

9.7. 为 Developer Hub 实例自定义页面主题标头
复制链接

您可以通过修改 app-config.yaml 文件的 branding.theme 部分来自定义 Developer Hub 实例中 light 和 dark 的标头颜色。您还可以为其他 Developer Hub 页面自定义页面标头，如 Home、Catalog 和 API 页面。

app:
  branding:
    theme:
      light:


        palette: {}
        pageTheme:
          default:


            backgroundColor: "<default_light_background_color>"


            fontColor: "<default_light_font_color>"


            shape: none


          apis:


            backgroundColor: "<apis_light_background_color>"
            fontColor: "<apis_light_font_color>"
            shape: none
      dark:
        palette: {}
        pageTheme:
          default:
            backgroundColor: "<default_dark_background_color>"
            fontColor: "<default_dark_font_color>"
            shape: none
# ...

1: me 模式，如 light 或 dark
2: 主题配置的默认页面的 yaml 标头
3: 页面标头背景的颜色，如 #ffffff 或 white
4: 页面标头中文本颜色，如 #000000 或 black
5: 页面标头中的模式，如 wave、round、或 none
6: 特定页面主题配置的 yaml 标头，如 apis、home

9.8. 为 Developer Hub 实例自定义字体
复制链接

您可以配置 app-config.yaml 文件的 typography 部分，以更改页面文本的默认字体系列和大小，以及每个标题级别的字体系列和大小，如下例所示：

app:
  branding:
    theme:
      light:
        typography:
          fontFamily: "Times New Roman"
          htmlFontSize: 11 # smaller is bigger
          h1:
            fontFamily: "Times New Roman"
            fontSize: 40
          h2:
            fontFamily: "Times New Roman"
            fontSize: 30
          h3:
            fontFamily: "Times New Roman"
            fontSize: 30
          h4:
            fontFamily: "Times New Roman"
            fontSize: 30
          h5:
            fontFamily: "Times New Roman"
            fontSize: 30
          h6:
            fontFamily: "Times New Roman"
            fontSize: 30
      dark:
        typography:
          fontFamily: "Times New Roman"
          htmlFontSize: 11 # smaller is bigger
          h1:
            fontFamily: "Times New Roman"
            fontSize: 40
          h2:
            fontFamily: "Times New Roman"
            fontSize: 30
          h3:
            fontFamily: "Times New Roman"
            fontSize: 30
          h4:
            fontFamily: "Times New Roman"
            fontSize: 30
          h5:
            fontFamily: "Times New Roman"
            fontSize: 30
          h6:
            fontFamily: "Times New Roman"
            fontSize: 30
# ...

9.9. 默认 Red Hat Developer Hub 主题
复制链接

您可以使用默认的 Red Hat Developer Hub 主题配置使 Developer Hub 实例类似于标准的 Red Hat Developer Hub 实例。您还可以修改 app-config.yaml 文件以自定义或禁用特定参数。

9.9.1. 默认 Red Hat Developer Hub 主题颜色面板
复制链接

app-config.yaml 文件对默认的 Red Hat Developer Hub 颜色面板使用以下配置：

app:
  branding:
    theme:
      light:
        variant: "rhdh"
        mode: "light"
        palette:
          background:
            default: "#F8F8F8"
            paper: "#FFFFFF"
          banner:
            closeButtonColor: "#FFFFFF"
            error: "#E22134"
            info: "#2E77D0"
            link: "#000000"
            text: "#FFFFFF"
            warning: "#FF9800"
          border: "#E6E6E6"
          bursts:
            backgroundColor:
              default: "#7C3699"
            fontColor: "#FEFEFE"
            gradient:
              linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
            slackChannelText: "#ddd"
          errorBackground: "#FFEBEE"
          errorText: "#CA001B"
          gold: "#FFD600"
          highlight: "#FFFBCC"
          infoBackground: "#ebf5ff"
          infoText: "#004e8a"
          link: "#0A6EBE"
          linkHover: "#2196F3"
          mode: "light"
          navigation:
            background: "#222427"
            indicator: "#0066CC"
            color: "#ffffff"
            selectedColor: "#ffffff"
            navItem:
              hoverBackground: "#3c3f42"
            submenu:
              background: "#222427"
          pinSidebarButton:
            background: "#BDBDBD"
            icon: "#181818"
          primary:
            main: "#0066CC"
          secondary:
            main: "#8476D1"
          status:
            aborted: "#757575"
            error: "#E22134"
            ok: "#1DB954"
            pending: "#FFED51"
            running: "#1F5493"
            warning: "#FF9800"
          tabbar:
            indicator: "#9BF0E1"
          textContrast: "#000000"
          textSubtle: "#6E6E6E"
          textVerySubtle: "#DDD"
          warningBackground: "#F59B23"
          warningText: "#000000"
          text:
            primary: "#151515"
            secondary: "#757575"
          rhdh:
            general:
              disabledBackground: "#D2D2D2"
              disabled: "#6A6E73"
              searchBarBorderColor: "#E4E4E4"
              formControlBackgroundColor: "#FFF"
              mainSectionBackgroundColor: "#FFF"
              headerBottomBorderColor: "#C7C7C7"
              cardBackgroundColor: "#FFF"
              sidebarBackgroundColor: "#212427"
              cardBorderColor: "#C7C7C7"
              tableTitleColor: "#181818"
              tableSubtitleColor: "#616161"
              tableColumnTitleColor: "#151515"
              tableRowHover: "#F5F5F5"
              tableBorderColor: "#E0E0E0"
              tableBackgroundColor: "#FFF"
              tabsBottomBorderColor: "#D2D2D2"
              contrastText: "#FFF"
            primary:
              main: "#0066CC"
              focusVisibleBorder: "#0066CC"
            secondary:
              main: "#8476D1"
              focusVisibleBorder: "#8476D1"
            cards:
              headerTextColor: "#151515"
              headerBackgroundColor: "#FFF"
              headerBackgroundImage: "none"

      dark:
        variant: "rhdh"
        mode: "dark"
        palette:
          background:
            default: "#333333"
            paper: "#424242"
          banner:
            closeButtonColor: "#FFFFFF"
            error: "#E22134"
            info: "#2E77D0"
            link: "#000000"
            text: "#FFFFFF"
            warning: "#FF9800"
          border: "#E6E6E6"
          bursts:
            backgroundColor:
              default: "#7C3699"
            fontColor: "#FEFEFE"
            gradient:
              linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
            slackChannelText: "#ddd"
          errorBackground: "#FFEBEE"
          errorText: "#CA001B"
          gold: "#FFD600"
          highlight: "#FFFBCC"
          infoBackground: "#ebf5ff"
          infoText: "#004e8a"
          link: "#9CC9FF"
          linkHover: "#82BAFD"
          mode: "dark"
          navigation:
            background: "#0f1214"
            indicator: "#0066CC"
            color: "#ffffff"
            selectedColor: "#ffffff"
            navItem:
              hoverBackground: "#3c3f42"
            submenu:
              background: "#0f1214"
          pinSidebarButton:
            background: "#BDBDBD"
            icon: "#404040"
          primary:
            main: "#1FA7F8"
          secondary:
            main: "#B2A3FF"
          status:
            aborted: "#9E9E9E"
            error: "#F84C55"
            ok: "#71CF88"
            pending: "#FEF071"
            running: "#3488E3"
            warning: "#FFB84D"
          tabbar:
            indicator: "#9BF0E1"
          textContrast: "#FFFFFF"
          textSubtle: "#CCCCCC"
          textVerySubtle: "#727272"
          warningBackground: "#F59B23"
          warningText: "#000000"

          rhdh:
            general:
              disabledBackground: "#444548"
              disabled: "#AAABAC"
              searchBarBorderColor: "#57585a"
              formControlBackgroundColor: "#36373A"
              mainSectionBackgroundColor: "#0f1214"
              headerBottomBorderColor: "#A3A3A3"
              cardBackgroundColor: "#292929"
              sidebarBackgroundColor: "#1b1d21"
              cardBorderColor: "#A3A3A3"
              tableTitleColor: "#E0E0E0"
              tableSubtitleColor: "#E0E0E0"
              tableColumnTitleColor: "#E0E0E0"
              tableRowHover: "#0f1214"
              tableBorderColor: "#515151"
              tableBackgroundColor: "#1b1d21"
              tabsBottomBorderColor: "#444548"
              contrastText: "#FFF"
            primary:
              main: "#1FA7F8"
              focusVisibleBorder: "#ADD6FF"
            secondary:
              main: "#B2A3FF"
              focusVisibleBorder: "#D0C7FF"
            cards:
              headerTextColor: "#FFF"
              headerBackgroundColor: "#0f1214"
              headerBackgroundImage: "none"

另外，您可以使用 app-config.yaml 文件中的以下 变体 和模式 值来应用以前的默认配置：

app:
  branding:
    theme:
      light:
        variant: "rhdh"
        mode: "light"
      dark:
        variant: "rhdh"
        mode: "dark"

9.9.2. 默认 Red Hat Developer Hub 页主题
复制链接

默认 Developer Hub 标头颜色在 light mode 和 black in dark 模式中是白色，如以下 app-config.yaml 文件配置所示：

app:
  branding:
    theme:
      light:
        palette: {}
        defaultPageTheme: default
        pageTheme:
          default:
            backgroundColor: "#ffffff"
      dark:
        palette: {}
        defaultPageTheme: default
        pageTheme:
          default:
            backgroundColor: "#0f1214"

9.10. 默认阶段主题
复制链接

您可以使用默认的 Backstage 主题配置使 Developer Hub 实例类似于标准 Backstage 实例。您还可以修改 app-config.yaml 文件以自定义或禁用特定参数。

9.10.1. 默认回阶段主题颜色面板
复制链接

app-config.yaml 文件对默认的 Backstage color palette 使用以下配置：

app:
  branding:
    theme:
      light:
        variant: "backstage"
        mode: "light"
        palette:
          background:
            default: "#F8F8F8"
            paper: "#FFFFFF"
          banner:
            closeButtonColor: "#FFFFFF"
            error: "#E22134"
            info: "#2E77D0"
            link: "#000000"
            text: "#FFFFFF"
            warning: "#FF9800"
          border: "#E6E6E6"
          bursts:
            backgroundColor:
              default: "#7C3699"
            fontColor: "#FEFEFE"
            gradient:
              linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
            slackChannelText: "#ddd"
          errorBackground: "#FFEBEE"
          errorText: "#CA001B"
          gold: "#FFD600"
          highlight: "#FFFBCC"
          infoBackground: "#ebf5ff"
          infoText: "#004e8a"
          link: "#0A6EBE"
          linkHover: "#2196F3"
          navigation:
            background: "#171717"
            color: "#b5b5b5"
            indicator: "#9BF0E1"
            navItem:
              hoverBackground: "#404040"
            selectedColor: "#FFF"
            submenu:
              background: "#404040"
          pinSidebarButton:
            background: "#BDBDBD"
            icon: "#181818"
          primary:
            main: "#1F5493"
          status:
            aborted: "#757575"
            error: "#E22134"
            ok: "#1DB954"
            pending: "#FFED51"
            running: "#1F5493"
            warning: "#FF9800"
          tabbar:
            indicator: "#9BF0E1"
          textContrast: "#000000"
          textSubtle: "#6E6E6E"
          textVerySubtle: "#DDD"
          warningBackground: "#F59B23"
          warningText: "#000000"

      dark:
        variant: "backstage"
        mode: "dark"
        palette:
          background:
            default: "#333333"
            paper: "#424242"
          banner:
            closeButtonColor: "#FFFFFF"
            error: "#E22134"
            info: "#2E77D0"
            link: "#000000"
            text: "#FFFFFF"
            warning: "#FF9800"
          border: "#E6E6E6"
          bursts:
            backgroundColor:
              default: "#7C3699"
            fontColor: "#FEFEFE"
            gradient:
              linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
            slackChannelText: "#ddd"
          errorBackground: "#FFEBEE"
          errorText: "#CA001B"
          gold: "#FFD600"
          highlight: "#FFFBCC"
          infoBackground: "#ebf5ff"
          infoText: "#004e8a"
          link: "#9CC9FF"
          linkHover: "#82BAFD"
          mode: "dark"
          navigation:
            background: "#424242"
            color: "#b5b5b5"
            indicator: "#9BF0E1"
            navItem:
              hoverBackground: "#404040"
            selectedColor: "#FFF"
            submenu:
              background: "#404040"
          pinSidebarButton:
            background: "#BDBDBD"
            icon: "#404040"
          primary:
            dark: "#82BAFD"
            main: "#9CC9FF"
          secondary:
            main: "#FF88B2"
          status:
            aborted: "#9E9E9E"
            error: "#F84C55"
            ok: "#71CF88"
            pending: "#FEF071"
            running: "#3488E3"
            warning: "#FFB84D"
          tabbar:
            indicator: "#9BF0E1"
          textContrast: "#FFFFFF"
          textSubtle: "#CCCCCC"
          textVerySubtle: "#727272"
          warningBackground: "#F59B23"
          warningText: "#000000"

另外，您可以使用 app-config.yaml 文件中的以下 变体 和模式 值来应用以前的默认配置：

app:
  branding:
    theme:
      light:
        variant: "backstage"
        mode: "light"
      dark:
        variant: "backstage"
        mode: "dark"

9.10.2. 默认 Backstage 页主题
复制链接

默认 Backstage 标头颜色在 light mode 和 black in dark 模式中是白色的，如以下 app-config.yaml 文件配置中所示：

app:
  branding:
    theme:
      light:
        palette: {}
        defaultPageTheme: default
        pageTheme:
          default:
            backgroundColor: ['#005B4B'] # teal
            fontColor: '#ffffff'
            shape: wave
          documentation:
            backgroundColor: ['#C8077A', '#C2297D'] # pinkSea
            fontColor: '#ffffff'
            shape: wave2
          tool:
            backgroundColor: ['#8912CA', '#3E00EA'] # purpleSky
            fontColor: '#ffffff'
            shape: round
          service:
            backgroundColor: ['#006D8F', '#0049A1'] # marineBlue
            fontColor: '#ffffff'
            shape: wave
          website:
            backgroundColor: ['#0027AF', '#270094'] # veryBlue
            fontColor: '#ffffff'
            shape: wave
          library:
            backgroundColor: ['#98002B', '#8D1134'] # rubyRed
            fontColor: '#ffffff'
            shape: wave
          other:
            backgroundColor: ['#171717', '#383838'] # darkGrey
            fontColor: '#ffffff'
            shape: wave
          app:
            backgroundColor: ['#BE2200', '#A41D00'] # toastyOrange
            fontColor: '#ffffff'
            shape: shapes.wave
          apis:
            backgroundColor: ['#005B4B'] # teal
            fontColor: '#ffffff'
            shape: wave2
          card:
            backgroundColor: ['#4BB8A5', '#187656'] # greens
            fontColor: '#ffffff'
            shape: wave

      dark:
        palette: {}
        defaultPageTheme: default
        pageTheme:
          default:
            backgroundColor: ['#005B4B'] # teal
            fontColor: '#ffffff'
            shape: wave
          documentation:
            backgroundColor: ['#C8077A', '#C2297D'] # pinkSea
            fontColor: '#ffffff'
            shape: wave2
          tool:
            backgroundColor: ['#8912CA', '#3E00EA'] # purpleSky
            fontColor: '#ffffff'
            shape: round
          service:
            backgroundColor: ['#006D8F', '#0049A1'] # marineBlue
            fontColor: '#ffffff'
            shape: wave
          website:
            backgroundColor: ['#0027AF', '#270094'] # veryBlue
            fontColor: '#ffffff'
            shape: wave
          library:
            backgroundColor: ['#98002B', '#8D1134'] # rubyRed
            fontColor: '#ffffff'
            shape: wave
          other:
            backgroundColor: ['#171717', '#383838'] # darkGrey
            fontColor: '#ffffff'
            shape: wave
          app:
            backgroundColor: ['#BE2200', '#A41D00'] # toastyOrange
            fontColor: '#ffffff'
            shape: shapes.wave
          apis:
            backgroundColor: ['#005B4B'] # teal
            fontColor: '#ffffff'
            shape: wave2
          card:
            backgroundColor: ['#4BB8A5', '#187656'] # greens
            fontColor: '#ffffff'
            shape: wave

9.11. 使用动态插件载入自定义 Developer Hub 主题
复制链接

您可以从动态插件加载自定义 Developer Hub 主题。

流程

在动态插件中导出主题供应商功能，例如：

myTheme.ts 片段示例

import { lightTheme } from './lightTheme'; // some custom theme
import { UnifiedThemeProvider } from '@backstage/theme';
export const lightThemeProvider = ({ children }: { children: ReactNode }) => (
  <UnifiedThemeProvider theme={lightTheme} children={children} />
);

有关创建自定义主题的更多信息，请参阅 Backstage 文档 - 创建自定义主题。

配置 Developer Hub，以使用 themes 配置字段在 UI 中加载主题：

app-config.yaml 片段

dynamicPlugins:
  frontend:
    example.my-custom-theme-plugin:
      themes:
        - id: light


          title: Light
          variant: light
          icon: someIconReference
          importName: lightThemeProvider

1: 通过指定所需的值来设置您的主题 ID。（可选）使用以下 ID 值覆盖默认的 Developer Hub 主题： light 来替换默认的 light theme，或 dark 替换默认的 dark 主题。

验证

主题位于 Developer Hub Settings 页面中。

9.12. Developer Hub 实例的自定义组件选项
复制链接

您可以使用两个组件变体来自定义 Developer Hub 的不同组件：

PatternFly
MUI

除了在 light 或dark theme 模式配置中为每个参数分配组件变体外，您还可以切换 rippleEffect 或 off。

以下代码显示了您可以在 app-config.yaml 文件中使用的选项来为 Developer Hub 实例配置主题组件：

app:
  branding:
    theme:
      light:
        options:
          rippleEffect: off / on
          paper: patternfly / mui
          buttons: patternfly / mui
          inputs: patternfly / mui
          accordions: patternfly / mui
          sidebars: patternfly / mui
          pages: patternfly / mui
          headers: patternfly / mui
          toolbars: patternfly / mui
          dialogs: patternfly / mui
          cards: patternfly / mui
          tables: patternfly / mui
          tabs: patternfly / mui
      dark:
        options:
          rippleEffect: off / on
          paper: patternfly / mui
          buttons: patternfly / mui
          inputs: patternfly / mui
          accordions: patternfly / mui
          sidebars: patternfly / mui
          pages: patternfly / mui
          headers: patternfly / mui
          toolbars: patternfly / mui
          dialogs: patternfly / mui
          cards: patternfly / mui
          tables: patternfly / mui
          tabs: patternfly / mui

第 10 章自定义主页
复制链接

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

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

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

管理员可以改变位于 12 个列网中的固定卡高度。

默认 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 页面配置不同的卡，如下所示：

搜索

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 }

Expand

表 10.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 }

Expand

表 10.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

Expand

表 10.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)

占位符

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'

目录不足实体

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

特性文档

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

10.2. 定义 Red Hat Developer Hub Home 页面的布局
复制链接

Home 页面使用 12 个列网来定位您的卡。您可以使用最佳参数来定义 Developer Hub Home 页面的布局。

先决条件

在每个断点中包括以下最佳参数：
- 宽度(w)
- 高度(h)
- 位置(x 和 y)

流程

通过选择以下选项之一来配置 Developer Hub app-config.yaml 配置文件：
- 在较小的窗口上使用所有空间，并在大型窗口中使用一半的空间，如下所示：

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

通过定义 x 参数来排显示卡，如下例所示：

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

但是，默认情况下您可以在这个卡中看到第二个卡。

通过定义 x 参数来显示三列中的卡，如下例所示：

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 4, h: 2 }
              lg: { w: 4, h: 2 }
              md: { w: 4, h: 2 }
              sm: { w: 6, h: 2 }
              xs: { w: 12, h: 2 }
              xxs: { w: 12, h: 2 }
            props:
              showBorder: true
              debugContent: left
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 4, h: 2, x: 4 }
              lg: { w: 4, h: 2, x: 4 }
              md: { w: 4, h: 2, x: 4 }
              sm: { w: 6, h: 2, x: 6 }
              xs: { w: 12, h: 2 }
              xxs: { w: 12, h: 2 }
            props:
              showBorder: true
              debugContent: center
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 4, h: 2, x: 8 }
              lg: { w: 4, h: 2, x: 8 }
              md: { w: 4, h: 2, x: 8 }
              sm: { w: 6, h: 2 }
              xs: { w: 12, h: 2 }
              xxs: { w: 12, h: 2 }
            props:
              showBorder: true
              debugContent: right

第 11 章自定义快速访问卡
复制链接

要访问 Red Hat Developer Hub 中的 Home 页面，基本 URL 必须包含 /developer-hub 代理。您可以通过将数据作为代理传递给 app-config.yaml 文件来配置 Home 页面。您可以在以下源的 Home 页面中提供数据：

托管在 GitHub 或 GitLab 上的 JSON 文件。
使用 API 以 JSON 格式提供 Home 页面数据的专用服务。

11.1. 使用托管 JSON 文件向快速访问卡提供数据
复制链接

先决条件

已使用 Operator 或 Helm Chart 安装 Red Hat Developer Hub。请参阅在 OpenShift Container Platform 上安装 Red Hat Developer Hub。

流程

要从 JSON 文件访问数据，请在 app-config.yaml Developer Hub 配置文件中添加以下代码：

将以下代码添加到 app-config.yaml 文件中：

proxy:
  endpoints:
    # Other Proxies
    # customize developer hub instance
    '/developer-hub':
      target: <DOMAIN_URL> # i.e https://raw.githubusercontent.com/
      pathRewrite:
        '^/api/proxy/developer-hub': <path to json file> # i.e /redhat-developer/rhdh/main/packages/app/public/homepage/data.json
      changeOrigin: true
      secure: true
      # Change to "false" in case of using self hosted cluster with a self-signed certificate
      headers:
	<HEADER_KEY>: <HEADER_VALUE> # optional and can be passed as needed i.e Authorization can be passed for private GitHub repo and PRIVATE-TOKEN can be passed for private GitLab repo

11.2. 使用专用服务向 Quick 访问卡提供数据
复制链接

在使用专用服务时，您可以执行以下任务：

使用相同的服务向所有可配置的 Developer Hub 页面提供数据，或者为每个页面使用不同的服务。
使用 red-hat-developer-hub-customization-provider 作为示例服务，它为 Home 和 Tech Radar 页面提供数据。red-hat-developer-hub-customization-provider 服务提供与默认 Developer Hub 数据相同的数据。您可以从 GitHub 分叉 red-hat-developer-hub-customization-provider 服务存储库，并根据需要使用自己的数据进行修改。
在同一集群中部署 red-hat-developer-hub-customization-provider 服务和 Developer Hub Helm Chart。

先决条件

已使用 Helm Chart 安装 Red Hat Developer Hub。如需更多信息，请参阅使用 Helm Chart 在 OpenShift Container Platform 上安装 Red Hat Developer Hub。

流程

要使用单独的服务提供 Home 页面数据，请完成以下步骤：

从 Red Hat OpenShift Container Platform Web 控制台中的 Developer 视角，点 +Add > Import from Git。
在 Git Repo URL 字段中输入 Git 存储库的 URL。
要使用 red-hat-developer-hub-customization-provider 服务，请添加 red-hat-developer-hub-customization-provider 存储库的 URL 或包含您的自定义的存储库分叉。
在 General 选项卡中，在 Name 字段中输入 red-hat-developer-hub-customization-provider，然后单击 Create。
在 Advanced Options 选项卡中，复制 Target Port 的值。
注意
目标端口 自动生成 Kubernetes 或 OpenShift Container Platform 服务以进行通信。

将以下代码添加到 app-config.yaml 文件中：

proxy:
  endpoints:
    # Other Proxies
    # customize developer hub instance
    '/developer-hub':
      target: ${HOMEPAGE_DATA_URL}


      changeOrigin: true
      # Change to "false" in case of using self-hosted cluster with a self-signed certificate
      secure: true

1: http://<SERVICE_NAME>:8080，例如 http://rhdh-customization-provider:8080。

注意

red-hat-developer-hub-customization-provider 服务默认包含 8080 端口。如果使用自定义端口，您可以使用 app-config.yaml 文件中的 'PORT' 环境变量指定它。

将 URL 添加到 rhdh-secrets 或直接在自定义 ConfigMap 中替换它，替换 HOMEPAGE_DATA_URL。
删除 Developer Hub pod，以确保正确载入新配置。

验证

要查看该服务，请转至 OpenShift Container Platform Web 控制台中的 Administrator 视角，然后点击 Networking > Service。
注意
您还可以在 Topology 视图中查看 服务资源。

确保 Home 页面提供的 API URL 以 JSON 格式返回数据，如下例所示：

[
  {
    "title": "Dropdown 1",
    "isExpanded": false,
    "links": [
      {
        "iconUrl": "https://imagehost.com/image.png",
        "label": "Dropdown 1 Item 1",
        "url": "https://example.com/"
      },
      {
        "iconUrl": "https://imagehost2.org/icon.png",
        "label": "Dropdown 1 Item 2",
        "url": ""
      }
    ]
  },
  {
    "title": "Dropdown 2",
    "isExpanded": true,
    "links": [
      {
        "iconUrl": "http://imagehost3.edu/img.jpg",
        "label": "Dropdown 2 Item 1",
        "url": "http://example.com"
      }
    ]
  }
]

注意

如果请求调用失败或未配置，Developer Hub 实例会返回默认的本地数据。

如果镜像或图标没有加载，那么通过将您的镜像或图标主机 URL 添加到自定义 ConfigMap 中的内容安全策略(csp) img-src 来列出它们，如下例所示：

kind: ConfigMap
apiVersion: v1
metadata:
  name: app-config.yaml
data:
  app-config.yaml: |
    app:
      title: Red Hat Developer Hub
    backend:
      csp:
        connect-src:
          - "'self'"
          - 'http:'
          - 'https:'
        img-src:
          - "'self'"
          - 'data:'
          - <image host url 1>
          - <image host url 2>
          - <image host url 3>
    # Other Configurations

法律通告
复制链接

The text of and illustrations in this document are licensed by Red Hat under a Creative Commons Attribution–Share Alike 3.0 Unported license ("CC-BY-SA"). An explanation of CC-BY-SA is available at http://creativecommons.org/licenses/by-sa/3.0/. In accordance with CC-BY-SA, if you distribute this document or an adaptation of it, you must provide the URL for the original version.

Red Hat, as the licensor of this document, waives the right to enforce, and agrees not to assert, Section 4d of CC-BY-SA to the fullest extent permitted by applicable law.

Red Hat, Red Hat Enterprise Linux, the Shadowman logo, the Red Hat logo, JBoss, OpenShift, Fedora, the Infinity logo, and RHCE are trademarks of Red Hat, Inc., registered in the United States and other countries.

Linux® is the registered trademark of Linus Torvalds in the United States and other countries.

Java® is a registered trademark of Oracle and/or its affiliates.

XFS® is a trademark of Silicon Graphics International Corp. or its subsidiaries in the United States and/or other countries.

MySQL® is a registered trademark of MySQL AB in the United States, the European Union and other countries.

Node.js® is an official trademark of Joyent. Red Hat is not formally related to or endorsed by the official Joyent Node.js open source or commercial project.

The OpenStack® Word Mark and OpenStack logo are either registered trademarks/service marks or trademarks/service marks of the OpenStack Foundation, in the United States and other countries and are used with the OpenStack Foundation's permission. We are not affiliated with, endorsed or sponsored by the OpenStack Foundation, or the OpenStack community.

All other trademarks are the property of their respective owners.

自定义 Red Hat Developer Hub