Red Hat Summit 红帽全球峰会支持控制台（Console）开发人员开始试用联系人

自定义 Red Hat Developer Hub

Red Hat Developer Hub 1.6

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

Red Hat Customer Content Services

摘要

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

前言
复制链接

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

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

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

先决条件

流程

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

    app-config.yaml excerpt

    app:
  title: My custom Red Hat Developer Hub title
    Copy to Clipboard Toggle word wrap

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

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

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

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

先决条件

流程

  1. 要定义 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")')"
    Copy to Clipboard Toggle word wrap

    <my_product_secrets&gt; .txt 示例

    BACKEND_SECRET=3E2/rIPuZNFCtYHoxVP8wjriffnN1q/z
    Copy to Clipboard Toggle word wrap

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

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

    backend:
  auth:
    externalAccess:
      - type: legacy
        options:
          subject: legacy-default-config
          secret: "${BACKEND_SECRET}"
    Copy to Clipboard Toggle word wrap

第 4 章 关于软件模板
复制链接

Red Hat Developer Hub 中的软件模板提供了创建软件组件并将其发布到不同版本控制系统（如 Git）的简化方法。平台工程师在 Red Hat Developer Hub 中创建和维护软件模板。

您可以配置软件模板以创建软件组件，并将这些组件发布到 Git 存储库。将组件发布到 Git 存储库后，在 Software Catalog 中注册这些组件。

模板由 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 模板创建软件模板，请完成以下步骤：

  1. 在 Red Hat Developer Hub 导航菜单中，点 Catalog > Self-service。或者，要进入 Self-service 页面，在标头菜单中点击(+)图标。

  2. 单击 More options 图标，再选择 Manage Templates。

    模板编辑器
    View larger image
    模板编辑器
    注意

    • Managed Templates 页面中的以下选项不会在 Red Hat Developer Hub 实例中创建软件组件：

      • Template Form Playground: 用来创建和测试 templates.yaml 文件
      • Custom Field Explorer ：使用测试自定义字段

  3. 在 Managed Templates 页面中，选择以下选项之一：

    • Load Template Directory: 用来加载现有的 templates.yaml 文件

      • 在本地文件管理器中，导航到存储 templates.yaml 文件的文件夹，然后点 Select。

    • 创建新模板 ：使用 创建 templates.yaml 文件

      1. 在本地文件管理器中，导航到您希望 Template Editor 创建 templates.yaml 文件的文件夹，然后点 Select。
      2. 在 Template Editor 页面中，选择 templates.yaml 文件。

      3. （可选）您可以预览和测试模板规格。

        1. 在 一些步骤选项卡中的 Fill 中，在必填字段中输入文本，然后单击 Next。
        2. 在 Repository Location 选项卡中，在必填字段中输入文本，然后单击 Review。
        3. 修改模板参数的 YAML 定义。有关这些参数的详情请参考 第 4.2 节 “将软件模板创建为 YAML 文件”。
        4. 查看准确性的信息，然后点 Create。
      4. 创建软件模板后，在您的 RHDH 实例中导入您的软件模板。

验证

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

后续步骤

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

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

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

模板 对象示例

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

  title: Example template
2 

  description: An example template for v1beta3 scaffolder.
3 

spec:
  owner: backstage/techdocs-core
4 

  type: service
5 

  parameters:
6 

    - 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:
7 

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

    links:
      - title: Repository
9 

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

        icon: catalog
        entityRef: ${{ steps['register'].output.entityRef }}
# ...
Copy to Clipboard Toggle word wrap

1
为软件模板指定一个名称。
2
为软件模板指定标题。这是 自助服务 视图中的 Software Template 标题可见的标题。
3
指定软件模板的描述。这是在 自助服务 视图中的 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. 使用软件模板创建新软件组件
复制链接

您可以使用平台工程师创建的标准软件模板创建新的软件组件。构建(building)过程在 Red Hat Developer Hub 实例中运行。

流程

  1. 在 Red Hat Developer Hub 导航菜单中，点 Catalog > Self-service。
  2. 在 Self-service 页面中，点 Templates 标题的 Choose 来启动模板的构建过程。

  3. 在输入所需详情时，请按照向导说明进行操作。您可以从一组预定义的选项中选择参数。

    • 可选：在 Deployment Information 步骤中，您可以选择 为 OpenShift AI 创建 Workbench。

      注意

      此步骤仅适用于几个模板。

  4. 在 Review 步骤中，验证您输入的参数并点 Create。

    注意
    • 只有在当前步骤支持中止时，您可以点 Cancel 在模板运行过程中中止软件组件创建。然后，中止信号会发送到某个任务，并且不执行以下步骤。
    • 在创建软件组件期间，单击 Show Logs 以查看日志信息。

验证

  • 如果您的软件组件没有成功创建，您可以在错误页面中查看日志。要返回具有相同模板表单和之前输入的值的 Self-service 页面，请单击 Start Over。
模板创建成功
View larger image
模板创建成功

  • 如果您的 Software Template 已被成功创建，则会显示类似以下镜像中的示例的成功页面：

    template-creation-successful
    View larger image
    template-creation-successful

您可以搜索和过滤您要用来创建新软件组件的软件模板。

流程

要搜索和过滤软件模板，请完成以下步骤：

  1. 在 Red Hat Developer Hub 导航菜单中点 Catalog > Self-service。

  2. 在 Search 框中键入您要查找的模板的名称。

    • 如果您要在特定类别中查找模板，您可以使用 Categories 下拉菜单。

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

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

先决条件

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

流程

  • 在 app-config.yaml 配置文件中，修改 catalog.rules 部分使其包含 Software Templates 的规则，并将 catalog.locations 部分配置为指向要添加的软件模板，如下例所示： 

    # ...
catalog:
  rules:
    - allow: [Template]
    1 
    
  locations:
    - type: url
    2 
    
      target: https://<repository_url>/example-template.yaml
    3 
    
# ...
    Copy to Clipboard Toggle word wrap
    1
    要允许新软件模板添加到目录中，您必须添加一个 Template 规则。
    2
    如果您要从存储库（如 GitHub 或 GitLab）导入模板，请使用 url 类型。
    3
    指定模板的 URL。

验证

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

第 5 章 关于软件目录
复制链接

Red Hat Developer Hub Software Catalog 是一个集中的系统，可让您了解您生态系统中的所有软件，包括服务、网站、库和数据管道。您可以使用它来查看每个组件的所有权详情和元数据。

软件目录中组件的元数据作为 YAML 文件存储在您的版本控制系统中，该文件与您的代码一起存储在您的版本控制系统中。版本控制存储库可以包括一个或多个元数据文件。软件目录将项目组织为实体，其中包括组件、资源和 API 和其他相关类型。每个实体都包括相关的元数据，如其所有者、类型和其他相关详情。

通过将元数据存储在 YAML 文件中以及代码，您可以允许 Red Hat Developer Hub 通过清晰的可视界面处理和显示这些信息。借助软件目录，您可以管理和维护软件，了解生态系统中所有可用的软件，并获得您的服务和工具的所有权。

组件的 Overview 页面提供关键信息，如源代码的链接、文档、依赖项和所有权详情。您可以使用插件自定义此页面来满足特定的需求。

5.1. 在 Red Hat Developer Hub 实例中添加新组件
复制链接

先决条件

流程

您可以使用以下方法将组件添加到 RHDH 实例中：

  • 使用 GUI 手动注册组件，或使用 app-config.yaml 与所需权限手动注册组件。
  • 使用软件模板创建新组件。
  • 使用带有所需权限的批量导入插件。如需更多信息，请参阅 Bulk 导入 GitHub 存储库。

5.1.1. 在 Red Hat Developer Hub 实例中创建新组件
复制链接

您可以在 RHDH 实例的 Software Catalog 中创建新组件。Red Hat Developer Hub 会自动注册开发人员或平台工程师在软件目录中使用模板创建的所有组件。

先决条件

流程

  1. 在 Red Hat Developer Hub 导航菜单中，点 Catalog。
  2. 在 Catalog 页面上，单击 Self-service。

5.1.2. 在您的 RHDH 实例中手动注册组件
复制链接

要在 RHDH 实例中手动注册组件，请创建一个 catalog-info.yaml 文件，并将其注册到 Red Hat Developer Hub 实例。catalog-info.yaml 文件包含您要为软件组件注册的元数据。

先决条件

流程

  1. 在软件项目的根目录中，创建名为 catalog-info.yaml 的文件。

    catalog-info.yaml 文件示例

    apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
    name: _<your_software_component>_
    description: _<software_component_brief_description>_
    tags:
         - example
         - service
    annotations:
         github.com/project-slug: _<repo_link_of_your_component_to_register>_
spec:
    type: _<your_service>_
    owner: _<your_team_name>_
    lifecycle: _<your_lifecycle>_
    Copy to Clipboard Toggle word wrap

  2. 将 catalog-info.yaml 文件提交到项目源代码存储库的根目录。
  3. 在 Red Hat Developer Hub 导航菜单中，进入 Catalog > Self-service。
  4. 在 Self-service 页面中，单击 Register Existing Component。
  5. 在 Register a existing component 页面中，在仓库中输入 catalog-info.yaml 文件的完整 URL。例如： Artist lookup component。
  6. 完成向导说明。

验证

  • 您的软件组件列在 Software Catalog 中。您可以查看其详情并确保所有元数据都准确。

您可以更新 Red Hat Developer Hub 实例中的 Software Catalog 中的组件。

先决条件

流程

要更新 Red Hat Developer Hub 实例中的 Software Catalog 中的组件，请完成以下步骤：

  1. 在 Red Hat Developer Hub 导航菜单中，点 Catalog。

  2. 找到您要编辑的软件组件，然后点击 Actions 下的 Edit 图标。

    注意

    此操作会将您重定向到 GitHub 上的 YAML 文件。

  3. 在远程存储库 UI 上，更新 YAML 文件。

    注意

    合并更改后，软件目录中更新后的元数据会在一段时间后出现。

5.3. 搜索和过滤软件目录
复制链接

您可以通过 Kind 或使用 Filter 字段搜索和过滤软件目录。

5.3.1. 通过 Kind 搜索和过滤软件目录
复制链接

要通过其 Kind 过滤软件目录，请完成以下步骤：

流程

  1. 在 Red Hat Developer Hub 导航菜单中，点 Catalog。
  2. 在 Catalog 页面中，点 Kind 下拉列表。

  3. 选择您要过滤的 Kind 类型。

    注意

    可用的过滤器下拉菜单根据您选择的 Kind 的不同，显示与该特定实体类型相关的选项。

5.3.2. 使用 Filter 字段搜索和过滤软件目录
复制链接

要使用 Filter 字段过滤软件目录，请完成以下步骤：

流程

  1. 在 Red Hat Developer Hub 导航菜单中，点 Catalog。
  2. 在 Search 框中，输入您要用来过滤组件的文本。

您可以查看 Red Hat Developer Hub 实例中的 Software Catalog YAML 文件。YAML 文件在 Software Catalog 中显示组件的元数据。

流程

要查看 Red Hat Developer Hub 实例中的 Software Catalog YAML 文件，请完成以下步骤：

  1. 在 Red Hat Developer Hub 导航菜单中，点 Catalog。

  2. 找到您要查看的软件组件，然后点击 Actions 下的 View 图标。

    注意

    这些步骤会将您重定向到远程存储库上的 YAML 文件。

5.5. 软件目录中的 Starring 组件
复制链接

您可以使用 Add to favorites 图标将您定期访问的软件目录添加到 Starred 类别中。

流程

要快速访问您定期访问的软件目录，请完成以下步骤：

  1. 在 Red Hat Developer Hub 导航菜单中，点 Catalog。
  2. 找到您要添加为热门的软件组件，然后点击 Actions 下的 Add to favorites 图标。

验证

  • starred 组件列在 您的主页上的 Starred Entities 下。

在 Red Hat Developer Hub 中，您可以通过外部托管所需数据来配置学习路径，并使用内置代理提供此数据而不是默认代理。

您可以从以下源提供学习路径数据：

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

6.1. 关于学习路径
复制链接

您可以使用 Red Hat Developer Hub 中的学习路径插件将自定义电子学习内容集成到开发人员工作流中。通过使用学习路径，您可以创建协作式学习文化，提高工作效率，并确保团队继续使用相关的最佳实践和技术。总体目的是加速加入、解决技术差距、确保法规合规性、促进最佳实践并促进产品更新。

6.2. 使用托管的 JSON 文件自定义学习路径
复制链接

为了便于使用和简单性，您可以使用托管的 JSON 文件配置学习路径。

流程

  1. 将包含您的学习路径数据的 JSON 文件发布到 Web 服务器，如 GitHub 或 Gitlab。您可以在 https://raw.githubusercontent.com/redhat-developer/rhdh/release-1.6/packages/app/public/learning-paths/data.json 找到示例。

  2. 通过将以下内容添加到 app-config.yaml 文件，配置 Developer Hub 代理以访问托管 JSON 文件中的学习路径数据： 

    proxy:
  endpoints:
    '/developer-hub':
      target: <target>
      pathRewrite:
        '^/api/proxy/developer-hub/learning-paths': '<learning_path.json>'
      changeOrigin: true
      secure: true
    Copy to Clipboard Toggle word wrap
    <target>
    输入托管的 JSON 文件基本 URL，如 https://raw.githubusercontent.com。
    <learning_path.json>

    输入没有基本 URL 的托管 JSON 文件路径，如 '/redhat-developer/rhdh/main/packages/app/public/learning-paths/data.json'

    提示

    当也配置主页时，由于对 learning-path 和 主页 快速访问代理使用重叠的 pathRewrites，请在创建 主页 配置前创建 learning-paths 配置(^api/proxy/developer-hub/ learning-paths)。例如： 

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

其他资源

6.3. 使用自定义服务自定义学习路径
复制链接

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

流程

  1. 在与 Developer Hub 实例相同的 OpenShift Container Platform 集群上部署 Developer Hub 自定义服务。您可以在 red-hat-developer-hub-customization-provider 中找到一个示例，它提供与默认 Developer Hub 数据相同的数据。自定义服务提供学习路径数据 URL，例如： http:// <rhdh-customization-provider> / learning-paths。

  2. 将 Developer Hub 代理配置为使用您的专用服务来提供学习路径数据，将以下内容添加到 app-config.yaml 文件中 ： 

    proxy:
  endpoints:
    '/developer-hub/learning-paths':
      target: <learning_path_data_url>
      changeOrigin: true
      qsecure: true
    1
    Copy to Clipboard Toggle word wrap
    1
    当使用自签名证书的自托管集群时，请更改为 "false"

6.4. 在学习路径中开始和完成课程
复制链接

作为开发人员，您可以自行开始课程，并以自己的节奏完成课程。

先决条件

  1. 您可以登录到 developers.redhat.com
  2. 您的平台工程师已授予您访问学习路径插件的访问权限。

流程

要开始学习路径中的课程，请完成以下步骤：

  1. 在 Red Hat Developer Hub 导航菜单中，单击 learning Paths。

  2. 选择您要开始的课程的标题。

    注意

    此操作会将您重定向到 Red Hat Developers 网站 中课程的主页。

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

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

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

7.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
1 

          settings: false
2 

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

            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
4 

              - 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: Self-service
                    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
Copy to Clipboard Toggle word wrap

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

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

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

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

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

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

先决条件

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

流程

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

    - mountPoint: global.header/component
  importName: Spacer
  config:
    priority: 100
    props:
      growFactor: 1
    Copy to Clipboard Toggle word wrap

  2. 要使用自定义标头，您必须通过将插件配置添加到 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
    Copy to Clipboard Toggle word wrap

    其中：

    <npm_or_oci_package-reference>
    指定软件包名称。
    <application_header_name>
    指定应用程序标头的名称。例如： MyHeader
    <header_component_name>

    指定标头组件的名称。例如： MyHeaderComponent

    注意

    importName 是一个可选名称，引用 scaffolder 字段扩展 API 返回的值。

  3. 可选： 要禁用全局标头，请在 dynamic-plugins.yaml 文件中将 disabled 字段的值设置为 true。例如： 

    - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
  disabled: true
    Copy to Clipboard Toggle word wrap

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

添加一个 spacer 元素示例

- mountPoint: global.header/component
  importName: Spacer
  config:
    priority: 99
    props:
      growFactor: 0
Copy to Clipboard Toggle word wrap

添加划分元素示例

mountPoints:
  - mountPoint: global.header/component
    importName: Divider
    config:
      priority: 150
Copy to Clipboard Toggle word wrap

global.header/profile

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

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

- mountPoint: global.header/profile
  importName: MenuItemLink
  config:
    priority: 100
    props:
      title: Settings
      link: /settings
      icon: manageAccounts
Copy to Clipboard Toggle word wrap

global.header/create

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

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

- mountPoint: global.header/create
  importName: RegisterAComponentSection
  config:
    props:
      growFactor: 0
Copy to Clipboard Toggle word wrap

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

8.1. 将浮动操作按钮配置为动态插件
复制链接

您可以将浮动操作按钮配置为动态插件，以执行操作或打开内部或外部链接。

先决条件

您必须有足够的权限作为平台工程师。

流程

要将浮动操作按钮配置为动态插件，请完成以下任一任务：

  • 在 app-config-dynamic.yaml 文件中指定 global.floatingactionbutton/config 挂载点。例如：

    批量导入插件示例作为浮动操作按钮

    - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
  disabled: false
  pluginConfig:
    dynamicPlugins:
      frontend:
        red-hat-developer-hub.backstage-plugin-bulk-import:
          # Start of the floating action button configuration
          mountPoints:
            - mountPoint: global.floatingactionbutton/config
              importName: BulkImportPage
    1 
    
              config:
                slot: 'page-end'
                icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.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"/></g></svg>
    2 
    
                label: 'Bulk import'
                toolTip: 'Register multiple repositories in bulk'
                to: /bulk-import/repositories
          # End of the floating action button configuration
          appIcons:
            - name: bulkImportIcon
              importName: BulkImportIcon
          dynamicRoutes:
            - path: /bulk-import/repositories
              importName: BulkImportPage
              menuItem:
                icon: bulkImportIcon
                text: Bulk import
    Copy to Clipboard Toggle word wrap

    1
    （必需）与挂载点关联的组件的导入名称。
    2
    使用 svg 值显示黑色 BulkImportPage 图标。

  • 要将操作配置为打开外部链接的浮动操作按钮，请在 backstage-plugin-global-floating-action-button 插件中指定 dynamic-plugins.yaml 文件中的 global.floatingactionbutton/config 挂载点。例如：

    打开 GitHub 的浮动操作按钮示例

    - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-floating-action-button
  disabled: false
  pluginConfig:
    dynamicPlugins:
      frontend:
        red-hat-developer-hub.backstage-plugin-global-floating-action-button:
          mountPoints:
              - mountPoint: application/listener
                importName: DynamicGlobalFloatingActionButton
              - mountPoint: global.floatingactionbutton/config
                importName: NullComponent
    1 
    
                config:
                  icon: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>'
    2 
    
                  label: 'Quay'
                  showLabel: true
                  toolTip: 'Quay'
                  to: 'https://quay.io'
              - mountPoint: global.floatingactionbutton/config
                importName: NullComponent
                config:
                  icon: github
                  label: 'Git'
                  toolTip: 'Github'
                  to: https://github.com/redhat-developer/rhdh-plugins
    Copy to Clipboard Toggle word wrap

    1
    （必需）与挂载点关联的组件的导入名称。
    2
    使用 svg 值显示 Quay 图标。

  • 要配置包含子菜单的浮动操作按钮，请在 dynamic-plugins.yaml 文件中的同一 slot 字段中定义 global.floatingactionbutton/config 挂载点，以进行多个操作。如果没有指定，默认插槽为 page-end。例如：

    带有子菜单操作的浮动操作按钮示例

    - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
  disabled: false
  pluginConfig:
    dynamicPlugins:
      frontend:
        red-hat-developer-hub.backstage-plugin-bulk-import:
          # Start of fab config
          mountPoints:
            - mountPoint: global.floatingactionbutton/config
              importName: BulkImportPage
    1 
    
              config:
                slot: 'page-end'
                icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.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"/></g></svg>
                label: 'Bulk import'
                toolTip: 'Register multiple repositories in bulk'
                to: /bulk-import/repositories
          # end of fab config
          appIcons:
            - name: bulkImportIcon
              importName: BulkImportIcon
          dynamicRoutes:
            - path: /bulk-import/repositories
              importName: BulkImportPage
              menuItem:
                icon: bulkImportIcon
                text: Bulk import

- package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-floating-action-button
  disabled: false
  pluginConfig:
    dynamicPlugins:
      frontend:
        red-hat-developer-hub.backstage-plugin-global-floating-action-button:
          mountPoints:
            - mountPoint: application/listener
              importName: DynamicGlobalFloatingActionButton
            - mountPoint: global.floatingactionbutton/config
              importName: NullComponent
    2 
    
              config:
                icon: github
                label: 'Git'
                toolTip: 'Github'
                to: https://github.com/redhat-developer/rhdh-plugins
            - mountPoint: global.floatingactionbutton/config
              importName: NullComponent
    3 
    
              config:
                icon: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>'
                label: 'Quay'
                showLabel: true
                toolTip: 'Quay'
                to: 'https://quay.io'
    Copy to Clipboard Toggle word wrap

    1 2 3
    （必需）与挂载点关联的组件的导入名称。

  • 要将浮动操作按钮配置为仅在特定页面上显示，请在 backstage-plugin-global-floating-action-button 插件中配置 global.floatingactionbutton/config 挂载点，并设置 visibleOnPaths 属性，如下例所示：

    显示特定页面的浮动操作按钮示例

    - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
  disabled: false
  pluginConfig:
    dynamicPlugins:
      frontend:
        red-hat-developer-hub.backstage-plugin-bulk-import:
          # start of fab config
          mountPoints:
            - mountPoint: global.floatingactionbutton/config
              importName: BulkImportPage
    1 
    
              config:
                slot: 'page-end'
                icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.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"/></g></svg>
                label: 'Bulk import'
                toolTip: 'Register multiple repositories in bulk'
                to: /bulk-import/repositories
                visibleOnPaths: ['/catalog', '/settings']
          # end of fab config
          appIcons:
            - name: bulkImportIcon
              importName: BulkImportIcon
          dynamicRoutes:
            - path: /bulk-import/repositories
              importName: BulkImportPage
              menuItem:
                icon: bulkImportIcon
                text: Bulk import
    Copy to Clipboard Toggle word wrap

    1
    （必需）与挂载点关联的组件的导入名称。

  • 要在特定页面上隐藏浮动操作按钮，请在 backstage-plugin-global-floating-action-button 插件中配置 global.floatingactionbutton/config 挂载点按钮，并设置 excludeOnPaths 属性，如下例所示：

    隐藏特定页面的浮动操作按钮示例

    - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
  disabled: false
  pluginConfig:
    dynamicPlugins:
      frontend:
        red-hat-developer-hub.backstage-plugin-bulk-import:
          # start of fab config
          mountPoints:
            - mountPoint: global.floatingactionbutton/config
              importName: BulkImportPage
    1 
    
              config:
                slot: 'page-end'
                icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.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"/></g></svg>
                label: 'Bulk import'
                toolTip: 'Register multiple repositories in bulk'
                to: /bulk-import/repositories
                excludeOnPaths: ['/bulk-import']
          # end of fab config
          appIcons:
            - name: bulkImportIcon
              importName: BulkImportIcon
          dynamicRoutes:
            - path: /bulk-import/repositories
              importName: BulkImportPage
              menuItem:
                icon: bulkImportIcon
                text: Bulk import
    Copy to Clipboard Toggle word wrap

    1
    （必需）与挂载点关联的组件的导入名称。

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

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

Expand
表 8.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&gt;

字符串,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[]

在所有路径中显示浮动操作按钮

否

注意

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

在 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 数据的专用服务。

9.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 插件。

流程

  1. 将包含您的 Tech Radar 数据的 JSON 文件发布到 web 服务器，如 GitHub 或 Gitlab。您可以在 https://raw.githubusercontent.com/redhat-developer/rhdh/release-1.6/packages/app/public/tech-radar/data-default.json 找到示例。

  2. 通过将以下内容添加到 app-config.yaml 文件中，配置 Developer Hub 以访问托管 JSON 文件中的 Tech Radar 数据： 

    techRadar:
  url: <tech_radar_data_url>
    Copy to Clipboard Toggle word wrap
    <tech_radar_data_url>
    输入 Tech Radar 数据托管 JSON URL。

9.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 插件。

流程

  1. 在与 Developer Hub 实例相同的 OpenShift Container Platform 集群上部署 Developer Hub 自定义服务。您可以在 red-hat-developer-hub-customization-provider 中找到一个示例，它提供与默认 Developer Hub 数据相同的数据。自定义服务提供了一个 Tech Radar 数据 URL，例如： http:// <rhdh-customization-provider>/tech-radar。

  2. 通过在 app-config.yaml 文件中添加以下代码，将专用服务作为允许的主机添加： 

    backend:
   reading:
        allow:
          - host: '<rhdh_customization_provider_base_url>'
    Copy to Clipboard Toggle word wrap
    <rhdh_customization_provider_base_url>
    输入您的 Tech Radar 数据 URL 的基本 URL，例如： < rhdh-customization-provider >。

  3. 将以下内容添加到 app-config.yaml 文件中： 

    techRadar:
    url: <tech_radar_data_url>
    Copy to Clipboard Toggle word wrap
    <tech_radar_data_url>
    输入您的 Tech Radar 数据 URL，例如： http:// <rhdh-customization-provider>/tech-radar。

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

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

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

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

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

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

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

注意

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

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

  • 辅助主题
  • dark theme
  • auto

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

先决条件

  • 已登陆到 Developer Hub web 控制台。

流程

  1. 在 Developer Hub web 控制台中点 Settings。

  2. 在 Appearance 面板中，单击 LIGHT THEME、DARK THEME 或 AUTO 以更改主题模式。

    自定义主题模式 1
    View larger image
    自定义主题模式 1

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

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

app:
  branding:
    fullLogo: ${BASE64_EMBEDDED_FULL_LOGO}
1 

    iconLogo: ${BASE64_EMBEDDED_ICON_LOGO}
2
Copy to Clipboard Toggle word wrap

其中：

1
fullLogo 是展开的（固定）侧栏上的徽标，需要采用 base64 编码的图像。
2
iconLogo 是折叠（未固定）边栏上的徽标，需要一个 base64 编码的图像。

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

BASE64_EMBEDDED_FULL_LOGO: "data:_<media_type>_;base64,<base64_data>"
Copy to Clipboard Toggle word wrap

以下示例演示了如何使用 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"
Copy to Clipboard Toggle word wrap

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

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

app:
  branding:
    fullLogoWidth: 110px
1 

# ...
Copy to Clipboard Toggle word wrap
1
徽标宽度的默认值为 110px。支持以下单位： 整数,px,em,rem, , percentage.

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

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

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

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

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

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

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

流程

  1. 打开 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
            enabled: true
          default.my-group:
            title: My Group
            icon: group
            priority: 90
            enabled: true
          default.catalog:
            title: Catalog
            icon: category
            to: catalog
            priority: 80
            enabled: true
          default.apis:
            title: APIs
            icon: extension
            to: api-docs
            priority: 70
            enabled: true
          default.learning-path:
            title: Learning Paths
            icon: school,
            to: learning-paths
            priority: 60
            enabled: true
          default.create:
            title: Self-service
            icon: add
            to: create
            priority: 50
            enabled: true
Copy to Clipboard Toggle word wrap

10.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 
    
          enabled: true
    7
    Copy to Clipboard Toggle word wrap
    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 配置中定义 父菜单项。您可以为每个部分定义此字段。
    7
    启用 ：（可选）如果使用此字段从边栏中隐藏菜单项，请将值设为 false。要在边栏中显示菜单项，请将值设为 true。

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

    1
    my-plugin ：匹配 dynamicRoutes 中的 path 字段的值。
    2
    优先级 ：控制父菜单项下的插件顺序。
    3
    parent: 将此插件嵌套在喜欢 的父 菜单项下。
    4
    Favorites: 配置父菜单项。
    5
    图标 ：显示 RHDH 系统图标中的 喜欢 图标。
    6
    标题 ：显示父菜单项的标题名称。
    7
    priority: 侧边栏中的 favourites 菜单项的顺序。

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

流程

  • 在 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 
    
          enabled: true
    11
    Copy to Clipboard Toggle word wrap
    1
    default.<menu_group_parent_item_name > : （可选）输入菜单组父项来配置静态主菜单项。如果没有 默认值。&lt;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: （可选）在菜单级别输入此菜单项的顺序。
    11
    启用 ：（可选）如果使用此字段显示侧边栏中的菜单项，请将值设为 true。要在边栏中隐藏菜单项，请将值设为 false。

    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 
    
          enabled: true
    8
    Copy to Clipboard Toggle word wrap

    1
    icon: 指定是否要更改目录的图标默认菜单项。
    2
    title: 指定空字符串 " " 以从默认边栏隐藏学习路径。
    3
    default.parentlist ：显示父菜单项。
    4
    parent: 在 default.parentlist 父菜单项下，嵌套主页菜单。
    5
    title: 指定 default.references的名称
    6
    图标 ：显示 学区 图标。
    7
    要: 将 default.references 重定向到 /references 页面。
    8
    启用 ：（可选）如果使用此字段显示侧边栏中的菜单项，请将值设为 true。要在边栏中隐藏菜单项，请将值设为 false。

10.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>
    Copy to Clipboard Toggle word wrap
    <plugin_name>
    输入插件名称，如 backstage-community.plugin-topology。
    mountPoint
    输入选项卡挂载点，如 entity.page.topology。
    path
    输入选项卡路径，如 /topology。
    title
    输入选项卡标题，如 Topology。
    priority

    可选。

    要重新排序标签页，请输入标签优先级，如 42。优先级会首先显示。

    要删除选项卡，请输入负值，如 -1。

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

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

先决条件

流程

  • 在 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
    Copy to Clipboard Toggle word wrap
    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 列)中显示它们。

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

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

          navigation:
            indicator: <light_indicator_color>
2 

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

      dark:
        palette:
          primary:
            main: <dark_primary_color>
4 

          navigation:
            indicator: <dark_indicator_color>
5 

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

# ...
Copy to Clipboard Toggle word wrap
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

其他资源

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

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

app:
  branding:
    theme:
      light:
1 

        palette: {}
        pageTheme:
          default:
2 

            backgroundColor: "<default_light_background_color>"
3 

            fontColor: "<default_light_font_color>"
4 

            shape: none
5 

          apis:
6 

            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
# ...
Copy to Clipboard Toggle word wrap
1
me 模式，如 light 或 dark
2
主题配置的默认页面的 yaml 标头
3
页面标头背景的颜色，如 #ffffff 或 white
4
页面标头中文本颜色，如 #000000 或 black
5
页面标头中的模式，如 wave、round、或 none
6
特定页面主题配置的 yaml 标头，如 apis、home

10.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
# ...
Copy to Clipboard Toggle word wrap

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

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

10.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"
Copy to Clipboard Toggle word wrap

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

app:
  branding:
    theme:
      light:
        variant: "rhdh"
        mode: "light"
      dark:
        variant: "rhdh"
        mode: "dark"
Copy to Clipboard Toggle word wrap

10.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"
Copy to Clipboard Toggle word wrap

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

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

10.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"
Copy to Clipboard Toggle word wrap

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

app:
  branding:
    theme:
      light:
        variant: "backstage"
        mode: "light"
      dark:
        variant: "backstage"
        mode: "dark"
Copy to Clipboard Toggle word wrap

10.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
Copy to Clipboard Toggle word wrap

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

流程

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

    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} />
);
    Copy to Clipboard Toggle word wrap

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

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

    app-config.yaml 片段

    dynamicPlugins:
  frontend:
    example.my-custom-theme-plugin:
      themes:
        - id: light
    1 
    
          title: Light
          variant: light
          icon: someIconReference
          importName: lightThemeProvider
    Copy to Clipboard Toggle word wrap

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

验证

  • 主题位于 Developer Hub Settings 页面中。

10.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
Copy to Clipboard Toggle word wrap

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

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

  • 根据您安装并启用的插件，使用显示的额外卡自定义并扩展默认的 Home 页面布局。
  • 更改快速访问链接。

  • 添加、重新组织和删除以下可用卡：

    • 搜索栏
    • 快速访问
    • 标题
    • Markdown
    • 占位符
    • 目录不足实体
    • 特性文档

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

先决条件

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

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

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

    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 Toggle word wrap
    占位符
    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
    目录不足实体
    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: CatalogStarredEntitiesCard
    Copy to Clipboard Toggle word wrap
    特性文档
    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: FeaturedDocsCard
    Copy to Clipboard Toggle word wrap

11.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
Copy to Clipboard Toggle word wrap
  • 通过定义 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
Copy to Clipboard Toggle word wrap

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

  • 通过定义 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
Copy to Clipboard Toggle word wrap

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

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

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

先决条件

流程

  • 要从 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
    Copy to Clipboard Toggle word wrap

12.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。

先决条件

流程

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

  1. 从 Red Hat OpenShift Container Platform Web 控制台中的 Developer 视角，点 +Add > Import from Git。

  2. 在 Git Repo URL 字段中输入 Git 存储库的 URL。

    要使用 red-hat-developer-hub-customization-provider 服务，请添加 red-hat-developer-hub-customization-provider 存储库的 URL 或包含您的自定义的存储库分叉。

  3. 在 General 选项卡中，在 Name 字段中输入 red-hat-developer-hub-customization-provider，然后单击 Create。

  4. 在 Advanced Options 选项卡中，复制 Target Port 的值。

    注意

    目标端口 自动生成 Kubernetes 或 OpenShift Container Platform 服务以进行通信。

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

    proxy:
  endpoints:
    # Other Proxies
    # customize developer hub instance
    '/developer-hub':
      target: ${HOMEPAGE_DATA_URL}
    1 
    
      changeOrigin: true
      # Change to "false" in case of using self-hosted cluster with a self-signed certificate
      secure: true
    Copy to Clipboard Toggle word wrap
    1
    http://<SERVICE_NAME>:8080，例如 http://rhdh-customization-provider:8080。
    注意

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

  6. 将 URL 添加到 rhdh-secrets 或直接在自定义 ConfigMap 中替换它，替换 HOMEPAGE_DATA_URL。
  7. 删除 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"
      }
    ]
  }
]
    Copy to Clipboard Toggle word wrap
    注意

    如果请求调用失败或未配置，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
Copy to Clipboard Toggle word wrap

Red Hat Developer Hub 中的 Settings 页面包含一个 RHDH 元数据 卡。默认情况下，RHDH 元数据 卡显示 Red Hat Developer Hub 实例的 RHDH Version 和 Backstage 版本。当您点 Show more 图标时，卡也会展开显示 Upstream、Midstream 和 Build Time 信息。

您可以覆盖默认值，以显示卡中 Red Hat Developer Hub 实例的自定义构建信息。您可以自定义卡标题和卡内容。

流程

要自定义 RHDH 元数据 卡，请完成以下步骤：

  • 在 app-config.yaml 文件中，配置 buildinfo 字段。例如： 

    buildInfo:
  title: _<metadata_card_title>_
  card:
    TechDocs builder: '_<techdocs_builder>_'
    Authentication provider: '_<authentication_provider>_'
    RBAC: disabled
  full: true
    Copy to Clipboard Toggle word wrap

    其中

    <metadata_card_title>
    指定您要在自定义卡中显示的标题。
    <techdocs_builder>
    指定是否生成和发布文档，或者仅在使用默认构建策略时获取文档。可能的值有 local 或 external。如果要生成并发布文档，请在 app-config .yaml 文件中将 HEKETI.builder 字段设置为 local。如果您只想在不生成和发布它们的情况下获取文档，请将 wagon .builder 字段设置为 外部。
    <authentication_provider>
    指定您要使用的身份验证供应商。示例值是 GitHub 或 GitLab。
    full
    指定自定义卡中显示的信息。可能的值为 true 或 false。如果设置为 true，则卡中仅显示此配置中指定的信息。如果设置为 false，则卡中会显示指定的信息以及构建版本。默认值为 true。

结果

Settings 页面显示带有自定义标题和自定义构建信息的卡，以及有关 Red Hat Developer Hub 实例的自定义构建信息。

法律通告
复制链接

Copyright © 2025 Red Hat, Inc.
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 logoGithubredditYoutubeTwitter

学习

尝试、购买和销售

社区

关于红帽文档

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

让开源更具包容性

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

關於紅帽

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

Theme

© 2025 Red Hat